slick.js

Looking for a way to use slick carousel and be able to change the amount of time the slide is displayed on an individual slide basis. In case I'm not explaining it well, assume I have 5 slides. I want to be able to define the display of slide one for 5s, slide 2 for 10s, slide 3 for 7s, etc... ref: http://kenwheeler.github.io/slick/ I was looking for the same thing but since I did not find any answer to setting an individual slide duration I built it with a recursive function that calls the 'slickNext' after timeout. The duration for each slide is stored in a data-attribute and then I save all

I'm trying to enable Slick Slider (slick.js) to initiate only over 520px wide. Anything below that and the slides just stack (i.e. no slick). Is it possible so that it can work without refreshing the page? I've done this, which works when dragging the browser (narrow) below 500px, but when I move it over 500px it doesn't re-initiate without refreshing the page... $('.slick').slick({ autoplay: true, autoplaySpeed: 4000, delay: 5000, speed: 700, responsive: [ { breakpoint: 500, settings: "unslick" } ] }); Is there a way around this? I'm using https://github.com/kenwheeler/slick You can try to

I am using http://kenwheeler.github.io/slick/ for the carousal. But the problem is the autoplay slides the slick to next even when the youtube video is playing. JSFIDDLE Currently I am using the below JS but nothing seems to work on it. $('#main-slider').slick({ slidesToShow: 1, slidesToScroll: 1, autoplay: true, autoplaySpeed: 3000, dots: true, infinite: true, adaptiveHeight: true, arrows: false }); var video = $('#main-slider .slick-active').find('iframe').get(0).play(); $('#main-slider').on('afterChange', function(event, slick, currentSlide, nextSlide){ $('#main-slider .slick-slide').find(

I'm working on a news article page that also has a gallery of images. I'm using slick slider for the thumbnails on the gallery. Every image in the gallery has it's own url for ad view purposes (not nice but nothing I can do about it) like our-url.com/category/articlewithgallery/1, 2 or 3 etc... I'm using responsive breakpoints like this: $('.gallery-thumbs').slick({ slidesToShow: 5, slidesToScroll: 5, dots: false, infinite: false, speed: 300, responsive: [ { breakpoint: 1024, settings: { slidesToShow: 5, slidesToScroll: 5 } }, { breakpoint: 600, settings: { slidesToShow: 4, slidesToScroll: 4 }

I am trying to target the active slide in my slick carousel by ken wheeler to add an animation to the p element within that slide. So, when the slide is active, the p element will bounce in (or something), then when the slide transitions to the next slide, the animation will be applied to the new p element. After the slides have looped, the animated class will be continuously applied to the slick carousel . HTML: <div class="slick-promo"> <div class="single-slide">[img code here]<p>This text will come in animated, then as the slide leaves it will have the animation class removed.</p></div>

Could someone help me figure out why my code isn't working? I'm trying to accomplish 2 rows and 6 items on the full width and 1 row with 1 item on mobile. $('.your-class').slick({ slidesToShow: 1, rows:2, slidesPerRow: 3, responsive: [{ breakpoint: 500, settings: { arrows: true, infinite: false, rows:1, slidesPerRow: 1, slidesToShow: 1, } }] }); <div class="your-class"> <div class="">your content</div> <div class="">your content</div> <div class="">your content</div> <div class="">your content</div> <div class="">your content</div> <div class="">your content</div> </div> http://codepen.io/Kibs

I am using Slick.js plugin with its Slider Syncing feature. The issue I am having is that if I use multiple sliders on a single page, by clicking next or prev buttons plugin performs the action for all sliders on page. I wonder is there anything I could do with JQuery to have the next and prev work for each slider on page not for all? Thanks in advance. HTML <div class="slider"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> </div> <div class="slider-nav"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> </div> SLICK RUN SCRIPT $('.slider').slick({ slidesToShow: 1, slidesToScroll: