Настройка Slick-слайдер

[eremeevd]

Подскажите пожалуйста, как заменить в слайдере Slick стандартные кнопки навигации на свои кнопки с изображением?

Edited July 16, 2016 by eremeevd

[by chris]

В объекте с настройками плагина

prevArrow: '<button type="button"><img src="#"></button>',
nextArrow: '<button type="button"><img src="#"></button>'

Либо задать свой класс для кнопки и заменить картинку через псевдоэлемент.

[eremeevd]

  On 7/16/2016 at 4:58 PM, by chris said:

В объекте с настройками плагина

prevArrow: '<button type="button"><img src="#"></button>',
nextArrow: '<button type="button"><img src="#"></button>'

Либо задать свой класс для кнопки и заменить картинку через псевдоэлемент.

Expand  

Спасибо за отзыв! Но можно ли вообще убрать  стандартную кнопку и заменить ее картинкой вырезанной с макета в фотошопе? Или можно только поставить картинку на стандартную кнопку?

[by chris]

  On 7/16/2016 at 5:27 PM, eremeevd said:

Но можно ли вообще убрать  стандартную кнопку и заменить ее картинкой вырезанной с макета в фотошопе?

Expand  

Можно

[eremeevd]

  On 7/16/2016 at 6:10 PM, by chris said:

Можно

Expand  

Подскажи пожалуйста если не затруднит тебя  каким образом это сделать?

[by chris]

$('.slider').slick({
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 3,
  dots: true,
  prevArrow: '<img src="тут ссылка на левую картинку">',
  nextArrow: '<img src="тут ссылка на правую картинку">'
});

 

[eremeevd]

  On 7/16/2016 at 7:51 PM, by chris said:

$('.slider').slick({
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 3,
  dots: true,
  prevArrow: '<img src="тут ссылка на левую картинку">',
  nextArrow: '<img src="тут ссылка на правую картинку">'
});

 

Expand  

Огромное тебе при огромное спасибо!!!!!!Спасибо что помог!Думаю пора  начать изучать JavaScript.Без него далеко не уедешь...

Edited July 17, 2016 by eremeevd

[by chris]

  On 7/17/2016 at 4:42 AM, eremeevd said:

Думаю пора  начать изучать JavaScript.Без него далеко не уедешь..

Expand  

Для того чтобы подключить и настроить плагин, знать яваскрипт не обязательно. Достаточно зайти на официальную страницу плагина и прочитать документацию по подключению и настройке.

[eremeevd]

  On 7/17/2016 at 9:26 AM, by chris said:

Для того чтобы подключить и настроить плагин, знать яваскрипт не обязательно. Достаточно зайти на официальную страницу плагина и прочитать документацию по подключению и настройке.

Expand  

 

Edited July 17, 2016 by eremeevd

[eremeevd]

  On 7/17/2016 at 3:54 PM, eremeevd said:

 

Expand  

Заменил точки навигации на свои изображения а как удалить стандартные??Не подскажешь где в каком файле хранятся стандартные изображения стрелок, точек??Еще не пойму как сделать так чтобы она была активна.

Edited July 17, 2016 by eremeevd

[andrey7287]

 

  On 7/17/2016 at 4:31 PM, eremeevd said:

Заменил точки навигации на свои изображения а как удалить стандартные??

Expand  

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

Для себя сделал миксин который использую для вставки спрайтов.  Код во всех проектах выглядит так.

$dots-url: '../images/slider-dots.png';
.slick-dots {
  bottom: 10px;
  li button::before,
  li.slick-active button::before {
    opacity: 1;
  }

  li button {
    @include sprite($dots-url, 14, 14, 0, 1);
  }
  li button:hover {
    @include sprite($dots-url, 14, 14, 0, 0);
  }
  li.slick-active button {
    @include sprite($dots-url, 14, 14, 0, 0);
  }
}

 

[eremeevd]

  On 7/18/2016 at 8:30 PM, andrey7287 said:

 

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

Для себя сделал миксин который использую для вставки спрайтов.  Код во всех проектах выглядит так.

$dots-url: '../images/slider-dots.png';
.slick-dots {
  bottom: 10px;
  li button::before,
  li.slick-active button::before {
    opacity: 1;
  }

  li button {
    @include sprite($dots-url, 14, 14, 0, 1);
  }
  li button:hover {
    @include sprite($dots-url, 14, 14, 0, 0);
  }
  li.slick-active button {
    @include sprite($dots-url, 14, 14, 0, 0);
  }
}

 

Expand  

По подробней можно расписать что куда в какой файл добавлять изменения...

  On 7/20/2016 at 10:45 AM, eremeevd said:

По подробней можно расписать что куда в какой файл добавлять изменения...

Expand  

Понять не могу куда добавлять эту строку??   $dots-url: '../images/slider-dots.png';

[by chris]

@andrey7287, спасибо  

[eremeevd]

  On 7/20/2016 at 11:19 AM, by chris said:

@andrey7287, спасибо  

Expand  

Я что то смешное написал??

[klierik]

@eremeevd ознакомься, пожалуйста, с офф. документацией http://kenwheeler.github.io/slick/ вместо того что бы задавать одни и тебе вопросы.

На странице исчерпывающе описано как настраивается плагин. Если ты не знаешь куда вносить изменения — ты уверен что что кто-то на форуме знает? Лето же, телепаты 80lvl в отпуске на югах греются.

Если не знаешь как правильно сформулировать вопрос, пожалуйста, ознакомься с темой по ссылки в подписи.

[John Doe]

Подскажите, можно как то прятать стрелку предыдущего слайда, если слайдер стоит на первом блоке слайдов (slidesToShow: 3), и показывать ее, если пользователь прокрутит хотя бы один слайд вперед? И можно ли с самого левого слайда сделать подчеркивание на элементе, которое при прокрутке будет переходить на следующий элемент? (Вопросы могут показаться глупыми, но я, как и автор поста, с JS не знаком, в документаций ответы не нашел, или возможно не так понял описание функции и пропустил их)

[andrey7287]

Плохо искал, в документации всё есть. На прокрутке срабатывают события  afterChange или beforeChange 

https://github.com/kenwheeler/slick#events

В аргумент currentSlide будет передан номер слайда, соответственно если он не первый показываем кнопку

 currentSlide ?  $('[селектор]').show() : $('[селектор]').hide() 

Про подчеркивание не уверен что понял. так ? Это те же точки, только стилизованные. Анимированые  через псевдоэлементы делаются, это css.  

[John Doe]

  On 4/8/2017 at 10:57 AM, andrey7287 said:

Плохо искал, в документации всё есть. На прокрутке срабатывают события  afterChange или beforeChange 

https://github.com/kenwheeler/slick#events

В аргумент currentSlide будет передан номер слайда, соответственно если он не первый показываем кнопку

 currentSlide ?  $('[селектор]').show() : $('[селектор]').hide() 

Про подчеркивание не уверен что понял. так ? Это те же точки, только стилизованные. Анимированые  через псевдоэлементы делаются, это css.  

Expand  

Да, такой подход к подчеркиванию, только немного в другой форме. Не дошло как-то что это точки стилизованные. Спасибо большое Вам за ответ. Буду пытаться реализовать.

[PolivanovNikolay]

Понимаю что опоздал с ответом, но для тех кто с поисковиков, есть видео на ютубе 

 

[tiamat]

Здравствуйте,слайдер установил настроил под себя все ОК, но при уменьшении масштаба браузера картинка уходит в левую сторону,как можно решить эту проблемку?