单个div

时间：2018-01-30 08:37:37

标签： javascript jquery css slider slick-slider

  1. 我需要在一个div中创建多个滑动滑块。
  2. 有一些与光滑相关的按钮。当我点击一个按钮时，滑块会相应变化。

    3. 我用kenwheeler光滑的滑块尝试了它，但它没有像我预期的那样工作。它只是在那里创建一个新的滑块项目。

    $('.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动态更改内容。

1 个答案:

答案 0 :(得分：0)

我认为这是你想做的。它是一个使用光滑创建的自定义功能供我使用。

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>

相关问题
最新问题