通过点击图像初始化滑动滑块

我需要一个功能来完成我的滑块图像。我使用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

通过点击图像初始化滑动滑块

回答

相关问题