Слайдер не показывает большие пальцы - PullRequest
Новая
       48

Слайдер не показывает большие пальцы

0 голосов
/ 18 сентября 2018

У меня есть скользящий слайдер с миниатюрами в качестве точечной навигации, но большие пальцы появляются как неопределенные. Вот мой код. Любая помощь с благодарностью! 

<section class="slider">
<div data-thumb="images/3white.svg?$staticlink$"><img src="images/cutaway3.png?$staticlink$"></div>
<div data-thumb="images/4white.svg?$staticlink$"><img src="images/cutaway4.png?$staticlink$"></div>
<div data-thumb="images/5white.svg?$staticlink$"><img src="images/cutaway5.png?$staticlink$"></div>
<div data-thumb="images/6white.svg?$staticlink$"><img src="images/cutaway6.png?$staticlink$"></div>
<div data-thumb="images/7white.svg?$staticlink$"><img src="images/cutaway7.png?$staticlink$"></div>
<div data-thumb="images/8gray.svg?$staticlink$"><img src="images/cutaway8.png?$staticlink$"></div>
<div data-thumb="images/9gray.svg?$staticlink$"><img src="images/cutaway9.png?$staticlink$"></div>
<div data-thumb="images/Pgray.svg?$staticlink$"><img src="images/cutawayP.png?$staticlink$"></div>
</section>

<script type="text/javascript">
$(".slider").slick({

autoplay: false,
dots: true,
customPaging : function(slider, i) {
    var thumb = $(slider.$slides[i]).data('thumb');
    return '<a><img src="'+thumb+'"></a>';
},

responsive: [{ 
    breakpoint: 500,
    settings: {
        dots: false,
        arrows: false,
        infinite: false,
        slidesToShow: 2,
        slidesToScroll: 2
    } 
}]
});

1 Ответ

0 голосов
/ 18 сентября 2018

Вот пример, который может вам помочь: 

$('.slider').slick({
  autoplay: false,
  dots: true,
  customPaging: function(slider, i) {
    var thumb = $(slider.$slides[i]).data('thumb');
    return '<a><img width="20" src="' + thumb + '"></a>';
  },

  responsive: [{
    breakpoint: 500,
    settings: {
      dots: false,
      arrows: false,
      infinite: false,
      slidesToShow: 2,
      slidesToScroll: 2
    }
  }]
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css">
<section class="slider">
  <div data-thumb="https://images.freeimages.com/images/small-previews/819/why-hello-1376445.jpg"><img src="https://images.freeimages.com/images/small-previews/819/why-hello-1376445.jpg"></div>
  <div data-thumb="https://images.freeimages.com/images/small-previews/5ae/grape-vine-leaf-1327453.jpg"><img src="https://images.freeimages.com/images/small-previews/5ae/grape-vine-leaf-1327453.jpg"></div>
  <div data-thumb="https://images.freeimages.com/images/small-previews/a61/vikingland-1316664.jpg"><img src="https://images.freeimages.com/images/small-previews/a61/vikingland-1316664.jpg"></div>
  <div data-thumb="https://images.freeimages.com/images/small-previews/819/why-hello-1376445.jpg"><img src="https://images.freeimages.com/images/small-previews/819/why-hello-1376445.jpg"></div>
  <div data-thumb="https://images.freeimages.com/images/small-previews/5ae/grape-vine-leaf-1327453.jpg"><img src="https://images.freeimages.com/images/small-previews/5ae/grape-vine-leaf-1327453.jpg"></div>
  <div data-thumb="https://images.freeimages.com/images/small-previews/a61/vikingland-1316664.jpg"><img src="https://images.freeimages.com/images/small-previews/a61/vikingland-1316664.jpg"></div>
</section>
...