Warm tip: This article is reproduced from serverfault.com, please click
jquery slick.js

Slick slider

发布于 2020-11-28 08:58:27

I have Slick Slider (#my-slider) and I want to add class (.past) to the all .slick-dots li elements before li.slick-active one.

how it currently looks enter image description here

how I want it to look enter image description here

I tried the following:

(function ($) {
    jQuery(document).ready(function () {
        $('#my-slider').on('init', function(event, slick){
           var $items = slick.$dots.find('li.slick-active').prevAll();
           $items.addClass('past');
        });

        $('#my-slider').slick({
          dots: true,
          arrows: true,
          infinite: false,
          speed: 500,
          fade: true,
          autoplay: false,
          cssEase: 'linear'
        });
    });
})(jQuery);

and this one

(function ($) {
    jQuery(document).ready(function () {
         $('#my-slider').on('init', function(event, slick){
           $('#my-slider .slick-dots li.slick-active').prevAll().addClass('past');
        });

        $('#my-slider').slick({
          dots: true,
          arrows: true,
          infinite: false,
          speed: 500,
          fade: true,
          autoplay: false,
          cssEase: 'linear'
        });
    });
})(jQuery);

But no luck.

Slider works, but it doesn't give past class at all.

Questioner
Majurac
Viewed
0
分享
joshmoto 2020-11-29 10:45:14

You could use beforeChange slick event to add/remove .past classes on all dots using the nextSlide value.

Note: You do not need to use jQuery(document).ready(function () { }); inside (function ($) { })(jQuery);. The first function is shorthand for doc ready, so you are calling doc ready twice. Remove jQuery(document).ready(function () { }); as it is not needed.

See live demo below for your problem with comments in code...

// our slick mySlider
let mySlider = $('#my-slider').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  dots: true,
  arrows: false,
  adaptiveHeight: true,
  autoplay: true,
  pauseOnHover: false,
  pauseOnFocus: false,
  autoplaySpeed: 1000
});

// our mySlider dots
let dots = $('.slick-dots > LI', mySlider);

// before mySlider change slick event
mySlider.on('beforeChange', function(event, slick, currentSlide, nextSlide) {

  // remove dot past classes on dots after next slide dot
  $(dots[nextSlide]).nextAll().removeClass('past');
  
  // add dot past classes on dots before next slide dot
  $(dots[nextSlide]).prevAll().addClass('past');
    
});
/* my-slider dots active and past css */

#my-slider .slick-dots LI.slick-active BUTTON::before,
#my-slider .slick-dots LI.slick-active BUTTON:focus {
  color: red;
  opacity: 1 !important;
}

#my-slider .slick-dots LI.past BUTTON::before,
#my-slider .slick-dots LI.past BUTTON:focus {
  opacity: 1;
}

#my-slider .slick-dots LI:not(.past) BUTTON:focus {
  opacity: .25;
}

/* my-slider demo css not needed */

BODY {
  margin: 0;
  padding: 20px;
}

#my-slider FIGURE {
  height: 120px;
  margin: 0;
  display: block;
  border: 1px solid black;
}
<div id="my-slider">
  <figure></figure>
  <figure></figure>
  <figure></figure>
  <figure></figure>
  <figure></figure>
  <figure></figure>
</div>

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

Here is fiddle version too: https://jsfiddle.net/joshmoto/mbrs3t9v/17/

Majurac 2020-11-29 19:32:04

Thank you . Works like a charm :) Combination of the beforeChange and nextSlide did the job. Thank you for "doc ready" clarification as well.

joshmoto 2020-11-29 19:36:51

No worries the css focus can play havoc with the active pause states but this covers that too

热门帖子

1
LineageOS 21 更新后，很多国产 app 无法进入，有没有大佬知道怎么处理？
2
关于国外满 18 岁了就全靠自己这件事是真实的吗
3
现在办张卡太费劲了
4
咸鱼 AI 工程师接些外包
5
现在买 3090TI 玩 AI 靠谱吗
6
搬瓦工 IP 被封了
7
V2 隐藏丑丑头像的脚本
8
人心險惡，今天差點在人行道上摔倒
9
关于黑产账号多开，设备和 IP 的识别方案
10
vscode 远程开发好用吗 ？

热门github

1
Implementation of paper - YOLOv9: Learning What You Want to Learn Using Programmable Gradient Information
2
A Windows and Office activator using HWID / Ohook / KMS38 / Online KMS activation methods, with a focus on open-source code and fewer antivirus detections.
3
Get up and running with Llama 2, Mistral, Gemma, and other large language models.
4
该项目可以让你通过订阅的方式使用Cloudflare WARP+，自动获取流量。This project enables you to use Cloudflare WARP+ through subscription, automatically acquiring traffic.
5
Multi functional app to find duplicates, empty folders, similar images etc.
6
Xray panel supporting multi-protocol multi-user expire day & traffic & ip limit (Vmess & Vless & Trojan & ShadowSocks & Wireguard)
7
The Free Software Media System
8
lightweight, standalone C++ inference engine for Google's Gemma models.
9
📚 Freely available programming books
10
A collective list of free APIs
11
1️⃣🐝🏎️ The One Billion Row Challenge -- A fun exploration of how quickly 1B rows from a text file can be aggregated with Java
12
🎓 Path to a free self-taught education in Computer Science!
13
Curso para aprender el lenguaje de programación Python desde cero y para principiantes. 75 clases, 37 horas en vídeo, código, proyectos y grupo de chat. Fundamentos, frontend, backend, testing, IA...
14
This repository contains System Design resources which are useful while preparing for interviews and learning Distributed Systems
15
Mamba is a new state space model architecture showing promising performance on information-dense data such as language modeling, where previous subquadratic models fall short of Transformers. It is based on the line of progress on structured state space models, with an efficient hardware-aware design and implementation in the spirit of FlashAttention.