Owl Carousel 2.3.4在同一页面上使用不同类别的2个轮播,

时间:2018-06-08 08:04:46

标签: javascript owl-carousel-2

版本2.3.4:

第一个旋转木马最终只有3个项目,只有1个。 第二个旋转木马没有物品。

以下是推送到演示站点的代码,以便您可以看到它无法正常工作。

您可以在此处查看实际代码: http://papworth.franktesting.co.uk/

使用旧的未知版本但不循环。

这是代码

JS:

var owl = $('#owl-carousel-banner');
    owl.owlCarousel({
        navigation: false,
        singleItem: true,
        pagination: true,
        autoPlay: 6000,
        dots: true,
        loop: true,
        transitionStyle: "fade"
    });


 var owlPagelist = $('.owl-list-pages');
        owlPagelist.owlCarousel({
            navText: [

                    "<img src=\"\\application\\themes\\custom\\images\\owl-left.png\">",
                    "<img src=\"\\application\\themes\\custom\\images\\owl-right.png\">",
            ],
            autoPlay: true,
            slideSpeed : 2000,
            dots:false,
            loop: true,
            items: 3,
            responsive:{
                0:{ 
                    items:1,
                    nav:false
                },
                768:{
                    items:3,
                    nav:true
                },

            }
        });

});

HTML code:

<div id="owl-carousel-banner" class="owl-carousel">

    <div class="carouselSlide">     

            <img src="/photo1.png" />
     </div>   
     <div class="carouselSlide">     

            <img src="/photo2.png" />
     </div>   

</div>

<div class="page-list-carousel carouselList">


    <div id="owl-carousel-2" class="owl-list-pages" >

            <div class="carouselListItem">

                        <a href="/working-us" > LINK1</a>
            </div>


            <div class="carouselListItem">

                        <a href="/working-us" > LINK2</a>
            </div>

            <div class="carouselListItem">

                        <a href="/working-us" > LINK3</a>
            </div>

            <div class="carouselListItem">

                        <a href="/working-us" > LINK4</a>
            </div>

            <div class="carouselListItem">

                        <a href="/working-us" > LINK5</a>
            </div>
    </div> 


</div><!-- end .ccm-block-page-list -->

0 个答案:

没有答案