Настройка 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]

Только что, by chris сказал:

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

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

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

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

[by chris]

42 минуты назад, eremeevd сказал:

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

Можно

[eremeevd]

Только что, by chris сказал:

Можно

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

[by chris]

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

 

[eremeevd]

8 часов назад, by chris сказал:

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

 

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

Edited July 17, 2016 by eremeevd

[by chris]

4 часа назад, eremeevd сказал:

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

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

[eremeevd]

5 часов назад, by chris сказал:

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

 

Edited July 17, 2016 by eremeevd

[eremeevd]

1 час назад, eremeevd сказал:

 

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

Edited July 17, 2016 by eremeevd

[andrey7287]

 

В 17.07.2016 в 19:31, eremeevd сказал:

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

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

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

$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]

В 19.07.2016 в 02:30, andrey7287 сказал:

 

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

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

$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 сказал:

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

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

[by chris]

@andrey7287, спасибо  

[eremeevd]

Только что, by chris сказал:

@andrey7287, спасибо  

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

[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]

23 часа назад, andrey7287 сказал:

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

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

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

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

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

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

[PolivanovNikolay]

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

 

[tiamat]

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