You should use the unslick method: function getSliderSettings(){ return { infinite: true, slidesToShow: 3, slidesToScroll: 1 } } $.ajax({ type: ‘get’, url: ‘/public/index’, dataType: ‘script’, data: data_send, success: function() { $(‘.skills_section’).slick(‘unslick’); /* ONLY remove the classes and handlers added on initialize */ $(‘.my-slide’).remove(); /* Remove current slides elements, in case that you want to show … Read more
Add prevArrow: false and nextArrow: false to where you call your carousel. Ex) $(‘.slider’).slick({ dots: false, prevArrow: false, nextArrow: false }); I added dots: false in case you wanted to remove that too.
I initialised the slider with one of the properties as variableWidth: true then i could set the width of the slides to anything i wanted in CSS with: .slick-slide { width: 200px; }
I know this is an old question, but maybe I can be of help to someone, bc this also stumped me until I read the documentation a bit more: prevArrow string (html|jQuery selector) | object (DOM node|jQuery object) Previous Allows you to select a node or customize the HTML for the “Previous” arrow. nextArrow string … Read more
No need to add “slidesToShow: 3.5 option” Just call slick:- $(‘.Your-container’).slick({ arrows: false, }); and add following CSS: .slick-list{padding:0 20% 0 0 !important;} Either you can give a fixed padding to the right or percentage.
The slider object contains the slide count as property. Slick < 1.5 $(‘.slideshow’).slick({ slide: ‘img’, autoplay: true, dots: true, dotsClass: ‘custom_paging’, customPaging: function (slider, i) { //FYI just have a look at the object to find available information //press f12 to access the console in most browsers //you could also debug or look in the … Read more
I found the solution myself later, so I placed it as an answer: The error persisted every now and then when adding new function to my JS file. I ultimately stripped down my concatenated JS file and found out that there were two versions of jQuery being loaded, of which one was very, very old.
That’s due to calling init twice. This works without error: $(“.slider”).not(‘.slick-initialized’).slick() Also, “silder” looks like a typo. Relying on a timeout is also error-prone. Unfortunately, Internet Explorer uses a different event to tell you when the HTML elements and JS libraries have been loaded. There are many libraries to avoid the 100 or so lines … Read more
Add a couple of CSS styles and it will be ready: .slick-track { display: flex !important; } .slick-slide { height: inherit !important; } Enjoy! 🙂
/* the slides */ .slick-slide { margin: 0 27px; } /* the parent */ .slick-list { margin: 0 -27px; } This problem reported as issue (#582) on plugin’s github, btw this solution mentioned there too, (https://github.com/kenwheeler/slick/issues/582)