slick.js

问题 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:

问题 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? 回答1: You need something like that Template: <div class="carousel"> <div class=""><img src="/images/app

问题 I'm using a Bootstrap 4 tab navigation to view different sliders inside the tab panels. It works well for the active tab. But the sliders in the inactive tabs have an width of 0 ( .slide-track ). So there is a display problem until I'm start to navigate through the tabs. After that, the width is set and the slider looks fine. Is there any way to set the width of the slide track to the correct size? $('.slider-home').slick({ dots: true, arrows: true, }); $('.slider-profile').slick({ dots: true

问题 I am using iron-router, i have a route "models" which has a list of items. When the user clicks one of these items a new route "model" is used, the name of the selected item is passed as a param and used to load data about that model from the database. I want to use slick carousel, using an array of images returned from the database (based on the param). <div id="carousel"> {{#each images}} <div class="item"> <img src="/images/{{this}}" alt=""> </div> {{/each}} </div> Where should I call the

问题 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: {

问题 Hi i would like to seek help for as my slick slider is not functioning correct i get a sample from the keenweeler site but seems not working on my part here is my code.There is no error issue that is showing on the debug console so i was puzzled what was wrong. https://jsfiddle.net/pynechan/xhpfgzwy/9/ //CDN <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick

问题 I need to be able to hide the previous button when on the first slide or the next button when on the last slide of the Slick Scoller Carousel. However I cannot seem to find a way to do this with custom buttons. Code currently: <div class="myscroller"> <div class="item" <p>SLIDE 1</p> </div> <div class="item" <p>SLIDE 2</p> </div> <div class="item" <p>SLIDE 3</p> </div> </div> <button id="left" onClick="myPrev()" class="slick-arrow btn btn-primary">Previous</button> <button id="right" onClick=

问题 I have added slick slider to create a slider on my site. Got the dots working and appended them inside a slide as its the only way to get them in the position I want them but now the active state isn't working on the dots. Probably because it is getting included for as many slides as there is. Anyone help me with this? $(document).ready(function() { $('.main-slider').slick({ infinite: true, slidesToShow: 1, slidesToScroll: 1, dots: true, appendDots: '.appendDots', }); }); <div class="flex

问题 I'm using a Slick Slider with CSS animations to make a smooth visual effect, everything works fine but the current slide flashes for a sec at the end of the animation. See the undesired effect in the Snippet. What is causing this? there's a probably solution for this kind of customized animations? $(document).ready(function(){ $('.index-slider').slick({ slidesToShow: 1, slidesToScroll: 1, infinite: true, arrows: false, fade: true, autoplay: true, autoplaySpeed: 8000 }); }); .index-header {

问题 Trying to incorporate slick slider with an API but for some reason it won't work. Not sure if I'm doing something wrong. html <div class="row"> <div id="test"> <div class="card top">Hello! My name is<div class="name">Izzy</div><div class="location">Alamo, CA</div><div class="sex-age">Female, adult</div></div> <div class="card top">Hello! My name is<div class="name">Izzy</div><div class="location">Alamo, CA</div><div class="sex-age">Female, adult</div></div> <div class="card top">Hello! My