Slick slider навигация
Добрый день
есть slick slider на wordpress он крутит 3 слайда, я получаю в data-title атрибут название слайда хочу название слайда передавать в навигацию, то есть текущее название слайда выводится на Prev arrow, а след название слайда выводится в Next arrow вот код примерный с элементами php
<div id="sliderTop">
<?php
$args = array(
'post_type' => 'development',
'order' => 'ASC',
'posts_per_page' => '3',
'orderby' => 'date'
);
$old_query_top = $wp_query;
$wp_query = new WP_Query( $args );
while ( have_posts() ) : the_post(); ?>
<div id="slider_<?php echo get_the_ID(); ?>" data-title="<?php the_title(); ?>" class="slider">
<div class="xs-col-1-1 s-col-2-8 l-col-5-24">
<div class="description">
<p>Development, Branding, Product, Marketing</p>
<a class="read-more" href="<?php the_permalink(); ?>"><span>Show details</span></a>
</div>
</div>
<div class="xs-col-1-1 s-col-5-8 l-col-15-24">
<a href="<?php the_permalink(); ?>">
<div class="image">
<?php the_post_thumbnail('full') ?>
</div>
</a>
</div>
</div>
<?php
endwhile;
$wp_query = $old_query_top;
?>
</div>
<div class="prev-link">
<span class="number"></span>
<span class="line"></span>
<span class="name"></span>
</div>
<div class="next-link">
<span class="number"></span>
<span class="line"></span>
<span class="name"></span>
</div>
вот jQuery
sliderTop.slick({
slidesToShow: 1,
slidesToScroll: 1,
infinite: true,
speed: 500,
fade: true,
accessibility: false,
draggable: false,
cssEase: 'linear',
nextArrow: nextlink,
prevArrow: prevLink
});
var currentNameSlide = $('#sliderTop .slider').attr('data-title');
$('.prev-link .name').html(currentNameSlide);
Заранее спасибо |
Так в чём конкретно вопрос? Не знаете как поймать событие смены слайда?
http://kenwheeler.github.io/slick/ - смотрите раздел Events |
Белый шум,
не пойму какой цикл использовать по событию slick только индекс получилось вытянуть
sliderTop.on('init reInit afterChange', function (event, slick, currentSlide) {
var i = (currentSlide ? currentSlide : 0) + 1;
nextLinkNumber.text(j);
});
|
Вот по индексу и получайте нужный тайтл. Что-то вроде:
var j = $('#sliderTop .slider').eq(i).data('title');
|
Белый шум,
не получается( |
Вопрос решил
var nameOfSlide = $('#sliderTop .slider').eq(currentSlide).attr('data-title');
console.log(nameOfSlide);
$('.prev-link .name').html(nameOfSlide);
|
| Часовой пояс GMT +3, время: 19:12. |