通過點擊圖像初始化滑動滑塊

我需要一個功能來完成我的滑塊圖像。我使用Slick.js來構建我的滑塊和一些HTML和CSS，以便在用戶點擊靜態圖像時啓動的模式中顯示。那麼，我需要滑塊中顯示的第一張幻燈片纔是用戶點擊的幻燈片。我認爲這是世界滑塊中非常普遍的特徵。但是我還沒有找到經過大量搜索後做到這一點的方法。我在問，因爲也許有人以前使用過Slick，他的情況也一樣。我猜我必須玩的設置是initialSlide，但不知道如何在滑塊初始化的同時如何存儲圖像的引用。我知道是一個棘手的問題，但我要求只是在case.Thank你先進通過點擊圖像初始化滑動滑塊

這是我如何初始化滑塊

<script> 

    $(document).ready(function(){ 
    $('.slider-gallery').slick({ 
     lazyLoad: 'ondemand', 
     slidesToShow: 1, 
     slidesToScroll: 1 
    }); 
    $(".slick-prev").hide(); 
    $(".slick-next").hide(); 
    }); 

    $('#prev').click(function(){ 
    $(".slider-gallery").slick('slickNext'); 
    }); 

    $('#next').click(function(){ 
    $(".slider-gallery").slick('slickPrev'); 
    }); 

</script>

這是靜態庫圖像的HTML

<div class="large-6 medium-6 small-12 columns"> 
<div class="main-img"><a href="#openGallery"> 
<img src="assets/images/2.png" alt=""></a> 
</div> 
<div class="thumbnails"> 
    <img class="large-4 medium-4 small-4 columns" src="assets/images/1.png" alt=""> 
    <img class="large-4 medium-4 small-4 columns" src="assets/images/2.png" alt=""> 
    <div class="thumbnail-hover"><a href="#openGallery"> 
    <div class="hover-gallery">23fotos</div> 
    <img class="large-4 medium-4 small-4 columns" src="assets/images/3.png" alt=""></a> 
    </div> 
</div>

與滑塊的這個HTML

<div id="openGallery" class="item-gallery"> 
    <div class="row"> 
    <a href="#close" title="Close" class="close-gallery">X</a> 
    <div class="large-1 medium-1 columns"> 
     <button class="button-slider-gallery previous-button fa fa-chevron-left" id="prev" value="prev"></button> 
    </div> 
    <div class="large-10 medium-10 columns"> 
     <div class="slider-gallery"> 
     <div class="image"> 
      <img id="image-slider" class="width-images" data-lazy="assets/images/1.png"> 
     </div> 
     <div class="image"> 
      <img id="image-slider" class="width-images" data-lazy="assets/images/2.png"> 
     </div> 
     <div class="image"> 
      <img id="image-slider" class="width-images" data-lazy="assets/images/3.png"> 
     </div> 
     </div> 
    </div> 
    <div class="large-1 medium-1 columns"> 
     <button class="button-slider-gallery next-button fa fa-chevron-right" id="next" value="next"></button> 
    </div> 
    </div> 
</div>

來源

2015-07-02 David Soler

請將您的代碼作爲工作示例發佈在小提琴中。在那裏幫助你會更容易！ – lshettyl

我會這樣做，但我嘗試了幾個tiemes使小提琴工作，我不明白。代碼依賴於外部庫。老實說，我不知道如何處理它。因爲我依賴於光滑。但是我會努力的 –

這樣做的一種方法是使用每次單擊圖像時附加的slickGoTo（）函數。

<img class="small-4 columns" src="assets/images/1.png" alt="" onclick="$('.slider-gallery').slickGoTo(0)"> 
<img class="small-4 columns" src="assets/images/2.png" alt="" onclick="$('.slider-gallery').slickGoTo(1)">

注：

第一張幻燈片是0，第二個爲1，所以...
您正在使用基金會這是真棒。您不需要添加medium-4和large-4，就像您在small-4時所做的那樣。基金會的規則是「小」=小而大。

如果這是行不通的請嘗試以下語法instaed：

onclick="$('.slider-gallery').slick('slickGoTo', 0);"

這取決於你使用的光滑的版本。

來源

2015-07-04 19:29:34

通過點擊圖像初始化滑動滑塊

回答

相關問題