Slick current что это

SPavelV / slick currnet

Clone via HTTPS Clone with Git or checkout with SVN using the repository’s web address.

Learn more about clone URLs

Добавляем класс slick-current в навигации слайдера на активное изображение

This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Slick current что это

Создал слайдер (блок slider ) с поддержкой входных параметров ( this.params ) и слайд-шоу. При установке двух и более экземпляров на страницу, происходит (по-видимому) смешивание их параметров, или их переопределение. Перелистывание слайдов всегда производится с учетом ширины ( width ) и скорости перелистывания ( duration ) последнего экземпляра. То же касается величины задержки ( delay ) при слайд-шоу.

Помогите, пожалуйста, разобраться, в чем таится ошибка.

Ссылки:

• Страница примера
• Страница папки проекта в репозитории

Комментарии: 10
8 years ago

Проблема была в том, что параметры создавались у прототипа, а не у инстанса.

Отправил pull request с подробными комментариями. Там три коммита: в первом обновил зависимости (это никак не связано с сутью вопроса, но не зря же мы их обновляем ;)), во втором все смысловые изменения и в третьем результат пересборки.

Предлагаю дальше подумать нам тремя направлениями для улучшения:

1. Генерировать меню с переключателями на уровне шаблонов заранее на сервере. Это будет работать быстрее и позволит не тянуть на клиент шаблоны и лишнюю JS-логику.
2. Отказаться от использования атрибутов order и необходимости заранее запоминать количество слайдов, в пользу использования модификатора current на текущем активном слайде. Тогда всегда можно будет получить его индекс в общей jQuery-коллекции слайдов.
3. Добавить JS API для удобного переключения слайдов и события при переключении, чтобы можно было синхронизировать внешние блоки с переключением слайдера.

8 years ago

Большое спасибо за PR с подробным разбором ошибок и недочетов.

Касательно п.1: генерация меню с помощью BEMHTML показалась вначале несложной задачей, однако я сел в лужу. Подробнее:

1. От использования list в BEMJSON отказался, решил перенести его создание в BEMHTML.
2. Пробую применять elemMatch() в шаблоне для корневого slider , чтобы подписаться на элементы item . Безуспешно.
3. Пробую просто обернуть каждый item в кастомный wrapper , чтобы опробовать applyCtx() , который наверняка понадобится на следующих шагах. Неудача.

Может, следует работать с модой default у блока slider ?

Не понимаю, как реализовать задуманное. Подскажите, пожалуйста, в какую сторону копать.

8 years ago

Если я правильно понял, то теперь в BEMJSON ожидается такая структура:

< block: 'slider', js: < width: 760, paint: true, duration: 500, slideshow: true, delay: 2500 >, content: [ < elem: 'item' >, < elem: 'item' >, < elem: 'item' >] > 

А на выходе хочется

Если так, то шаблоны будут выглядеть примерно так:

block('select')( js()(true), content()(function() < var items = applyNext(); // получаем значение текущей моды без учета текущего шаблона, в данном случае это равнозначно `this.ctx.content`, т.е. массив из `item` return [ < elem: 'list', content: items.map(function(item) < return < elem: 'item' >; >) >, < elem: 'menu', content: items.map(function() < return < elem: 'toggle' >; >) > ]; >), elem('list').tag()('ul'), elem('item').tag()('li'), elem('menu').tag()('nav') ); 

По поводу неудачных экспериментов с шаблонами предлагаю каждый отдельный момент, который вызывает вопросы, скидывать в виде ссылок на песочницу http://bem.github.io/bem-xjst/ (значения полей сохраняются в урле) с описанием, что хотелось получить в результате, тогда будет понятно, что именно не получается и можно будет внятно ответить.

А console.log() таки должен выводить сообщения в git bash в момент пересборки шаблонов ( enb make / рефреш страницы при запущенном enb server ).

8 years ago

Все верно, большое спасибо.

• Перенес создание меню и списка в BEMHTML
• Избавился полностью от атрибута order , убрал прочую лишнюю логику
• Теперь думаю насчет открытого JS API блока

Об использовании мной setTimeout() заместо setInterval() : вариант с вызовом setTimeout() позволяет убрать первоначальную (длинную) задержку до первого перелистывания при слайдшоу, которая возникает при setInterval() и отводится на генерацию события клика на первом переключателе, за что и был выбран (костыль правда). (С логированием действительно все в порядке)

8 years ago

А точно ли нужно эту задержку убирать? Пользователь-то должен успеть рассмотреть и первый слайд тоже 😉

В плане примера организации API можно посмотреть на порт карусели из Bootstrap на bem-core : https://github.com/tadatuta/bl-carousel/

8 years ago

Решил создать внешний блок remote , который при клике обращается к слайдеру.

// remote.js modules.define( 'remote', ['i-bem__dom', 'events', 'jquery', 'slider'], function(provide, BEMDOM, events, $) < provide(BEMDOM.decl(this.name, < onSetMod: < 'js': < 'inited': function() < this.bindTo('click', this._onClick); >> >, _onClick: function() < console.log(this.findBlockOutside(< block: 'slider' >)); // возвращает null // пробовал также писать как this.findBlockOutside('slider') this.findBlockOutside(< block: 'slider' >).setMod('active', true); // модификатор для примера // возвращает ошибку при обращении к методу null (ожидаемо) this.emit('slide', < current: 4 >); // данные - рыба > >)) > ) 

В слайдере, в свою очередь, следующие изменения:

// slider.js . 'js': < 'inited': function() < . this.on('slide', this._onSlide) . >>, _onSlide: function(e, data)

В консоли отладчика — null для вызова slider через findBlockOutside() , хотя структура BEMJSON следующая:

< block: 'content', content: [ < block: 'slider', js: < width: 760, paint: true, duration: 0, slideshow: false, delay: 1000 >, content: [ <>, <>, <>, <>, <> ].map(function() < return < elem: 'item'>; >) >, < block: 'remote' >] > 

8 years ago

findBlockOutside() поднимается строго вверх по дереву и не затрагивает сиблингов. Т.е. в данном случае чтобы «добраться» из remote до slider , нужно this.findBlockOutside(‘content’).findBlockInside(‘slider’) , но в целом практика обращения из блока наружу через DOM не очень хорошая, т.к. вызывает связанность блоков (например, та самая ошибка при попытке выставить модификатор, если слайдера рядом не оказалось).

Подробнее про принципы взаимодействия блоков в JS см. https://ru.bem.info/forum/163/

8 years ago

Пробую к remote примешать блок slider .

// slider.js // в конструкторе this.findBlockOn('remote').on('click', this._onRemoteClick, this); // возвращает null 

// remote.js modules.define( 'remote', ['i-bem__dom', 'events', 'jquery'], function(provide, BEMDOM, events, $) < provide(BEMDOM.decl(this.name, < onSetMod: < 'js': < 'inited': function() < this.bindTo('click', this._onClick); >> >, _onClick: function() < this.emit('click'); >>)) > ) 

Связь через this.findBlockOn() идет только в том случае, если структура BEMJSON такова:

Судя по всему, это и есть способ расположения одного js-блока на несколько DOM-узлов. Вопрос: это нормально, так и должно быть? (Почему remote не ожидается как блок-микс со специальной декларацией? Ссылка ) Хорошая ли это практика для связи внешних (удаленных) переключателей?

8 years ago

Дополнительно: как в таком случае быть с методом updateWidth() , который теперь применяет новые стили как для «корневого» slider , так и для его «переключателя» (там это явно лишнее)? Пока только сильно привязанный к контексту хак: this.domElem.eq(0).css(‘width’, width);

8 years ago

Да, один блок на нескольких DOM-узлах требует совпадающего id в js-параметрах. Это необходимо, т.к. на странице может быть несколько разных слайдеров, каждый со своим собственным remote , нужно как-то отличать, какой чей. Подробнее про эту связь см. https://ru.bem.info/technology/i-bem/v2/i-bem-js-html-binding/#Один-js-блок-на-нескольких-html-элементах

Блоки-миксы — это другая история. Они исключительно о том, чтобы добавить их функциональность другим блокам. Например, есть некоторый метод doSomething() , который необходим блоку b1 и блоку b2 , при этом b1 и b2 совершенно разные. Чтобы не копипастить логику про doSomething() , ее можно вынести в отдельный блок-микс и примиксовать к каждому. На этом смысл их существования исчерпывается.

Дополнительно: как в таком случае быть с методом updateWidth(), который теперь применяет новые стили как для «корневого» slider, так и для его «переключателя» (там это явно лишнее)?

В данном случае можно просто задавать ширину для slider__list . В общем случае, при использовании подхода с разнесением блока на несколько DOM-узлов, можно добавлять некоторый специальный элемент ( inner , main , etc).

Ну и остаются еще варианты: организовать взаимодействие через общего родителя, который подпишется на события от remote и вызовет метод на slider , либо применить глобальный канал событий / модель, храняющую общий стейт и т.п.

Slick Slider — установка, настройка примеры и документация

Один из популярнейших слайдеров на Jquery является Slick Slider . И это не мудрено, так как данный плагин умеет очень много. В большинстве случаев вы будите использовать общепринятые модели слайдера, но давайте взглянем на, что способен данный плагин. А способен о на многое. Для начала подключаем файлы стилей к нашему проекту, я буду в примере использовать файлы из CDN вы можете скачать дистрибудив слайдера Slick с офф. сайта или с Github https://github.com/kenwheeler/slick/

Подключаем файлы стилей.

Подключаем сам плагин.

Данный код должен быть в самом конце, перед закрывающим тегом

Список возможностей использования Slick Slider

• Одиночный слайд
• Несколько слайдов
• Адаптивный слайдер
• Различная ширина слайдов
• Различная высота слайдов
• Настройка с Data атрибутом
• Режим центрирования слайда
• Ленивая загрузка
• Автоматическая прокрутка
• Смена слайдов размытием Fade
• Добавление и удаление слайдов
• Фильтрация слайдов
• Уничтожить объект
• Синхронизация слайдеров
• Справа налево
• Насторйки
• События
• Методы

Одиночный слайд

1

2

3

4

5

6

 //Иницилизируем слайдер с параметрами по умолчанию $('.single-item').slick(); 

Несколько слайдов

1

2

3

4

5

6

7

8

9

 //Указываем что будем выводить по 3 слайда на экран $('.multiple-items').slick(< infinite: true, slidesToShow: 3, slidesToScroll: 3 >); 

Адаптивный слайдер

1

2

3

4

5

6

7

8

 //Настройки по выводу слайдов в зависимости от разрешения экрана $('.responsive').slick( < dots: true, infinite: false, speed: 300, slidesToShow: 4, slidesToScroll: 4, responsive: [ < breakpoint: 1024, settings: < slidesToShow: 3, slidesToScroll: 3, infinite: true, dots: true >>, < breakpoint: 600, settings: < slidesToShow: 2, slidesToScroll: 2 >>, < breakpoint: 480, settings: < slidesToShow: 1, slidesToScroll: 1 >> ] >); 

Различная ширина слайдов

 $('.variable-width').slick(< dots: true, infinite: true, speed: 300, slidesToShow: 1, centerMode: true, variableWidth: true >); 

Различная высота слайдов

1

2

3

4

 $('.one-time').slick(< dots: true, infinite: true, speed: 300, slidesToShow: 1, adaptiveHeight: true >); 

Настройка с Data атрибутом

Внимание:

Начиная с Slick 1.5 вы можете добавлять настройки, используя атрибут data-slick . Вам все еще нужно вызвать $(element).slick() , чтобы инициализировать Slick на элементе.

1

2

3

4

5

6

7

8

 
 
1
 
2
 
3
 
4
 
5
 
6
 
  

Режим центрирования слайда

1

2

3

4

5

6

7

8

 $('.center').slick( < centerMode: true, centerPadding: '60px', slidesToShow: 3, responsive: [ < breakpoint: 768, settings: < arrows: false, centerMode: true, centerPadding: '40px', slidesToShow: 3 >>, < breakpoint: 480, settings: < arrows: false, centerMode: true, centerPadding: '40px', slidesToShow: 1 >> ] >); 

Ленивая загрузка

 // Используйте леневую загрузку устаноиви ее в data-lazy атрибудет // В нем укажите источник к файлу в место SRC $('.lazy').slick(< lazyLoad: 'ondemand', slidesToShow: 3, slidesToScroll: 1 >); 

Автоматическая прокрутка

1

2

3

4

5

6

7

8

 $('.autoplay').slick(< slidesToShow: 3, slidesToScroll: 1, autoplay: true, autoplaySpeed: 2000, >); 

Смена слайдов размытием Fade

 $('.fade').slick(< dots: true, infinite: true, speed: 500, fade: true, cssEase: 'linear' >); 

Добавление и удаление слайдов

1

 $('.add-remove').slick(< dots: true, slidesToShow: 3, speed: 500, slidesToScroll: 3 >); var slideIndex = 1; $('.js-add-slide').on('click', function() < slideIndex++; $('.add-remove').slick('slickAdd','
' + slideIndex + '
'); >); $('.js-remove-slide').on('click', function() < $('.add-remove').slick('slickRemove',slideIndex - 1); if (slideIndex !== 0)< slideIndex--; >>); 

Фильтрация слайдов

1

2

3

4

5

6

7

8

9

10

11

12

 $('.filtering').slick(< slidesToShow: 4, slidesToScroll: 4 >); var filtered = false; $('.js-filter').on('click', function() < if (filtered === false) < $('.filtering').slick('slickFilter',':even'); $(this).text('Unfilter Slides'); filtered = true; >else < $('.filtering').slick('slickUnfilter'); $(this).text('Filter Slides'); filtered = false; >>); 

Уничтожить объект

Если ты действительно хочешь быть тем парнем .

 //Уничтожить объект слайдера $('.your-slider').slick('unslick'); 

Синхронизация слайдеров

1

2

3

4

5

1

2

3

4

5

 $('.slider-for').slick(< slidesToShow: 1, slidesToScroll: 1, arrows: false, fade: true, asNavFor: '.slider-nav' >); $('.slider-nav').slick(< slidesToShow: 3, slidesToScroll: 1, asNavFor: '.slider-for', dots: true, centerMode: true, focusOnSelect: true >); 

Справа налево

1

2

3

4

5

 $('.single-item-rtl').slick(< rtl: true >); 

Установка и настройка Slick Slider

Итак, по существу. Чтобы установить слик слайдер нужно:

2. Подключить js и css скрипты:

/* CSS */ /* Локально */ /* . или из репозитория */ /* Add the new slick-theme.css if you want the default styling */ /* JS */ /* Обязательно JQuery 1.7+ */   /* slick.js добавляем после jQuery */ /* Локально */  /* . или из репозитория */ 

3. Создать контейнер и структуру для слайдера:

 
slide 1
 
slide 2
 
slide N
 

4. Инициализировать слайдер, создав код настроек в футере для запуска слайдера:

jQuery(function($) < $(document).ready(function()< $('.slick-class').slick(< setting-name: setting-value >); >); >); 

После этого можно играться с настройками и вместо setting-name: setting-value вставлять следующие вариации:

• accessibility true|false — Enables tabbing and arrow key navigation.
• adaptiveHeight true|false — Enables adaptive height for single slide horizontal carousels.
• autoplay true|false — Enables Autoplay.
• autoplaySpeed int(ms) [3000] — Autoplay Speed in milliseconds.
• arrows true|false — Prev/Next Arrows.
• asNavFor string [null] — Set the slider to be the navigation of other slider (Class or ID Name).
• appendArrows string [$(element)] — Change where the navigation arrows are attached (Selector, htmlString, Array, Element, jQuery object).
• appendDots string [$(element)] — Change where the navigation dots are attached (Selector, htmlString, Array, Element, jQuery object).
• prevArrow string (html|jQuery selector) | object (DOM node|jQuery object) [
• nextArrow string (html|jQuery selector) | object (DOM node|jQuery object) [
• centerMode true|false — Enables centered view with partial prev/next slides. Use with odd numbered slidesToShow counts.
• centerPadding string [’50px’] — Side padding when in center mode (px or %)
• cssEase string [‘ease’] — CSS3 Animation Easing
• customPaging function [n/a] — Custom paging templates. See source for use example.
• dots true|false — Show dot indicators
• dotsClass string [‘slick-dots’] — Class for slide indicator dots container
• draggable true|false — Enable mouse dragging
• fade true|false — Enable fade
• focusOnSelect true|false — Enable focus on selected element (click)
• easing string [‘linear’] — Add easing for jQuery animate. Use with easing libraries or default easing methods
• edgeFriction integer [0.15] — Resistance when swiping edges of non-infinite carousels
• infinite true|false — Infinite loop sliding
• initialSlide integer [0] — Slide to start on
• lazyLoad string [‘ondemand’] — Set lazy loading technique. Accepts ‘ondemand’ or ‘progressive’
• mobileFirst true|false — Responsive settings use mobile first calculation
• pauseOnFocus true|false — Pause Autoplay On Focus
• pauseOnHover true|false — Pause Autoplay On Hover
• pauseOnDotsHover true|false — Pause Autoplay when a dot is hovered
• respondTo string [‘window’] — Width that responsive object responds to. Can be ‘window’, ‘slider’ or ‘min’ (the smaller of the two)
• responsive object [none] — Object containing breakpoints and settings objects (see demo). Enables settings sets at given screen width. Set settings to «unslick» instead of an object to disable slick at a given breakpoint.
• rows int [1] — Setting this to more than 1 initializes grid mode. Use slidesPerRow to set how many slides should be in each row.
• slide element [»] — Element query to use as slide
• slidesPerRow int [1] — With grid mode intialized via the rows option, this sets how many slides are in each grid row. dver
• slidesToShow int [1] — # of slides to show
• slidesToScroll int [1] — # of slides to scroll
• speed int(ms) [300] — Slide/Fade animation speed
• swipe true|false — Enable swiping
• swipeToSlide true|false — Allow users to drag or swipe directly to a slide irrespective of slidesToScroll
• touchMove true|false — Enable slide motion with touch
• touchThreshold int [5] — To advance slides, the user must swipe a length of (1/touchThreshold) * the width of the slider
• useCSS true|false — Enable/Disable CSS Transitions
• useTransform true|false — Enable/Disable CSS Transforms
• variableWidth true|false — Variable width slides
• vertical true|false — Vertical slide mode
• verticalSwiping true|false — Vertical swipe mode
• rtl true|false — Change the slider’s direction to become right-to-left
• waitForAnimate true|false — Ignores requests to advance the slide while animating.
• zIndex number [1000] — Set the zIndex values for slides, useful for IE9 and lower

// On swipe event $('.your-element').on('swipe', function(event, slick, direction)< console.log(direction); // left >); // On edge hit $('.your-element').on('edge', function(event, slick, direction)< console.log('edge was hit') >); // On before slide change $('.your-element').on('beforeChange', function(event, slick, currentSlide, nextSlide)< console.log(nextSlide); >);

// Add a slide $('.your-element').slick('slickAdd'," "); // Get the current slide var currentSlide = $('.your-element').slick('slickCurrentSlide'); // Manually refresh positioning of slick $('.your-element').slick('setPosition'); 

 lazyLoad: 'ondemand', slidesToShow: 4, slidesToScroll: 1, dots: false, arrows: true, infinite: true, speed: 500, responsive: [ < breakpoint: 768, settings: < slidesToShow: 2 >> ] slidesToShow: 1, slidesToScroll: 1, dots: false, arrows: true, infinite: true, speed: 500, responsive: [ < breakpoint: 1024, settings: < arrows: true, slidesToShow: 2 >>, < breakpoint: 768, settings: < arrows: false, slidesToShow: 1 >> ] $('.banner-slick').slick(< lazyLoad: 'ondemand', slidesToShow: 1, slidesToScroll: 1, dots: false, arrows: true, infinite: true, useTransform: true, speed: 500