Question

我需要创建多个光滑的滑块。

问题是当页面加载第一个滑块并正常工作时。但是，当我指向照片时，点击包含第二个Slider ，直到我按下next或prev箭头后，它才会加载。

这是我的代码示例：

JS文件

    $('#slider_1').each(function (key, item) {

    var sliderIdName = 'slider' + key;
    var sliderNavIdName = 'sliderNav' + key;

    this.id = sliderIdName;
    $('#slider_nav_1')[key].id = sliderNavIdName;

    var sliderId = '#' + sliderIdName;
    var sliderNavId = '#' + sliderNavIdName;

    $(sliderId).slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false,
        fade: true,
        speed: 500,
        asNavFor: sliderNavId
    });

    $(sliderNavId).slick({
        slidesToShow: 3.5,
        slidesToScroll: 1,
        asNavFor: sliderId,
        dots: false,
        centerMode: true,
        focusOnSelect: true,
        vertical: true,
        arrows: true
    });

});
$('#slider_2').each(function (key, item) {

    var sliderIdNamePhotos = 'slider_' + key;
    var sliderNavIdNamePhotos = 'sliderNav_' + key;

    this.id = sliderIdNamePhotos;
    $('#slider_nav_2')[key].id = sliderNavIdNamePhotos;

    var sliderIdPhotos = '#' + sliderIdNamePhotos;
    var sliderNavIdPhotos = '#' + sliderNavIdNamePhotos;

    $(sliderIdPhotos).slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false,
        fade: true,
        speed: 500,
        asNavFor: sliderNavIdPhotos
    });

    $(sliderNavIdPhotos).slick({
        slidesToShow: 3.5,
        slidesToScroll: 1,
        asNavFor: sliderIdPhotos,
        dots: false,
        centerMode: true,
        focusOnSelect: true,
        vertical: true,
        arrows: true
    });

});

CSS文件

我正在使用Slick默认的CSS文件

我的DIV

                <div class="tab-content" style="padding: 0 40px 50px;" id="pills-tabContent">
                <!--  VIDEOS GALLERY SECTION  -->
                <div class="tab-pane fade show active" id="pills-videos" role="tabpanel"
                     aria-labelledby="pills-videos-tab">
                    <div class="row" style="margin: 0 auto;">
                        <div class="col-sm-10"
                             style="background-color:#fff; margin: 0 auto; display:flex; box-shadow: 4px 4px 10px 0px rgba(3, 3, 3, 0.04);">

                            <ul id="slider_1" class="slider slider-for slider-videos">
                                <li>
                                    <img src="images/media-center/somebody.jpg" alt="Wicked">
                                </li>
                            </ul>

                            <ul id="slider_nav_1" class="slider slider-nav slider-videos-nav">
                                <li>
                                    <img src="images/media-center/gallery_side_somebody.jpg" alt="Wicked">
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!--  END OF VIDEOS GALLERY SECTION  -->

                <!--  PHOTOS GALLERY SECTION  -->
                <div class="tab-pane fade" id="pills-photos" role="tabpanel" aria-labelledby="pills-photos-tab">
                    <div class="row" style="margin: 0 auto;">
                        <div class="col-sm-10"
                             style="background-color:#fff; margin: 0 auto; display:flex; box-shadow: 4px 4px 10px 0px rgba(3, 3, 3, 0.04);">

                            <ul id="slider_2" class="slider slider-for slider-photos">
                                <li>
                                    <img src="images/media-center/somebody.jpg" alt="Wicked">
                                </li>
                            </ul>

                            <ul id="slider_nav_2" class="slider slider-nav slider-photos-nav">
                                <li>
                                    <img src="images/media-center/gallery_side_somebody.jpg" alt="Wicked">
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!--  END PHOTOS GALLERY SECTION  -->
            </div>

多个滑动滑块JS问题

0 个答案: