slick.js

using Slick and looking for a way to have the prev control disabled and hidden until the user clicks the next arrow. Similarly I want the Next control to become disabled and hidden once the user reaches the last slide. A good illustration of what I'm trying to accomplish is here Does slick have an attribute already for this that I have overlooked? Is this something that maybe can be accomplished using CSS by adding a disabled class? The only thing similar I have found is this $('.pages .slider').slick({ autoplay: true, autoplaySpeed: 5000, infinite: false, onAfterChange: function(slide, index)

I am using Slick Carousel ( http://kenwheeler.github.io/slick/ ), but don't know how to incorporate different slide transitions. Does anyone have an example to share? Here's what I currently have: $('.slider1').slick({ autoplay:true, autoplaySpeed: 4500, arrows:false, slide:'.slider-pic', slidesToShow:1, slidesToScroll:1, dots:false, easing: 'easeOutElastic', responsive: [ { breakpoint: 1024, settings: { dots: false } }] }); On site - http://lantecctc.businesscatalyst.com/ Use cssEase instead of easing - this is the notation detailed on slick. Not sure whether 'easeOutElastic' is allowed; as

I need to make a two lines carousel with left to right order (also responsive) With: $('slider').slick({ rows: 2, slidesToShow: 3, responsive: [ { breakpoint: 768, settings: { slidesToShow: 1 } } ] }); I get this order: 1 3 5 7 9 11 2 4 6 8 10 12 This solution is not good for me because I'm using 1 slides to show in responsive mode: How can I create a carousel with multiple rows? Any ideas? You need something like that Template: <div class="carousel"> <div class=""><img src="/images/app.png" alt=""></div> <div class=""><img src="/images/app.png" alt=""></div> <div class=""><img src="/images

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 it. I have put the call for slick into a function function slickCarousel() { $('.skills_section').slick({ infinite: true, slidesToShow: 3, slidesToScroll: 1 }); } and then I call the function within my success callback $.ajax({ type: 'get', url: '/public/index', dataType: 'script', data: data_send, success: function() { slickCarousel(); } }); But the

I'm running into a really weird issue with a Slick Slider. Sometimes, on the very first page load the slide and track width are being set to 0. I've tried many of the solutions out there including: Setting a timeout and then calling slick Triggering a window resize event via JS Setting min-height of all slick elements to 1 Putting the images in a div container I can't for the life of me figure out how to fix this issue. Any help would be greatly appreciated! Live example (any product page) jQuery // Slick Slider on Product Page $('.slick-carousel').slick({ slidesToShow: 1, slidesToScroll: 1,

Hi i'm having trouble to get slick carousel ( http://kenwheeler.github.io/slick/ ) to stop the autoplay when I'm using a youtube clip inside the slider.. Someone said that I can use onAfterChange but still dont know how to turn off the autoplay when video is on (mind that this is when mouse in NOT on the video) Here is the code I'm using any help would be nice :) $("#slider").slick({ slidesToShow: 1, slidesToScroll: 1, arrows: false, dots: true, autoplay: true, autoplaySpeed: 7000, infinite: true }); /* **************************************** * * Youtube API * Create player * ****************

I'm trying to make a pretty normal carousel, with two arrows on either side in the vertical middle, and text with a button in the middle on top of the image. I cannot get anything to appear on top of the image though, even though the arrows and text are all absolute and have a higher z-index. Here's a codepen with my code. http://codepen.io/kathryncrawford/pen/AXmVAz And here's my HTML <div class="slick-slider"> <div> <img class="img-fluid" src="http://www.placecage.com/1500/750" alt=""> <div class="info"> <h1 class="slider-heading">Heading</h1> <p class="slider-subheading lead">Subheading</p>