单个 div 中的多个光滑滑块

Question

我需要在单个 div 中创建多个光滑的滑块。
有一些与slick相关的按钮。当我点击一个按钮时，滑块相应地改变。

我已经用 kenwheeler slick slider 试过了，但它没有像我预期的那样工作。它只是在那里创建了一个新的滑块项目。

$('.myslick').slick({
  slidesToShow: 3,
  slidesToScroll: 3
});
$('.newslick').on('click', function() {
jQuery('.myslick').html('<div>new content</div><div>new content</div><div>new content</div><div>new content</div>   <div>new content</div><div>new content</div>').slick();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet"/>

<div class="myslick">
    <div>your content</div>
    <div>your content</div>
    <div>your content</div>
    <div>your content</div>
    <div>your content</div>
    <div>your content</div>
    <div>your content</div>
    <div>your content</div>
    <div>your content</div>
  </div>

<button class="newslick">New Slick</button>
<button class="featuredslick">Featured Slick</button>
<button class="oldslick">Old Slick</button>

我需要使用 json 或 ajax 动态更改内容。

Answer 1

我想这就是你想要做的。它是用 slick 创建的自定义函数供我使用。

class Tkslider{constructor(x) {this.x = x;var o,n,l;}slider(){var y=this.x[0];var co=(typeof(this.x[1]) != "undefined" && this.x[1] !== null) ? this.x[1] : {slidesToShow: 1,slidesToScroll: 1,arrows: false,fade: true,asNavFor: y+'_thumb',};var cn=(typeof(this.x[2]) != "undefined" && this.x[2] !== null) ? this.x[2] : {slidesToShow: 7,slidesToScroll: 1,asNavFor: y,dots: false,arrows: false,focusOnSelect: true};this.o = jQuery(y).slick(co);this.n = jQuery(y+'_thumb').slick(cn);this.l = jQuery(y).lightGallery({selector: 'a'});}destroy(){this.o.slick('unslick');this.n.slick('unslick');this.l.data('lightGallery').destroy(true);}}

setTimeout(function(){
jQuery(slider.x[0]).css('height',(jQuery(slider.x[0]).height()));
},2000);

var slider = new Tkslider(['#slider']);

var slide = slider.slider();

var slidejson ;  
$('[data-slidertype]').bind("click", { key: slide }, function(event){
var newslide = '';
var newslide_thumb = '';
if($(this).data('slidertype') === 'camera'){
    slidejson = [
    {'src':'http://placehold.it/300x150&text=a1','thumb':'http://placehold.it/100x100&text=a1'},
    {'src':'http://placehold.it/300x150&text=a2','thumb':'http://placehold.it/100x100&text=a2'},
    {'src':'http://placehold.it/300x150&text=a3','thumb':'http://placehold.it/100x100&text=a3'},
    {'src':'http://placehold.it/300x150&text=a4','thumb':'http://placehold.it/100x100&text=a4'},
    {'src':'http://placehold.it/300x150&text=a5','thumb':'http://placehold.it/100x100&text=a5'},
    {'src':'http://placehold.it/300x150&text=a6','thumb':'http://placehold.it/100x100&text=a6'},
    {'src':'http://placehold.it/300x150&text=a7','thumb':'http://placehold.it/100x100&text=a7'},
    ];
}
else if($(this).data('slidertype') === 'threesix'){
    slidejson = [
    {'src':'http://placehold.it/300x150&text=b1','thumb':'http://placehold.it/100x100&text=b1'},
    {'src':'http://placehold.it/300x150&text=b2','thumb':'http://placehold.it/100x100&text=b2'},
    {'src':'http://placehold.it/300x150&text=b3','thumb':'http://placehold.it/100x100&text=b3'},
    {'src':'http://placehold.it/300x150&text=b4','thumb':'http://placehold.it/100x100&text=b4'},
    {'src':'http://placehold.it/300x150&text=b5','thumb':'http://placehold.it/100x100&text=b5'},
    {'src':'http://placehold.it/300x150&text=b6','thumb':'http://placehold.it/100x100&text=b6'},
    {'src':'http://placehold.it/300x150&text=b7','thumb':'http://placehold.it/100x100&text=b7'},
    {'src':'http://placehold.it/300x150&text=b8','thumb':'http://placehold.it/100x100&text=b8'},
    {'src':'http://placehold.it/300x150&text=b9','thumb':'http://placehold.it/100x100&text=b9'},
    {'src':'http://placehold.it/300x150&text=b10','thumb':'http://placehold.it/100x100&text=b10'},
    {'src':'http://placehold.it/300x150&text=b11','thumb':'http://placehold.it/100x100&text=b11'},

    ];  
}
else if($(this).data('slidertype') === 'vdo'){
    slidejson = [
    {'src':'http://placehold.it/300x150&text=c1','thumb':'http://placehold.it/100x100&text=c1'},
    {'src':'http://placehold.it/300x150&text=c2','thumb':'http://placehold.it/100x100&text=c2'},
    {'src':'http://placehold.it/300x150&text=c3','thumb':'http://placehold.it/100x100&text=c3'},
    {'src':'http://placehold.it/300x150&text=c4','thumb':'http://placehold.it/100x100&text=c4'},
    {'src':'http://placehold.it/300x150&text=c5','thumb':'http://placehold.it/100x100&text=c5'},
    {'src':'http://placehold.it/300x150&text=c6','thumb':'http://placehold.it/100x100&text=c6'},
    {'src':'http://placehold.it/300x150&text=c7','thumb':'http://placehold.it/100x100&text=c7'},
    {'src':'http://placehold.it/300x150&text=c8','thumb':'http://placehold.it/100x100&text=c8'},
    {'src':'http://placehold.it/300x150&text=c9','thumb':'http://placehold.it/100x100&text=c9'},
    {'src':'http://placehold.it/300x150&text=c10','thumb':'http://placehold.it/100x100&text=c10'},
    ];  
}
    $.each(slidejson, function (x, y) {
        newslide += '<div data-index="x"><a href="'+y.src+'"><img src="'+y.src+'"  alt="One" class="img-responsive w100"/></a></div>';
        newslide_thumb += '<div><img src="'+y.thumb+'"  class="img-responsive w100"/></a></div>';
    });
    slider.destroy();
    $('#slider').html(newslide);
    $('#slider_thumb').html(newslide_thumb);
    slide = slider.slider();

});

body *{outline:none;}
.slick-slide {height: auto;}
.slider-nav-thumbnails .slick-slide {opacity: 0.5;}
.slider-nav-thumbnails .slick-slide.slick-current {opacity: 1;}
.w100{width: 100%;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.6/js/lightgallery-all.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.6/css/lightgallery.min.css" />


<div class="container-fluid">
 <div class="col-md-12">
 
   <!-- MAIN SLIDES -->
   <div id="slider" class="">
    <div data-index="1">
     <a href="http://placehold.it/300x150&text=one">
      <img src="http://placehold.it/300x150&text=one" alt="One" class="img-responsive w100">
     </a>
    </div>
    <div data-index="2">
     <a href="http://placehold.it/300x150&text=two">
      <img src="http://placehold.it/300x150&text=two" alt="One" class="img-responsive w100">
     </a>
    </div>
    <div data-index="3">
     <a href="http://placehold.it/300x150&text=three">
      <img src="http://placehold.it/300x150&text=three" alt="One" class="img-responsive w100">
     </a>
    </div>
    <div data-index="4">
     <a href="http://placehold.it/300x150&text=four">
      <img src="http://placehold.it/300x150&text=four" alt="One" class="img-responsive w100">
     </a>
    </div>
    <div data-index="5">
     <a href="http://placehold.it/300x150&text=five">
      <img src="http://placehold.it/300x150&text=five" alt="One" class="img-responsive w100">
     </a>
    </div>
    <div data-index="6">
     <a href="http://placehold.it/300x150&text=six">
      <img src="http://placehold.it/300x150&text=six" alt="One" class="img-responsive w100">
     </a>
    </div>
    <div data-index="7">
     <a href="http://placehold.it/300x150&text=seven">
      <img src="http://placehold.it/300x150&text=seven" alt="One" class="img-responsive w100">
     </a>
    </div>
    <div data-index="8">
     <a href="http://placehold.it/300x150&text=eight">
      <img src="http://placehold.it/300x150&text=eight" alt="One" class="img-responsive w100">
     </a>
    </div>
    <div data-index="9">
     <a href="http://placehold.it/300x150&text=nine">
      <img src="http://placehold.it/300x150&text=nine" alt="One" class="img-responsive w100">
     </a>
    </div>
   </div>
   
   <!-- THUMBNAILS -->
   <div id="slider_thumb" class="slider-nav-thumbnails">
    <div><img src="http://placehold.it/100x100&text=one" class="img-responsive w100"></div>
    <div><img src="http://placehold.it/100x100&text=two" class="img-responsive w100"></div>
    <div><img src="http://placehold.it/100x100&text=three" class="img-responsive w100"></div>
    <div><img src="http://placehold.it/100x100&text=four" class="img-responsive w100"></div>
    <div><img src="http://placehold.it/100x100&text=five" class="img-responsive w100"></div>
    <div><img src="http://placehold.it/100x100&text=six" class="img-responsive w100"></div>
    <div><img src="http://placehold.it/100x100&text=seven" class="img-responsive w100"></div>
    <div><img src="http://placehold.it/100x100&text=eight" class="img-responsive w100"></div>
    <div><img src="http://placehold.it/100x100&text=nine" class="img-responsive w100"></div>
   </div>
<div>
 <button data-slidertype="camera">Image</button>
 <button data-slidertype="threesix">360</button>
 <button data-slidertype="vdo">Video</button>
</div>


</div>

单个 div 中的多个光滑滑块

Multiple slick slider in a single div

javascript

css

jquery

slider

slick.js