Как slick место надписи поменять стрелки

Введение в браузерные события

Событие – это сигнал от браузера о том, что что-то произошло. Все DOM-узлы подают такие сигналы (хотя события бывают и не только в DOM).

Вот список самых часто используемых DOM-событий, пока просто для ознакомления:

События мыши:

• click – происходит, когда кликнули на элемент левой кнопкой мыши (на устройствах с сенсорными экранами оно происходит при касании).
• contextmenu – происходит, когда кликнули на элемент правой кнопкой мыши.
• mouseover / mouseout – когда мышь наводится на / покидает элемент.
• mousedown / mouseup – когда нажали / отжали кнопку мыши на элементе.
• mousemove – при движении мыши.

События на элементах управления:

• submit – пользователь отправил форму .
• focus – пользователь фокусируется на элементе, например нажимает на .

Клавиатурные события:

• keydown и keyup – когда пользователь нажимает / отпускает клавишу.

События документа:

• DOMContentLoaded – когда HTML загружен и обработан, DOM документа полностью построен и доступен.

CSS events:

• transitionend – когда CSS-анимация завершена.

Существует множество других событий. Мы подробно разберём их в последующих главах.

Обработчики событий

Событию можно назначить обработчик, то есть функцию, которая сработает, как только событие произошло.

Именно благодаря обработчикам JavaScript-код может реагировать на действия пользователя.

Есть несколько способов назначить событию обработчик. Сейчас мы их рассмотрим, начиная с самого простого.

Использование атрибута HTML

Обработчик может быть назначен прямо в разметке, в атрибуте, который называется on .

Например, чтобы назначить обработчик события click на элементе input , можно использовать атрибут onclick , вот так:

При клике мышкой на кнопке выполнится код, указанный в атрибуте onclick .

Обратите внимание, для содержимого атрибута onclick используются одинарные кавычки, так как сам атрибут находится в двойных. Если мы забудем об этом и поставим двойные кавычки внутри атрибута, вот так: onclick=»alert(«Click!»)» , код не будет работать.

Атрибут HTML-тега – не самое удобное место для написания большого количества кода, поэтому лучше создать отдельную JavaScript-функцию и вызвать её там.

Следующий пример по клику запускает функцию countRabbits() :

Как мы помним, атрибут HTML-тега не чувствителен к регистру, поэтому ONCLICK будет работать так же, как onClick и onCLICK … Но, как правило, атрибуты пишут в нижнем регистре: onclick .

Использование свойства DOM-объекта

Можно назначать обработчик, используя свойство DOM-элемента on .

К примеру, elem.onclick :

Если обработчик задан через атрибут, то браузер читает HTML-разметку, создаёт новую функцию из содержимого атрибута и записывает в свойство.

Этот способ, по сути, аналогичен предыдущему.

Обработчик всегда хранится в свойстве DOM-объекта, а атрибут – лишь один из способов его инициализации.

Эти два примера кода работают одинаково:

Так как у элемента DOM может быть только одно свойство с именем onclick , то назначить более одного обработчика так нельзя.

В примере ниже назначение через JavaScript перезапишет обработчик из атрибута:

Кстати, обработчиком можно назначить и уже существующую функцию:

function sayThanks() < alert('Спасибо!'); >elem.onclick = sayThanks;

Убрать обработчик можно назначением elem.onclick = null .

Доступ к элементу через this

Внутри обработчика события this ссылается на текущий элемент, то есть на тот, на котором, как говорят, «висит» (т.е. назначен) обработчик.

В коде ниже button выводит своё содержимое, используя this.innerHTML :

Нажми меня

Частые ошибки

Если вы только начинаете работать с событиями, обратите внимание на следующие моменты.

Функция должна быть присвоена как sayThanks , а не sayThanks() .

// правильно button.onclick = sayThanks; // неправильно button.onclick = sayThanks();

Если добавить скобки, то sayThanks() – это уже вызов функции, результат которого (равный undefined , так как функция ничего не возвращает) будет присвоен onclick . Так что это не будет работать.

…А вот в разметке, в отличие от свойства, скобки нужны:

Это различие просто объяснить. При создании обработчика браузером из атрибута, он автоматически создаёт функцию с телом из значения атрибута: sayThanks() .

Так что разметка генерирует такое свойство:

button.onclick = function() < sayThanks(); // содержимое атрибута >;

Используйте именно функции, а не строки.

Назначение обработчика строкой elem.onclick = «alert(1)» также сработает. Это сделано из соображений совместимости, но делать так не рекомендуется.

Не используйте setAttribute для обработчиков.

Такой вызов работать не будет:

// при нажатии на body будут ошибки, // атрибуты всегда строки, и функция станет строкой document.body.setAttribute('onclick', function() < alert(1) >);

Регистр DOM-свойства имеет значение.

Используйте elem.onclick , а не elem.ONCLICK , потому что DOM-свойства чувствительны к регистру.

addEventListener

Фундаментальный недостаток описанных выше способов назначения обработчика – невозможность повесить несколько обработчиков на одно событие.

Например, одна часть кода хочет при клике на кнопку делать её подсвеченной, а другая – выдавать сообщение.

Мы хотим назначить два обработчика для этого. Но новое DOM-свойство перезапишет предыдущее:

input.onclick = function() < alert(1); >// . input.onclick = function() < alert(2); >// заменит предыдущий обработчик

Разработчики стандартов достаточно давно это поняли и предложили альтернативный способ назначения обработчиков при помощи специальных методов addEventListener и removeEventListener . Они свободны от указанного недостатка.

Синтаксис добавления обработчика:

element.addEventListener(event, handler, [options]);

• once : если true , тогда обработчик будет автоматически удалён после выполнения.
• capture : фаза, на которой должен сработать обработчик, подробнее об этом будет рассказано в главе Всплытие и погружение. Так исторически сложилось, что options может быть false/true , это то же самое, что .
• passive : если true , то указывает, что обработчик никогда не вызовет preventDefault() , подробнее об этом будет рассказано в главе Действия браузера по умолчанию.

Для удаления обработчика следует использовать removeEventListener :

element.removeEventListener(event, handler, [options]);

Удаление требует именно ту же функцию

Для удаления нужно передать именно ту функцию-обработчик которая была назначена.

Вот так не сработает:

elem.addEventListener( "click" , () => alert('Спасибо!')); // . elem.removeEventListener( "click", () => alert('Спасибо!'));

Обработчик не будет удалён, т.к. в removeEventListener передана не та же функция, а другая, с одинаковым кодом, но это не важно.

Вот так правильно:

function handler() < alert( 'Спасибо!' ); >input.addEventListener("click", handler); // . input.removeEventListener("click", handler);

Обратим внимание – если функцию обработчик не сохранить где-либо, мы не сможем её удалить. Нет метода, который позволяет получить из элемента обработчики событий, назначенные через addEventListener .

Метод addEventListener позволяет добавлять несколько обработчиков на одно событие одного элемента, например:

Как видно из примера выше, можно одновременно назначать обработчики и через DOM-свойство и через addEventListener . Однако, во избежание путаницы, рекомендуется выбрать один способ.

Обработчики некоторых событий можно назначать только через addEventListener

Существуют события, которые нельзя назначить через DOM-свойство, но можно через addEventListener .

Например, таково событие DOMContentLoaded , которое срабатывает, когда завершена загрузка и построение DOM документа.

document.onDOMContentLoaded = function() < alert("DOM построен"); // не будет работать >;

document.addEventListener("DOMContentLoaded", function() < alert("DOM построен"); // а вот так сработает >);

Так что addEventListener более универсален. Хотя заметим, что таких событий меньшинство, это скорее исключение, чем правило.

Объект события

Чтобы хорошо обработать событие, могут понадобиться детали того, что произошло. Не просто «клик» или «нажатие клавиши», а также – какие координаты указателя мыши, какая клавиша нажата и так далее.

Когда происходит событие, браузер создаёт объект события, записывает в него детали и передаёт его в качестве аргумента функции-обработчику.

Пример ниже демонстрирует получение координат мыши из объекта события:

Некоторые свойства объекта event :

event.type Тип события, в данном случае «click» . event.currentTarget Элемент, на котором сработал обработчик. Значение – обычно такое же, как и у this , но если обработчик является функцией-стрелкой или при помощи bind привязан другой объект в качестве this , то мы можем получить элемент из event.currentTarget . event.clientX / event.clientY Координаты курсора в момент клика относительно окна, для событий мыши.

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

Объект события доступен и в HTML

При назначении обработчика в HTML, тоже можно использовать объект event , вот так:

Это возможно потому, что когда браузер из атрибута создаёт функцию-обработчик, то она выглядит так: function(event) < alert(event.type) >. То есть, её первый аргумент называется «event» , а тело взято из атрибута.

Объект-обработчик: handleEvent

Мы можем назначить обработчиком не только функцию, но и объект при помощи addEventListener . В этом случае, когда происходит событие, вызывается метод объекта handleEvent .

Как видим, если addEventListener получает объект в качестве обработчика, он вызывает object.handleEvent(event) , когда происходит событие.

Мы также можем использовать класс для этого:

Здесь один и тот же объект обрабатывает оба события. Обратите внимание, мы должны явно назначить оба обработчика через addEventListener . Тогда объект menu будет получать события mousedown и mouseup , но не другие (не назначенные) типы событий.

Метод handleEvent не обязательно должен выполнять всю работу сам. Он может вызывать другие методы, которые заточены под обработку конкретных типов событий, вот так:

Теперь обработка событий разделена по методам, что упрощает поддержку кода.

Итого

Есть три способа назначения обработчиков событий:

1. Атрибут HTML: onclick=». » .
2. DOM-свойство: elem.onclick = function .
3. Специальные методы: elem.addEventListener(event, handler[, phase]) для добавления, removeEventListener для удаления.

HTML-атрибуты используются редко потому, что JavaScript в HTML-теге выглядит немного странно. К тому же много кода там не напишешь.

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

Последний способ самый гибкий, однако нужно писать больше всего кода. Есть несколько типов событий, которые работают только через него, например, DOMContentLoaded . Также addEventListener поддерживает объекты в качестве обработчиков событий. В этом случае вызывается метод объекта handleEvent .

Не важно, как вы назначаете обработчик – он получает объект события первым аргументом. Этот объект содержит подробности о том, что произошло.

Мы изучим больше о событиях и их типах в следующих главах.

Настройки стрелок у Slick слайдера (часть 3)

Как показывает практика, для начинающих фронтендеров, самой большой проблемой при кастомизации Slick слайдера, остается настройка стрелок и точек. И если со стилизацией индикаторных точек, мы разобрались на прошлом уроке, то сегодня мы научимся заменять дефолтные стрелки на свои (по макету).

1) HTML разметка

У вас уже должна быть подключена библиотека jQuery и файл самого слайдера slick.min.js. Создадим контейнер для слайдера, внутри которого 6 слайдов с картинками.

2) Инициализация Slick слайдера

Создаем файл script.js и подключаем ранее созданный контейнер для слайдов с классом slider к Slick слайдеру.

$(document).ready(function() $(‘.slider’).slick( arrows:true, // показать стрелки
dots:false, // не показывать точки
slidesToShow:3, // показывать по 3 слайда
autoplay:true, // автоматическое проигрывание слайдов
>);
>);

После инициализации слайдера, автоматически создались новые теги, а к элементам добавились новые классы (смотрите инструменты разработчика). Через эти классы мы будем управлять внешним видом слайдера в CSS файле (style.css).

3) Стилизация Slick слайдера

.slick-slider min-width: 0;
>

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

.slick-track display: flex;
align-items: flex-start;
>

Спрячем в ограничивающей оболочке слайдера, контент (картинки), выходящий за её пределы.

.slick-list overflow: hidden;
>

Зададим промежутки между слайдами и сделаем картинки адаптивными.

.slider__item padding: 0px 15px;
>

.slider__item img max-width: 100%;
>

4) Настройка стрелок

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

.slider position: relative;
padding: 0px 60px; // поля между стрелкой и краем слайдера
>

.slider .slick-arrow position: absolute;
top: 50%; // выравнивание по вертикали
margin: -15px 0 0 0; // корректировка вертикального выравнивания
z-index: 2; // стрелки сверху картинок
font-size: 0; // убираем надпись на дефолтной стрелке
width: 30px; // ширина стрелки
height: 30px; // высота стрелки
>

Вставляем фоном заранее заготовленные свои стрелки (вырезаем из макета)

.slider .slick-arrow.slick-prev left: 0; // левая стрелка остается с левой стороны слайдера
background: url(‘../img/left-arrow.png’) 0 0 / 100% no-repeat;
>

.slider .slick-arrow.slick-next right: 0; // правая стрелка переместилась справа от слайдера
background: url(‘../img/right-arrow.png’) 0 0 / 100% no-repeat;
>

5) Делаем слайдер адаптивным

Добавим в JS файл свойство responsive со следующими настройками: При максимальной ширине окна 768 пикселей, показывать 2 слайда, а при максимальной ширине окна 550 пикселей — 1 слайд.

responsive:[
breakpoint: 768,
settings: slidesToShow:2
>
>,
breakpoint: 550,
settings: slidesToShow:1
>
>
]

Пример Slick слайдера с кастомными стрелками

Создано 20.03.2020 10:16:40

Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   Она выглядит вот так:
2. Текстовая ссылка:
   Она выглядит вот так: Как создать свой сайт
3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 1 ):

Dufresne 17.06.2022 07:52:25

Добрый день. Установил два slick слайдера на странице. Для того, чтобы кастомизировать стрелки навигации, добавил их в одинаковый необходимый контейнер по документации: appendArrows:$(‘.slider_arrows’). При этом в одном из слайдеров стали дублироваться кнопки навигации. Т.е. вместо 2, отображается 4 кнопки. При этом из 4 работает только 2. Можете ли вы подсказать в чем может быть проблема и как поправить?

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2024 Русаков Михаил Юрьевич. Все права защищены.

Замена дефолтных стрелок у slick slider

Каким образом можно заменить стрелки у slick’a ? Нашел такой способ:

$(document).ready(function()< $('.head-slider__slider').slick(< dots: true, infinite: true, speed: 1000, nextArrow: ' ', prevArrow: ' ', >); >);

Но это не сработало. Хочу заменить стандартные иконки на свои SVG’шные .

Отслеживать

задан 15 апр 2018 в 19:41

uzi_no_uzi uzi_no_uzi

2,186 2 2 золотых знака 18 18 серебряных знаков 51 51 бронзовый знак

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Вот вполне рабочий пример. Изменил arrows таким же образом:

$(document).ready(function() < $('.slick-slider').slick(< slidesToShow: 3, centerMode: true, centerPadding: '50px', prevArrow: "", nextArrow: "", >); >);

.slider-box < position: relative; >li < margin-top: 20px; position: relative; float: left; margin-right: 20px; >.prev, .next < position: absolute; top: 30%; height: 60px; width: 60px; z-index: 1; cursor: pointer; >.next

  [email protected]/slick/slick.css"> 
 
 
  
 
  
 
  
 
  
 
 

Как изменить положение управляющих стрелок в слайдере Slick?

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

• Вопрос задан более трёх лет назад
• 955 просмотров

Комментировать

Решения вопроса 1

i’m sexy and i know it

Оформляй кнопки через стили, это классы .slick-prev и .slick-next, не нужно пихать оформление в js. А позиционируются они точно так же, как любой абсолютно спозиционированный элемент.

Ответ написан более трёх лет назад