Stack Overflow
Stack Overflow

Questions tagged [slick.js]

A jQuery plug-in for carousel.

About

It is a Jquery plugin for implementing carousels.

Features

  • Fully responsive. Scales with its container.
  • Separate settings per breakpoint
  • Uses CSS3 when available. Fully functional when not.
  • Swipe enabled. Or disabled, if you prefer.
  • Desktop mouse dragging
  • Infinite looping.
  • Fully accessible with arrow key navigation
  • Add, remove, filter & unfilter slides
  • Autoplay, dots, arrows, callbacks, etc...

Browser support

Slick works on IE8+ in addition to other modern browsers such as Chrome, Firefox, and Safari.

Links

CDN

1994 questions
103
votes
18 answers

How add spaces between Slick carousel item

I want to add space between two slick carousel items, but not want the space with padding, because it's reducing my element size(and I don't want that). $('.single-item').slick({ initialSlide: 3, infinite: false …
Sopo
  • 1,577
  • 3
  • 16
  • 28
89
votes
13 answers

Slick carousel - force slides to have the same height

I'm having trouble with the Slick carousel JS plugin with multiple slidesToShow which have different heights. I need the Slides to have the same height, but with CSS flex-box it doesn't work as the slides have conflicting CSS definitions. Also, I…
JJaun
  • 1,690
  • 2
  • 10
  • 16
60
votes
3 answers

Error in slick.js: "Uncaught TypeError: Cannot read property 'add' of null"

I used slick js for slider view of image. Here is my code.
<%= f.fields_for :images do |image_form| %> <%#= render 'images_fields', :f => image_form %>
<%= image_tag…
Pooja Mokariya
  • 1,970
  • 5
  • 21
  • 46
55
votes
20 answers

Slick Carousel Uncaught TypeError: $(...).slick is not a function

Somehow I'm unable to use slick carousel (http://kenwheeler.github.io/slick/) correctly. I'm getting the following error: Uncaught TypeError: $(...).slick is not a function I'm running the following code in my javascript file: function…
Sanderfish
  • 1,470
  • 1
  • 12
  • 15
48
votes
10 answers

Slick.js: Get current and total slides (ie. 3/5)

Using Slick.js - how does one get current and total slides (ie. 3/5) as a simpler alternative to the dots? I've been told I can use the customPaging callback using the callback argument objects, but what does that mean…
Mark Boulder
  • 13,577
  • 12
  • 48
  • 78
40
votes
6 answers

Show half of next slide without Center Mode in Slick Slider

What I want is to have a slider that shows 3.5 slides at once, with the right most slide being the one that is only half shown. I have seen something like this done successfully using centerMode and centerPadding with slick slider, but I do not want…
Cook88
  • 707
  • 1
  • 6
  • 18
40
votes
11 answers

Add custom buttons on Slick Carousel

How do I apply custom prev and next buttons to slick carousel? I have tried a background image on the .slick-prev and .slick-next css classes. I have also tried adding a new class as per the documentation but the arrows disappeared…
rorykoehler
  • 1,642
  • 2
  • 15
  • 20
35
votes
6 answers

How can I change the width and height of slides on Slick Carousel?

http://kenwheeler.github.io/slick/ A friend suggested that I use Ken Wheeler's Slick carousel and I decided to give it a try. I am having a couple of problems with it. The first is that the slides don't load "on top of each other" like they…
ShoeLace1291
  • 4,551
  • 12
  • 45
  • 81
34
votes
11 answers

slick carousel - hide controls?

Are there any options to stop slick adding next & previous buttons? I can't seem to hide them via css.
v3nt
  • 2,845
  • 6
  • 36
  • 50
31
votes
13 answers

Reinitialize Slick js after successful ajax call

I am using Slick for a carousel implementation and everything works fine when the pages loads.What I am trying to achieve is that when i make an Ajax call to retrieve new data I still want the slick carousel implementation, at the moment i lose…
Richlewis
  • 15,070
  • 37
  • 122
  • 283
29
votes
7 answers

Slick.js remove blue highlight around image

I am using Slick.js to build a carousel inside a modal. Everything works perfectly until I click on an image. A blue border shows up and I unfortunately cannot figure out how to make it stop doing so. I've tried outline: none and border: none and…
Ryan113
  • 676
  • 1
  • 10
  • 27
22
votes
3 answers

Vertical align content slickslider

I've been struggling to get my content vertical aligned but really don't fix it. I tried the adaptiveHeight parameter but it really didn't do what I wanted. Fiddle: http://jsfiddle.net/fmo50w7n/400 This is what the code looks like HTML:
Sandro
  • 467
  • 1
  • 5
  • 15
22
votes
5 answers

Slick carousel responsive breakpoints

This is the configuration I am using to create a slick carousel on my web page: $('#carousel').slick({ infinite: true, slidesToShow: 3, slidesToScroll: 1, arrows: true, autoplay: true, autoplaySpeed: 2000, responsive: [ { …
void
  • 36,090
  • 8
  • 62
  • 107
21
votes
12 answers

Slick slider gets wrong width

My slick slider gets wrong width when initialized and when I change screen resolutions. My js: $('.slider').slick({ infinite: false, speed: 300, initialSlide: 1, slidesToShow: 3, slidesToScroll: 1, dots: false, …
mrfr
  • 1,724
  • 2
  • 23
  • 44
21
votes
10 answers

slick slider - css transition infinite loop bug

I've got a slider set up using slick slider. When using the next and previous buttons, the item comes in to view with a nice transition. The problem I'm having is that when it restarts its cycle, the first item "snaps" into view, instead of doing…
MAX POWER
  • 5,213
  • 15
  • 89
  • 141
1
2 3
…
99 100