slick.js

问题 I am trying to implement Slick slider, but calculated width of each slide is wrong (padding on right side of image). <div class="responsive-slick"> <img src="Gallery/large/01.jpeg"> <img src="Gallery/large/02.jpeg"> <img src="Gallery/large/03.jpeg"> <img src="Gallery/large/04.jpeg"> <img src="Gallery/large/05.jpeg"> <img src="Gallery/large/06.jpeg"> </div> $(document).ready(function(){ $('.responsive-slick').slick({ dots: true, mobileFirst:true, prevArrow: '<a class="slick-prev">Previous<

问题 I need to use slick carousel or coverflow like functionality in Angular2 application. Is there a plugin or module provided by npm for the same that can be used in Angular2? One of the Stack Overflow questions talks about this topic but it does not highlight the way to use it. Link here: Slick Carousel with Angular 2. 回答1: Implementation of slick carousel is really easy and you need to do the following: npm install slick-carousel --save --global Then install types $ npm install @types/slick

问题 I'm using the awesome Slick slide on a project. The problem is: I have a carousel with 5 divs inside. 4 images and a video. On mobile (< 768px) I want the slider to show only the images, not the video. I tried to hide the video div by css but that's not working. Any ideas on how to do this? Anyone had this need before? 回答1: Look at the «Filtering» demo at the Slick's documentation. Let's use it to solve the issue. Set breakpoints that you need, using the responsive option. Catch the

问题 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/ 回答1: 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

问题 Here is a fiddle of Slick Carousel embedded in a Bootstrap thumbnail. JSFiddle How can I make the carousel only 200px tall and ensure that the images are scaled proportionally? I can't seem to get the carousel to fit inside a container who's height I dictate. NOTE: Resize your browser after loading this fiddle! This works around a known bug where the plugin layout is not initializing on page load. This is not the issue I'm needing solved. Ignore this issue. HTML <div ng-app="slickExampleApp"

问题 I set up an overlay slick carousel, so when you click on the image a larger carousel appears with the selected image as the initialSlide. However, Slick carousel is adding several blank slides after the initialSlide. The blanks only appear when you click next starting with the third slide. When you click on the previous button the blank slides do not appear. What am I doing wrong? $("#sync1 .item").on("click", function() { var index = $(this).attr("data-slick-index"); $(".overlay-carousel

问题 I have been trying to get a slick slider to work for a few hours now, and after trying all the suggestions on relevant SO questions, nothing has worked. My images are 1080px tall, but slick displays them as 1px tall. FYI, the images have enough transparent space at the bottom and I am planning to move the dots up on top of the image to keep the page without scroll bars. I am also planning to make the navigation arrows smaller, though they should still be on top of the image. I have the entire

问题 I am having a tough time trying to reference the instance of a ngx-slick-carousel from within my component. I have a couple of carousels in a page and I need to unslick and intilize them when I toggle between the two. The only way at the moment that I have been able to reference the slick carousel from my component is if I use the afterChange method and pass the event object from my template. For example In Template <ngx-slick-carousel class="carousel gallery-one" #galleryOne="slick-carousel"

问题 I'm using multiple slick sliders inside a Bootstrap 4 tab navigation. After a great answer from Rory McCrossan (https://stackoverflow.com/a/48400449/1788961), the slider works well inside an hidden container. But I need it to work in combination with two tab content areas. If I'm using two content areas, the slider breaks again. I guess it has something to do with the line .first().trigger('shown.bs.tab'); and the argument .first ?! The next problem is, that the sync between the sliders doesn

问题 I've been trying to create something like this using slick.js, and i really can't get my head around it. I have got the current code in place. How to make the center slide image 100% width and height and add paddings to the slide? It seems to be not working. I'd really appreciate any help. Thanks. $('.slider').slick({ centerMode: true, centerPadding: '30px', slidesToShow: 3, adaptiveHeight: false }); .slick-slide img { max-width: 100%; transition: transform 0.5s; } .slick-slide.slick-center