0
傢伙我使用這個旋轉木馬http://kenwheeler.github.io/slick/我們的寫字樓項目之一。基本上，在這輪播，會有一個主滑塊及以下小縮略圖。當你點擊縮略圖時，大圖像將在上方打開。jQuery的旋轉木馬 - 縮略圖的點擊數，顯示一個div和隱藏的onclick一個縮略圖
在縮略圖，將有一個div隱藏。當你點擊縮略圖時，div顯示出來。當你點擊一個縮略圖，在前面的縮略圖在div隱藏。
我是一個新手，jQuery的。任何幫助都會很棒。下面的代碼 -
<div id="slider-wrap">
<div class="container-fluid" style="padding:0px">
<div class="slider-for">
<div class="single-item">
<div>
<p>Buy 20 VCHR get <br/>1 MICROs free</p>
<img class="img-responsive" src="dummyimg/slide-1.jpg" alt="">
</div>
</div>
<div class="single-item">
<div>
<p>Buy 40 VCHR get <br/>2 MICROs free</p>
<img class="img-responsive" src="dummyimg/slide-2.jpg" alt="">
</div>
</div>
<div class="single-item">
<div>
<p>Buy 60 VCHR get <br/>3 MICROs free</p>
<img class="img-responsive" src="dummyimg/slide-3.jpg" alt="">
</div>
</div>
<div class="single-item">
<div>
<p>Buy 80 VCHR get <br/>4 MICROs free</p>
<img class="img-responsive" src="dummyimg/slide-4.jpg" alt="">
</div>
</div>
<div class="single-item">
<div>
<p>Buy 100 VCHR get <br/>5 MICROs free</p>
<img class="img-responsive" src="dummyimg/slide-5.jpg" alt="">
</div>
</div>
</div>
</div>
<div class="container-fluid" style="padding:0px">
<div class="slider-nav">
<div class="slider-nav-single-item">
<div class="white-box">
dfndkjghjn
gfjhlf
</div>
<p>Buy 20<br/> VCHR get<br/> 1 MICROs</p>
<img class="img-responsive" src="dummyimg/slide-thumb-1.jpg" alt="">
</div>
<div class="slider-nav-single-item">
<div class="white-box">
dfndkjghjn
gfjhlf
</div>
<p>Buy 20<br/> VCHR get<br/> 1 MICROs</p>
<img class="img-responsive" src="dummyimg/slide-thumb-2.jpg" alt="">
</div>
<div class="slider-nav-single-item">
<div class="white-box">
dfndkjghjn
gfjhlf
</div>
<p>Buy 20<br/> VCHR get<br/> 1 MICROs</p>
<img class="img-responsive" src="dummyimg/slide-thumb-3.jpg" alt="">
</div>
<div class="slider-nav-single-item">
<div class="white-box">
dfndkjghjn
gfjhlf
</div>
<p>Buy 20<br/> VCHR get<br/> 1 MICROs</p>
<img class="img-responsive" src="dummyimg/slide-thumb-4.jpg" alt="">
</div>
<div class="slider-nav-single-item">
<div class="white-box">
dfndkjghjn
gfjhlf
</div>
<p>Buy 20<br/> VCHR get<br/> 1 MICROs</p>
<img class="img-responsive" src="dummyimg/slide-thumb-5.jpg" alt="">
</div>
</div>
</div>
</div>
而這裏的jQuery的 -
$(document).ready(function() {
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
fade: true,
arrows: false,
asNavFor: '.slider-nav',
mobileFirst: true,
respondTo: true,
});
$('.slider-nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: false,
centerMode: true,
centerPadding: '17%',
arrows: false,
focusOnSelect: true,
mobileFirst: true,
respondTo: true,
});
$('.single-item').slick({
dots: false,
arrows: false,
mobileFirst: true,
respondTo: true,
});
});
$(document).ready(function() {
$('.slider-nav-single-item').click(function() {
$(this).children().show();
});
});