Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.10.2019, 05:53
Аватар для Максим Ученик
Интересующийся
Отправить личное сообщение для Максим Ученик Посмотреть профиль Найти все сообщения от Максим Ученик
 
Регистрация: 13.08.2019
Сообщений: 25

Как повесить своё событие на slick dots?
Имеется обычный slick slider.
И так же у этого слайдера я включил dots.
Я хочу что бы при наведении на любой из dots менялся слайд!
Как это можно реализовать ?
Я пытался это сделать на нативном javascript но не хватает каких то знаний.Помогите сделать это

https://codepen.io/topicstarter/pen/ExxxoZm
Ответить с цитированием
  #2 (permalink)  
Старый 06.10.2019, 08:27
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,085

slick dots mouseenter
Максим Ученик,
var slider = $(".slider").slick({
        infinite: true,
        slidesToShow: 1,
        slidesToScroll: 1,
        dots: true
 });
 var lis = [...document.querySelectorAll(".slick-dots li")];
 lis.forEach((el,i) => el.addEventListener("mouseenter", () => slider.slick("slickGoTo", i)));
Ответить с цитированием
  #3 (permalink)  
Старый 06.10.2019, 08:35
Аватар для Максим Ученик
Интересующийся
Отправить личное сообщение для Максим Ученик Посмотреть профиль Найти все сообщения от Максим Ученик
 
Регистрация: 13.08.2019
Сообщений: 25

не работает почему то! отрабатывает обычный click (FF)
Ответить с цитированием
  #4 (permalink)  
Старый 06.10.2019, 08:43
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,085

Максим Ученик,
при наведении на точки меняются слайды?
Ответить с цитированием
  #5 (permalink)  
Старый 06.10.2019, 08:47
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,085

Максим Ученик,
FF 69.0.2 полёт нормальный, при наведении.
Ответить с цитированием
  #6 (permalink)  
Старый 06.10.2019, 08:49
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,085

Максим Ученик,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<style type="text/css">
   .slider{
    width: 300px;
    margin: auto;
    position: relative;
}
.slick-next,.slick-prev{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.slick-next{
    left: -100px;
}
.slick-prev{
    right: -100px;
}
ul{
    width: 100%;
    height: 10px;
    line-height:9px;
}
li{
    float: left;
    margin-left: 20px;
}
::marker{
    font-size: 40px;
}
li button{
    display: none;
}
</style>
</head>

<body>
<div class="slider">
    <img src="https://placehold.it/300x100/0cc" alt="">
    <img src="https://placehold.it/300x100/00c" alt="">
    <img src="https://placehold.it/300x100/000" alt="">
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

<script>
 var slider = $(".slider").slick({
        infinite: true,
        slidesToShow: 1,
        slidesToScroll: 1,
        dots: true
 });
 var lis = [...document.querySelectorAll(".slick-dots li")];
 lis.forEach((el,i) => el.addEventListener("mouseenter", () => slider.slick("slickGoTo", i)));
</script>
</body>
</html>

Последний раз редактировалось рони, 06.10.2019 в 08:53.
Ответить с цитированием
  #7 (permalink)  
Старый 06.10.2019, 08:49
Аватар для Максим Ученик
Интересующийся
Отправить личное сообщение для Максим Ученик Посмотреть профиль Найти все сообщения от Максим Ученик
 
Регистрация: 13.08.2019
Сообщений: 25

при наведении вообще ни чего не происходит ..у меня по крайней мере
Ответить с цитированием
  #8 (permalink)  
Старый 06.10.2019, 08:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,085

Максим Ученик,
здесь пост №6 работает наведение?
Ответить с цитированием
  #9 (permalink)  
Старый 06.10.2019, 08:54
Аватар для Максим Ученик
Интересующийся
Отправить личное сообщение для Максим Ученик Посмотреть профиль Найти все сообщения от Максим Ученик
 
Регистрация: 13.08.2019
Сообщений: 25

Сообщение от рони Посмотреть сообщение
Максим Ученик,
здесь пост №6 работает наведение?
вот щас работает - спасибо
Ответить с цитированием
  #10 (permalink)  
Старый 06.10.2019, 08:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,085

Максим Ученик,
перезагрузите эту страницу и запустите пример в #6
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Плагин jQuery - как сгенерить событие? maxapet jQuery 1 31.08.2015 09:44
Как заменить событие hover на событие загрузку страницы onLoad? SkyWay Общие вопросы Javascript 0 21.09.2014 16:06
Повесить событие на еще не созданный елемент jeysmook Javascript под браузер 4 07.09.2014 15:25
Повесить событие на кнопку, не меняя кода кнопки Weks Общие вопросы Javascript 8 11.11.2012 16:13
как проверить поддеружет браузер определенное событие? GOll Элементы интерфейса 9 24.07.2008 14:40