Как я могу изменить точки по тексту на скользком слайдере? - PullRequest
Новая
       39

Как я могу изменить точки по тексту на скользком слайдере?

0 голосов
/ 25 мая 2018

Кодовое поле, которое я нашел: https://codepen.io/norman_pixelkings/pen/NNbqgG

HTML: 

<section class="slider">
   <div data-title="title1" data-thumb="http://cdn.bulbagarden.net/upload/e/ec/001MS.png"><img src="http://cdn.bulbagarden.net/upload/c/c0/Spr_3f_001.png"></div>
   <div data-title="title2" data-thumb="http://cdn.bulbagarden.net/upload/b/bb/004MS.png"><img src="http://cdn.bulbagarden.net/upload/e/e9/Spr_3f_004.png"></div>
   <div data-title="title3" data-thumb="http://cdn.bulbagarden.net/upload/9/92/007MS.png"><img src="http://cdn.bulbagarden.net/upload/f/f8/Spr_3f_007.png"></div>
   <div data-title="title4" data-thumb="http://cdn.bulbagarden.net/upload/0/0f/025MS.png"><img src="http://cdn.bulbagarden.net/upload/5/5b/Spr_3f_025.png"></div>
   <div data-title="title5" data-thumb="http://cdn.bulbagarden.net/upload/d/de/133MS.png"><img src="http://cdn.bulbagarden.net/upload/a/a9/Spr_3f_133.png"></div>
   <div data-title="title6" data-thumb="http://cdn.bulbagarden.net/upload/a/a7/151MS.png"><img src="http://cdn.bulbagarden.net/upload/3/33/Spr_3f_151.png"></div>
</section>

CSS: 

.slider {
 width: auto;
 margin: 30px 50px 50px;
}

.slick-slide {
 background: #cee5ea;
 color: white;
 padding: 20px 0;
 font-size: 30px;
 font-family: "Arial", "Helvetica";
 text-align: center;
}
.slick-slide img {
 display: inline-block;
}

.slick-prev:before,
.slick-next:before {
 color: black;
}

.slick-dots li {
 width: auto;
}

.pager__item {
 padding: 0 12px;
 display: block;
 border: 1px solid red;
}

.slick-dots {
 bottom: -40px;
}

.slick-slide:nth-child(odd) {
 background: #efdfda;
}

JS (jQuery): 

$(".slider").slick({
dots: true,
            arrows: false,
            infinite: false,
            slidesToShow: 2,
            slidesToScroll: 2,
    customPaging : function(slider, i) {
        var title = $(slider.$slides[i]).data('title');
        return '<a class="pager__item"> '+title+' </a>';
    }
});

Как отобразить содержимое заголовка данных в HTML для замены навигации по точкам?

Мне нужно получить содержимое заголовка данных и отобразить его в HTML.

Спасибо:)

1 Ответ

0 голосов
/ 30 декабря 2018

Ваш код отлично работает с версией слайдера 1.8.0.Не работает с версией 1.9.0.

Но если вы хотите сохранить эту версию Slick Slider, вы можете заменить эту строку в своем коде: 

var title = $(slider.$slides[i]).data('title');

на 

var title = $(slider.$slides[i]).find('[data-title]').data('title');

Проверено на вашем коде и работает.

...