Intereting Posts
Показывать местозаполнитель вместо значения по умолчанию в формате html Google Maps 3 Maps Geocoder, Получить координаты слоя маркера при нажатии или перетаскивании маркера Убедитесь, что тот же пользователь посетил веб-сайт!?! Как? Как вы загружаете 2 файла javascript, которые могут иметь общие переменные между ними и доступ к ним на HTML-странице? Странное поведение с крахом и коллапсом символы, не разрешенные в идентификаторах DOM по спецификации, и браузером Как сделать 3 элемента перекрывать друг друга с помощью CSS Ресурс интерпретируется как скрипт, но передается с типом MIME text / plain – для локального файла Центрировать SVG внутри DIV AJAX – когда пользователь покидает страницу – хорошая или плохая практика / реализация? событие jquery после функции html () Удалить тег DIV с помощью Javascript или JQuery Почему моя анимация «переигрывается», когда элемент добавляется через innerHTML? Повторное использование объекта jQuery из iframe? Почему данный код вызывает исключение (Jsoup)

Измените кнопки со стрелками в слайдере Slick

Я хочу изменить стрелки на моем слайдере, но это не изменится. Я хочу следующую и предыдущую кнопку в качестве изображения. Я попытался положить его в но он все еще не работает. Где я могу изменить настройку стрелок?

slick theme css @charset “UTF-8”;

 // Default Variables $slick-font-path: "./fonts/" !default; $slick-font-family: "slick" !default; $slick-loader-path: "./" !default; $slick-arrow-color: white !default; $slick-dot-color: black !default; $slick-dot-color-active: $slick-dot-color !default; $slick-prev-character: "←" !default; $slick-next-character: "→" !default; $slick-dot-character: "•" !default; $slick-dot-size: 6px !default; $slick-opacity-default: 0.75 !default; $slick-opacity-on-hover: 1 !default; $slick-opacity-not-active: 0.25 !default; @function slick-image-url($url) { @if function-exists(image-url) { @return image-url($url); } @else { @return url($slick-loader-path + $url); } } @function slick-font-url($url) { @if function-exists(font-url) { @return font-url($url); } @else { @return url($slick-font-path + $url); } } /* Slider */ .slick-list { .slick-loading & { background: #fff slick-image-url("ajax-loader.gif") center center no-repeat; } position: absolute; margin: 0 auto; } /* Icons */ @if $slick-font-family == "slick" { @font-face { font-family: "slick"; src: slick-font-url("slick.eot"); src: slick-font-url("slick.eot?#iefix") format("embedded-opentype"), slick-font-url("slick.woff") format("woff"), slick-font-url("slick.ttf") format("truetype"), slick-font-url("slick.svg#slick") format("svg"); font-weight: normal; font-style: normal; } } /* Arrows */ .slick-prev, .slick-next { position: absolute; display: block; height: 20px; width: 30px; line-height: 0px; font-size: 0px; cursor: pointer; background: transparent; color: transparent; top: 50%; margin-top: -10px; padding: 0; border: none; outline: none; &:hover, &:focus { outline: none; background: transparent; color: transparent; &:before { opacity: $slick-opacity-on-hover; } } &.slick-disabled:before { opacity: $slick-opacity-not-active; } } .slick-prev:before, .slick-next:before { font-family: $slick-font-family; font-size: 20px; line-height: 1; color: $slick-arrow-color; opacity: $slick-opacity-default; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick-prev { left: -25px; [dir="rtl"] & { left: auto; right: -25px; } &:before { content: $slick-prev-character; [dir="rtl"] & { content: $slick-next-character; } } } .slick-next { right: -25px; [dir="rtl"] & { left: -25px; right: auto; } &:before { content: $slick-next-character; [dir="rtl"] & { content: $slick-prev-character; } } } /* Dots */ .slick-slider { margin-bottom: 30px; } .slick-dots { position: absolute; bottom: -45px; list-style: none; display: block; text-align: center; padding: 0; width: 100%; li { position: relative; display: inline-block; height: 20px; width: 20px; margin: 0 5px; padding: 0; cursor: pointer; button { border: 0; background: transparent; display: block; height: 20px; width: 20px; outline: none; line-height: 0px; font-size: 0px; color: transparent; padding: 5px; cursor: pointer; &:hover, &:focus { outline: none; &:before { opacity: $slick-opacity-on-hover; } } &:before { position: absolute; top: 0; left: 0; content: $slick-dot-character; width: 20px; height: 20px; font-family: $slick-font-family; font-size: $slick-dot-size; line-height: 20px; text-align: center; color: $slick-dot-color; opacity: $slick-opacity-not-active; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } } &.slick-active button:before { color: $slick-dot-color-active; opacity: $slick-opacity-default; } } } 

slick css

 /* Slider */ .slick-slider { position: relative; margin: 0 auto; display: block; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; overflow: hidden; display: block; margin: 0 auto; padding: 0; &:focus { outline: none; } &.dragging { cursor: pointer; cursor: hand; } } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; left: 0; top: 0; display: block; &:before, &:after { content: ""; display: table; } &:after { clear: both; } .slick-loading & { visibility: hidden; } } .slick-slide { float: left; min-height: 1px; [dir="rtl"] & { float: right; } img { display: block; } &.slick-loading img { display: none; } display: none; &.dragging img { pointer-events: none; } .slick-initialized & { display: block; } .slick-loading & { visibility: hidden; } .slick-vertical & { display: block; height: auto; border: 1px solid transparent; } } 

предварительный просмотр сайта

Slick имеет очень простой способ настроить свои кнопки через две переменные в своей собственной конфигурации: prevArrow и nextArrow .

Оба типа: string (html | селектор jQuery) | объект (объект DOM | объект jQuery), поэтому в настройках slick slider вы можете установить classы:

 prevArrow: $('.prev') nextArrow: $('.next') 

и добавьте к этим элементам стили, которые вы хотите.

Например:

 //HTML 
VER MAS LANZAMIENTOS
//JS $(document).ready(function () { $('.slick-slider').slick({ centerMode: true, centerPadding: '60px', slidesToShow: 3, prevArrow: $('.prev'), nextArrow: $('.next'), }); //CSS .paginator{ position: relative; float: right; margin-bottom: 20px; li{ margin-top: 20px; position: relative; float: left; margin-right: 20px; &.prev{ display: block; height: 20px; width: 20px; background: url('../img/back.png') no-repeat; } &.next{ display: block; height: 20px; width: 20px; background: url('../img/next.png') no-repeat; } } }

Вы можете легко создать свой собственный стиль стрелки с помощью .slick-next:before и .slick-prev:after псевдоclassов.

Вот пример:

 .slick-prev:after { content: ">"; color: red; font-size: 30px; } .slick-next:before { content: "< "; color: red; font-size: 30px; } 

Это сработало для меня:

http://codepen.io/anon/pen/qNbWwK

Скрыть кнопки по умолчанию в CSS и использовать:

  

left

right

/* In the JS file */ $('.slider').slick({ arrows: false }) $('.left').click(function(){ $('.slider').slick('slickPrev'); }) $('.right').click(function(){ $('.slider').slick('slickNext'); })

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

  $(document).ready(function(){ $('.slider').slick({ autoplay:true, arrows: true, prevArrow:"", nextArrow:"" }); }); 

Если вы используете sass, вы можете просто установить ниже упомянутых переменных,

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

Они изменят семейство шрифтов, используемое slice-темой css, а также юникод для предыдущей и следующей кнопок.

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

Вы можете использовать FontAwesome “content” значения и применять, как следует css. Они применяют значки «шеврон справа / слева».

 .custom-slick .slick-prev:before { content: ""; font-family: 'FontAwesome'; font-size: 22px; } .custom-slick .slick-next:before { content: ""; font-family: 'FontAwesome'; font-size: 22px; } 

Свойство содержимого псевдоэлемента: до принятия изображений тоже. В slick-theme.css изменить:

 // change $slick-prev-character: "←" !default; // to $slick-prev-character: url('image-prev.png'); // and $slick-next-character: "→" !default; // to $slick-next-character: url('image-next.jpg'); 
   $('.your_class').slick({ infinite: true, speed: 300, slidesToShow: 5, slidesToScroll: 5, arrows: true, prevArrow: $('.prev'), nextArrow: $('.next') }); 

В файле script.js вы можете добавить что-то вроде этого.

 jQuery(document).ready(function(){ $('.slick-prev').html('something'); $('.slick-next').html('something') }); - jQuery(document).ready(function(){ $('.slick-prev').html('something'); $('.slick-next').html('something') }); - jQuery(document).ready(function(){ $('.slick-prev').html('something'); $('.slick-next').html('something') });