Question

我尝试在我的页面中使用JCarousel，下面是我用于多个JCarousel的HTML：

<div class="col-md-12 jcarousel-wrapper">
    <div id="jc1" class="jcarousel">
        <ul>
            <li><img src="images_offer/dest_01.jpg" alt="Image 1"></li>
            <li><img src="images_offer/dest_02.jpg" alt="Image 2"></li>
            <li><img src="images_offer/dest_03.jpg" alt="Image 3"></li>
            <li><img src="images_offer/dest_04.jpg" alt="Image 4"></li>
            <li><img src="images_offer/dest_05.jpg" alt="Image 5"></li>
            <li><img src="images_offer/dest_06.jpg" alt="Image 6"></li>
        </ul>
    </div>
    <a href="#" class="jcarousel-control-prev">‹</a><a href="#" class="jcarousel-control-next">›</a>
</div>
<div class="col-md-12 jcarousel-wrapper">
    <div id="jc2" class="jcarousel">
        <ul>
            <li><img src="images_offer/dest_01.jpg" alt="Image 1"></li>
            <li><img src="images_offer/dest_02.jpg" alt="Image 2"></li>
            <li><img src="images_offer/dest_03.jpg" alt="Image 3"></li>
            <li><img src="images_offer/dest_04.jpg" alt="Image 4"></li>
            <li><img src="images_offer/dest_05.jpg" alt="Image 5"></li>
            <li><img src="images_offer/dest_06.jpg" alt="Image 6"></li>
        </ul>
    </div>
    <a href="#" class="jcarousel-control-prev">‹</a><a href="#" class="jcarousel-control-next">›</a>
</div>

这是我在同一页面中使用的JQuery：

(function($) {
    $(function() {
        var jcarousel= $('.jcarousel');

        jcarousel.on('jcarousel:reload jcarousel:create', function () {
            var width = jcarousel.innerWidth();

            if (width >= 600) {
                width = width / 3;
            } else if (width >= 350) {
                width = width / 2;
            }

            jcarousel.jcarousel('items').css('width', width + 'px');
        })



        $('.jcarousel').jcarousel({
                wrap: 'circular'
        });


        $('.jcarousel-control-prev')
            .jcarouselControl({
                target: '-=1'
            });

        $('.jcarousel-control-next')
            .jcarouselCo ntrol({
                target: '+=1'
            });
    });
})(jQuery);

这里问题id='jc1'与JQuery宽度一起工作正常，但id='jc2'正在工作，但没有设置宽度为什么？

Answer 1

第二个滑块的脚本

 $(function() {
        $('#second .jcarousel').jcarousel();

        $('#second .jcarousel-control-prev')
            .on('jcarouselcontrol:active', function() {
                $(this).removeClass('inactive');
            })
            .on('jcarouselcontrol:inactive', function() {
                $(this).addClass('inactive');
            })
            .jcarouselControl({
                target: '-=1'
            });

        $('#second .jcarousel-control-next')
            .on('jcarouselcontrol:active', function() {
                $(this).removeClass('inactive');
            })
            .on('jcarouselcontrol:inactive', function() {
                $(this).addClass('inactive');
            })
            .jcarouselControl({
                target: '+=1'
            });

        $('#second .jcarousel-pagination')
            .on('jcarouselpagination:active', 'a', function() {
                $(this).addClass('active');
            })
            .on('jcarouselpagination:inactive', 'a', function() {
                $(this).removeClass('active');
            })
            .jcarouselPagination();
    });

包含第二个ID的第二个滑块的HTML

<div class="jcarousel-wrapper" id="second">
    // second slider
</div>

Answer 2

我找到了解决方案。

<强>替换

jcarousel.jcarousel('items').css('width', width + 'px');

<强>与

jcarousel.jcarousel('items').css('width', width + 'px');    
var element_width = $("#jc1 li").width();               
$("#jc2 li").each(function(){                   
    $(this).css("width",element_width);                                 
});

谢谢，

Puspendu

Answer 3

不是重复整个功能，你可以只玩下面的小东西;

调用该函数的jQuery脚本：

<script type="text/javascript">
$(function() {
    //Initiate slider-one
    $('.slider-one .jcarousel')
        .jcarousel({
            // Core configuration goes here
        })
        .jcarouselAutoscroll({
            interval: 1000,
            target: '+=1',
            autostart: true
        });

    //Initiate slider-two
    $('.slider-two .jcarousel')
        .jcarousel({
            // Core configuration goes here
        })
        .jcarouselAutoscroll({
            interval: 500,
            target: '+=1',
            autostart: true
        });

    //Initiate slider-three
    $('.slider-three .jcarousel')
        .jcarousel({
            // Core configuration goes here
        })
        .jcarouselAutoscroll({
            interval: 500,
            target: '+=1',
            autostart: true
        });
});
</script>

<强> HTML：

<!-- slider-one BEGINS -->
<div class="banner slider-one"> 
    <div class="jcarousel-wrapper">
        <div class="jcarousel">
            <ul>
                <li><img src="images/banner1.png"></li>
                <li><img src="images/banner2.png"></li>
                <li><img src="images/banner3.png"></li>
             </ul>
        </div>
        <a href="#" class="jcarousel-control-prev"><i class="fa fa-angle-left" aria-hidden="true"></i></a>
        <a href="#" class="jcarousel-control-next"><i class="fa fa-angle-right" aria-hidden="true"></i></a>
        <p class="jcarousel-pagination"></p>
    </div>
</div>
<!-- slider-one ENDS -->

<!-- slider-two BEGINS -->
<div class="banner slider-two"> 
    <div class="jcarousel-wrapper">
        <div class="jcarousel">
            <ul>
                <li><img src="images/banner1.png"></li>
                <li><img src="images/banner2.png"></li>
                <li><img src="images/banner3.png"></li>
             </ul>
        </div>
        <a href="#" class="jcarousel-control-prev"><i class="fa fa-angle-left" aria-hidden="true"></i></a>
        <a href="#" class="jcarousel-control-next"><i class="fa fa-angle-right" aria-hidden="true"></i></a>
        <p class="jcarousel-pagination"></p>
    </div>
</div>
<!-- slider-two ENDS -->

<!-- slider-three BEGINS -->
<div class="banner slider-three">   
    <div class="jcarousel-wrapper">
        <div class="jcarousel">
            <ul>
                <li><img src="images/banner1.png"></li>
                <li><img src="images/banner2.png"></li>
                <li><img src="images/banner3.png"></li>
             </ul>
        </div>
        <a href="#" class="jcarousel-control-prev"><i class="fa fa-angle-left" aria-hidden="true"></i></a>
        <a href="#" class="jcarousel-control-next"><i class="fa fa-angle-right" aria-hidden="true"></i></a>
        <p class="jcarousel-pagination"></p>
    </div>
</div>
<!-- slider-three ENDS -->

如何在一个页面中使用多个jcarousel？

3 个答案: