Добавить пользовательские кнопки на Slick Carousel

Ответ 1

Я знаю, что это старый вопрос, но, может быть, я могу помочь кому-то, и это тоже заглохло меня, пока я не прочитал документацию немного больше:

prevArrow string (html | селектор jQuery) | объект (DOM node | jQuery объект) Предыдущий Позволяет выбрать node или настроить HTML для "Предыдущая", стрелка.

nextArrow string (html | селектор jQuery) | объект (DOM node | jQuery объект) Далее Позволяет вы можете выбрать node или настроить HTML для стрелки "Далее".

вот как я сменил свои кнопки.. отлично работал.

  $('.carousel-content').slick({
      prevArrow:"<img class='a-left control-c prev slick-prev' src='../images/shoe_story/arrow-left.png'>",
      nextArrow:"<img class='a-right control-c next slick-next' src='../images/shoe_story/arrow-right.png'>"
  });

Ответ 2

если вы хотите использовать значки из любой библиотеки шрифтов значков, вы можете попробовать это в этой опции во время вызова слайдера в файле js.

prevArrow: '<div class="class-to-style"><span class="fa fa-angle-left"></span><span class="sr-only">Prev</span></div>',

nextArrow: '<div class="class-to-style"><span class="fa fa-angle-right"></span><span class="sr-only">Next</span></div>'

Здесь "fa" происходит из библиотеки шрифтов шрифтов FontAwesome.

Ответ 3

Если вы используете Bootstrap 3, вы можете использовать Glyphicons.

.slick-prev:before, .slick-next:before {
    font-family: "Glyphicons Halflings", "slick", sans-serif;
    font-size: 40px;
}

.slick-prev:before { content: "\e257"; }
.slick-next:before { content: "\e258"; }

Ответ 4

Почему вы не можете использовать классы CSS по умолчанию и добавить свой стиль?

.slick-next {
  /*my style*/
  background: url(my-image.png);
}

и

.slick-prev {
  /*my style*/
  background: url(my-image.png);
}

Вы используете простой фон свойство css?

в примере: http://jsfiddle.net/BNvke/1/

Вы можете использовать Шрифт Awesome. Не забывайте о псевдоэлементах CSS.

И не забудьте jQuery, вы можете заменить элементы, добавить классы и т.д.

Ответ 5

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

$slick-font-family:FontAwesome;
$slick-prev-character: "\f053";
$slick-next-character: "\f054";

Они изменят семейство шрифтов, используемое slick theme css, а также юникод для предыдущей и следующей кнопок. В этом примере будут использоваться значки FontAwesome chevron-left и chevron-right.

Другие переменные sass, которые могут быть сконфигурированы, приведены в странице Slick Github

Ответ 6

Это потому, что они используют значок значка для кнопок. Они используют шрифт "Slick", как вы можете видеть на этом изображении:

В принципе, сделайте букву "A" формой значка, буквой "B" - формой другого и т.д.

Например:

Если вы хотите узнать больше о значках шрифтов нажмите здесь

Если вы хотите изменить значки, вам нужно заменить весь код кнопки, или вы можете перейти на www.fontastic.me и создайте свой собственный значок. После этого замените файл шрифта на текущий, и у вас будет свой собственный значок.

Ответ 7

Из документов

prevArrow/nextArrow

Тип: string (html|jQuery selector) | object (DOM node|jQuery object)

Пример кода примера

$(document).ready(function(){
    $('.slick-carousel-1').slick({
        // @type {string} html
        nextArrow: '<button class="any-class-name-you-want-next">Next</button>',
        prevArrow: '<button class="any-class-name-you-want-previous">Previous</button>'
    });

    $('.slick-carousel-2').slick({
        // @type {string} jQuery Selector
        nextArrow: '.next',
        prevArrow: '.previous'
    });

    $('.slick-carousel-3').slick({
        // @type {object} DOM node
        nextArrow: document.getElementById('slick-next'),
        prevArrow: document.getElementById('slick-previous')
    });

    $('.slick-carousel-4').slick({
        // @type {object} jQuery Object
        nextArrow: $('.example-4 .next'),
        prevArrow: $('.example-4 .previous')
    });
});

Небольшая заметка о стилизации

После того, как Slick узнает о ваших новых кнопках, вы можете прикрепить их к своему сердцу; глядя на приведенный выше пример, вы можете настроить их на основе class name, id name или даже element.

Кто-нибудь сказал JSFiddle?

Ответ 8

Вариант ответа от @tallgirltaadaa, нарисуйте свою собственную кнопку в форме каретки:

var a = $('.MyCarouselContainer').slick({
    prevArrow: '<canvas class="prevArrowCanvas a-left control-c prev slick-prev" width="15" height="50"></canvas>',
    nextArrow: '<canvas class="nextArrowCanvas a-right control-c next slick-next" width="15" height="50"></canvas>'
});

function drawNextPreviousArrows(strokeColor) {
    var c = $(".prevArrowCanvas")[0];
    var ctx = c.getContext("2d");
    ctx.clearRect(0, 0, c.width, c.height);
    ctx.moveTo(15, 0);
    ctx.lineTo(0, 25);
    ctx.lineTo(15, 50);
    ctx.lineWidth = 2;
    ctx.strokeStyle = strokeColor;
    ctx.stroke();
    var c = $(".nextArrowCanvas")[0];
    var ctx = c.getContext("2d");
    ctx.clearRect(0, 0, c.width, c.height);
    ctx.moveTo(0, 0);
    ctx.lineTo(15, 25);
    ctx.lineTo(0, 50);
    ctx.lineWidth = 2;
    ctx.strokeStyle = strokeColor;
    ctx.stroke();
}
drawNextPreviousArrows("#cccccc");

затем добавьте css

.slick-prev, .slick-next 
    height: 50px;s
}

Ответ 9

его очень легко. Используйте приведенный ниже код, его работы для меня. Здесь я использовал значок fontawesome, но вы можете использовать что-либо как изображение или любой другой значок.

$(document).ready(function(){
    $('.slider').slick({
        autoplay:true,
        arrows: true,
        prevArrow:"<button type='button' class='slick-prev pull-left'><i class='fa fa-angle-left' aria-hidden='true'></i></button>",
        nextArrow:"<button type='button' class='slick-next pull-right'><i class='fa fa-angle-right' aria-hidden='true'></i></button>"
    });
});

Ответ 10

Это сработало для меня, когда не было много других вещей:

.slick-prev:before {
  content: url('your-arrow.png');
}
.slick-next:before {
  content: url('your-arrow.png');
}