Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Slick slider навигация (https://javascript.ru/forum/jquery/70197-slick-slider-navigaciya.html)

Sokoljr 18.08.2017 16:54

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);


Заранее спасибо

Белый шум 18.08.2017 17:26

Так в чём конкретно вопрос? Не знаете как поймать событие смены слайда?
http://kenwheeler.github.io/slick/ - смотрите раздел Events

Sokoljr 18.08.2017 17:32

Белый шум,
не пойму какой цикл использовать

по событию slick только индекс получилось вытянуть

sliderTop.on('init reInit afterChange', function (event, slick, currentSlide) {
        var i = (currentSlide ? currentSlide : 0) + 1;
        nextLinkNumber.text(j);
    });

Белый шум 18.08.2017 18:07

Вот по индексу и получайте нужный тайтл. Что-то вроде:
var j = $('#sliderTop .slider').eq(i).data('title');

Sokoljr 20.08.2017 13:35

Белый шум,
не получается(

Sokoljr 21.08.2017 11:44

Вопрос решил

var nameOfSlide = $('#sliderTop .slider').eq(currentSlide).attr('data-title');
        console.log(nameOfSlide);
        $('.prev-link .name').html(nameOfSlide);


Часовой пояс GMT +3, время: 11:01.