Question

我首先要说的是，我并不熟悉Cycle2，只是我正在做的公司正在他们的网站上使用它。

无论如何，它不再在旋转木马中显示多个图像，不知道为什么。这是一个WordPress集成。

http://www.wolfbrewingcompany.com/beers/core-range/

以下是调用滑块的页面中的代码

<div class="post" id="post-<?php the_ID(); ?>">

    <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/javascripts/jquery.cycle2.carousel.js"></script>
    <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/javascripts/jquery.cycle2.swipe.js"></script>
    <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/javascripts/ios6fix.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){

        $('.beers-slideshow').cycle();

        //$('.beers-slideshow .beer_name').hide();
        $('.beers-slideshow img')
        .mouseenter(function() {
            $(this).parent().next().show();
        })
        .mouseleave(function() {
            $(this).parent().next().hide();

        });

    });
    </script>

    <div class="beers_bg">
    <div class="beers_wrapper">

            <?php 
                $count = 0;
                $html = '';
                if( have_rows('beer_slider') ):
                while ( have_rows('beer_slider') ) : the_row();

                $html .= '<div>
                    <a href="'.get_sub_field('beer_url').'"><img src="'.get_sub_field('beer_image').'" width="270" height="530" alt="'.get_sub_field('beer_name').'" /></a>
                    <div class="cycle-overlay">
                        <div class="beer_name">'.get_sub_field('beer_name').'</div>
                    </div>
                </div>';
                $count ++;
                endwhile;
                endif;
            ?>

            <div class="beers-slideshow" 
            data-cycle-fx="carousel"
            data-cycle-timeout="0"
            data-cycle-pause-on-hover="true"
            data-cycle-slides="> div" 
            data-cycle-carousel-visible="<?php echo $count < 3 ? $count : 3 ?>"
            data-allow-wrap="false"
            data-cycle-carousel-fluid="false"
            data-cycle-swipe="true"
            data-cycle-next=".beers-next"
            data-cycle-prev=".beers-prev"
            >
            <?php echo $html ?>
        </div><!-- end of .beers-slideshow -->

        <?php if ($count > 3): ?>
        <span class="beers-prev"></span>
        <span class="beers-next"></span>
        <?php endif ?>

    </div><!-- end of .beers_wrapper -->
    </div><!-- end of .beers_bg -->

</div><!--  end of div post -->

它应该显示3个啤酒，并滚动浏览。

Answer 1

你可以查看3件事：

你是否包含了carousel cycle2 additionnal插件？ http://jquery.malsup.com/cycle2/download/
似乎Cycle2轮播只与jquery1兼容。你的jquery版本是什么？
确保在AFTER cycle2

Jquery Cycle2仅显示单个图像

1 个答案: