Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.08.2017, 16:54
Аспирант
Отправить личное сообщение для Sokoljr Посмотреть профиль Найти все сообщения от Sokoljr
 
Регистрация: 27.06.2016
Сообщений: 68

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


Заранее спасибо
Ответить с цитированием
  #2 (permalink)  
Старый 18.08.2017, 17:26
Аватар для Белый шум
Профессор
Отправить личное сообщение для Белый шум Посмотреть профиль Найти все сообщения от Белый шум
 
Регистрация: 19.01.2012
Сообщений: 505

Так в чём конкретно вопрос? Не знаете как поймать событие смены слайда?
http://kenwheeler.github.io/slick/ - смотрите раздел Events
Ответить с цитированием
  #3 (permalink)  
Старый 18.08.2017, 17:32
Аспирант
Отправить личное сообщение для Sokoljr Посмотреть профиль Найти все сообщения от Sokoljr
 
Регистрация: 27.06.2016
Сообщений: 68

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

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

sliderTop.on('init reInit afterChange', function (event, slick, currentSlide) {
        var i = (currentSlide ? currentSlide : 0) + 1;
        nextLinkNumber.text(j);
    });
Ответить с цитированием
  #4 (permalink)  
Старый 18.08.2017, 18:07
Аватар для Белый шум
Профессор
Отправить личное сообщение для Белый шум Посмотреть профиль Найти все сообщения от Белый шум
 
Регистрация: 19.01.2012
Сообщений: 505

Вот по индексу и получайте нужный тайтл. Что-то вроде:
var j = $('#sliderTop .slider').eq(i).data('title');
Ответить с цитированием
  #5 (permalink)  
Старый 20.08.2017, 13:35
Аспирант
Отправить личное сообщение для Sokoljr Посмотреть профиль Найти все сообщения от Sokoljr
 
Регистрация: 27.06.2016
Сообщений: 68

Белый шум,
не получается(
Ответить с цитированием
  #6 (permalink)  
Старый 21.08.2017, 11:44
Аспирант
Отправить личное сообщение для Sokoljr Посмотреть профиль Найти все сообщения от Sokoljr
 
Регистрация: 27.06.2016
Сообщений: 68

Вопрос решил

var nameOfSlide = $('#sliderTop .slider').eq(currentSlide).attr('data-title');
        console.log(nameOfSlide);
        $('.prev-link .name').html(nameOfSlide);
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Задача по Slick Slider Frankie_peddler jQuery 6 15.04.2017 21:50
Доработка Slick Slider Alexbelkevich jQuery 5 12.12.2016 07:49
user adaptive slider s24344 Элементы интерфейса 1 18.02.2016 12:21
Отображение модального окна со slick slider Drm1804 jQuery 3 23.03.2015 17:01
Управление Slick slider при помощи JQ.ui Drm1804 jQuery 3 12.03.2015 14:16