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, время: 23:51. |