无法让 cycle2 轮播与文本叠加一起使用

Posted

技术标签:

【中文标题】无法让 cycle2 轮播与文本叠加一起使用【英文标题】:Not able to get cycle2 carousel working with text overlay 【发布时间】:2015-09-22 19:24:53 【问题描述】:

我正在尝试让 cycle2 轮播与 wordpress 中的文本叠加一起工作。图像只是垂直显示。我只能让基本的 cycle2 演示工作而不是轮播。这是我的代码:

    <div class="cycle-slideshow" 
        data-cycle-fx="carousel"
        data-cycle-timeout="0"
        data-cycle-next="#next4"
        data-cycle-prev="#prev4"
        data-cycle-carousel-visible="5"
        data-allow-wrap="false"
    data-cycle-slides="> a"
      >
    <div class="cycle-overlay"></div>
        <a href="http://google.com" data-cycle-title="first" data-cycle-  desc="first description"><img src="http://malsup.github.io/images/beach1.jpg"></a>
        <a href="http://google.com" data-cycle-title="two" data-cycle-desc="second description"><img src="http://malsup.github.io/images/beach2.jpg"></a>
        <a href="http://google.com" data-cycle-title="three" data-cycle-desc="third description"><img src="http://malsup.github.io/images/beach3.jpg"></a>
        <a href="http://google.com" data-cycle-title="four" data-cycle-desc="fourth description"><img src="http://malsup.github.io/images/beach4.jpg"></a>
       <a href="http://google.com" data-cycle-title="five" data-cycle-desc="fifth description"><img src="http://malsup.github.io/images/beach5.jpg"></a>
       <a href="http://google.com" data-cycle-title="six" data-cycle-desc="sixth description"><img src="http://malsup.github.io/images/beach6.jpg"></a>
       <a href="http://google.com" data-cycle-title="seven" data-cycle-desc="seventh description"><img src="http://malsup.github.io/images/beach7.jpg"></a>
       <a href="http://google.com" data-cycle-title="eight" data-cycle-desc="eight description"><img src="http://malsup.github.io/images/beach8.jpg"></a>
       <a href="http://google.com" data-cycle-title="nine" data-cycle-desc="ninth description"><img src="http://malsup.github.io/images/beach9.jpg"></a>
</div>

 <div class=center>
    <a href=# id=prev4><< Prev </a>
    <a href=# id=next4> Next >> </a>
 </div>


/* overlay */
.cycle-overlay  
        position: absolute;
    bottom: 0;
    width: 150px;
    max-width: 800px;
    z-index: 600;
        background: black;
    color: white;
  


  function my_scripts_method1() 
      wp_register_script('my-script1', get_stylesheet_directory() . '/js/jquery.cycle2.min.js',array('jquery'));
   if ( is_page('home') )   
    wp_enqueue_script('my-script1');

 
 function my_scripts_method2() 
 wp_register_script('custom-script', get_stylesheet_directory() . '/js/jquery.cycle2.carousel.min.js',array('jquery'));

    if ( is_page('home') ) 
    wp_enqueue_script('custom-script');

  

  if ( !is_admin() ) 
    add_action('wp_enqueue_scripts','my_scripts_method1');
    add_action('wp_enqueue_scripts','my_scripts_method2');

【问题讨论】:

【参考方案1】:

这似乎对我有用。仔细检查您是否包括jquery.cycle2.jsjquery.cycle2.carousel.js。 JSfiddle:http://jsfiddle.net/omikey/3jsLsrch/1/

【讨论】:

编辑:也将 data-allow-wrap 设置为 true【参考方案2】:

如果您的基本幻灯片正常工作,但轮播不正常,则您一定缺少所需功能所需的 Cycle2 Carousel 插件。在 Cycle2 下载页面找到它

http://malsup.github.io/min/jquery.cycle2.carousel.min.js

编辑

将脚本加入队列的正确方法是处理 wp_enqueue_script() 参数中的依赖关系。

您可以使用单个操作直接将所有脚本加入队列,而无需单独注册脚本。以下简化代码将通过在正确的时间包含脚本依赖项来解决您的问题。

function my_scripts_method() 
    $template_dir = get_template_directory_uri();
    if ( is_page('home') )
        wp_enqueue_script( 'cycle2', $template_dir . '/js/jquery.cycle2.min.js',array( 'jquery' ) );
        wp_enqueue_script( 'cycle2-carousel', $template_dir . '/js/jquery.cycle2.carousel.min.js', array( 'jquery', 'cycle2' ) );
    


add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

要验证两个脚本是否都在排队,您可以检查呈现页面的 html 源代码。

【讨论】:

嗨,我包括 jquery.cycle2.carousel.min.js 和 jquery.cycle2.min.js。 我正在使用 wordpress,所以我必须将脚本排入队列: 查看我编辑的原始帖子,其中包括将脚本加入队列。我知道第一个 enqueue 有效,因为基本示例有效。 谢谢法兹。我用您建议的编辑更新了我的 functions.php 文件,但它仍然不起作用。我做了一个查看源代码,没有显示循环代码。我使用的是子主题,所以我使用入队脚本编辑了 chile-theme funtions.php 文件。由于这是一个儿童主题,我还缺少什么吗? 因为它是一个子主题,你必须使用 get_stylesheet_directory_uri() 而不是 get_template_directory_uri()。此外,删除“if (is_page('home'))”条件,除非您打算仅将脚本添加到页面模板“home”。如果您打算仅将脚本添加到网站主页,请改用“if (is_front_page())”。

以上是关于无法让 cycle2 轮播与文本叠加一起使用的主要内容,如果未能解决你的问题,请参考以下文章

iOS开发项目实战——Swift实现图片轮播与浏览

js图片轮播与索引变色

图片的轮播与选择上下页方法

仅当子容器具有内容时,如何将类添加到特定的父元素

带无缝滚动的轮播图(含JS运动框架)

设置左侧(在容器中)对齐的轮播以到达屏幕右侧(在容器外)