slick.js

问题 I have a simple slider consisting of images and text-only slides. I'm trying to set a background colour overlay on the slides, but I'm having trouble positioning and setting an exact width of the overlay in percentage. Here's a codepen of what I'm working with: http://codepen.io/anon/pen/RrewXV .slide-text-half { background:rgba(130,20,20,0.8); color:#fff; padding:0px; height:100%; width:inherit; z-index:2; position:absolute; top:0; } Setting a 50% width on the slide-text-half class sends the

问题 I have read this CSS overflow-x hidden and overflow-y visible (and a lot of other posts) but i can't get this to work in my specific case. I'm using ths slick-slider and want to add dropdown-navigation. so i have to use a special markup. The dropdown should overflow the slider. I recreated the problem in the fiddle Thank you for your help! 回答1: Setting overflow-x or overflow-y to hidden causes the other to be treated as if it has a value of auto. So slick-slider adds a scrollbar for any

问题 When I use dynamic data to load the slick content, all the images come one below the other. I do not know why it happens. How do I resolve it? Looks like DOM needs data at initialization itself. View: <slick infinite=true slides-to-show=3 slides-to-scroll=3 settings="slickConfig" data="images"> <div class="slick-item" ng-repeat="image in images"> <div class="Slide-Id"> <p class="slide-id">{{images.indexOf(image)+1}}/{{images.length}}</p> </div> <img src="{{image.url}}" height="100px" width=

问题 Anyone knows possible causes of this error? Uncaught TypeError: Cannot read property 'add' of null I am using slick carousel with React.js. I pass in the images array as a prop and the call the slick function in the image slider component. This component works fine on one page but on a different page I keep seeing this error, images are showing in the slider but I think because of this error other things are breaking on the page, any ideas? Below is the main code for the component, images are

问题 My logo slider shows every slide vertically when loading and it looks terrible when loading and then when loaded it forms correctly. Can someone please let me know how to get rid of this problem please? Here's where the slider is located http://www.customlogoshop.com/logo-design Thanks! 回答1: You could try to hide the images like this: .logo-slider img { display: none; } and make them visible again as soon as slickjs initialized the slider: .logo-slider.slick-initialized img { display: block;

问题 I'm trying to create a slider which contains 4 custom post types per slide. I've managed to get the slider working, but is currently only showing one custom post type per slide. I need to have 4 posts per slide, and I can't seem to figure out how to get that to happen. Does anyone have any advice please? Much appreciated! <script type="text/javascript"> $(document).ready(function(){ $('.courses-slider').slick({ dots: true, infinite: false, speed: 1000, autoplay: true, autoplaySpeed: 4000,

问题 I have a problem with setting slick carousel in mode with sync navigation, to work like this: First transition https://imgur.com/a/Lq1nn Second transition https://imgur.com/a/ywL3D Third transition https://imgur.com/a/SbBbf The way I am doing it now, does not working as it should. $main_topic_slider.on('beforeChange', function(currentSlide){ $main_topic_nav.slick('slickGoTo', currentSlide + 1); console.log('SLIDER:'+$main_topic_slider.slick('slickCurrentSlide')); console.log('NAV:'+$main

问题 I am using react-slick to create a carousel in my project. I've read through the documents and tried different things but could not find a way to customize it exactly the way I need... Does anyone knows if there a way to have the nextArrow show on/in front of the image and not on its right? See image below for desired result: image Thanks for your help! 回答1: If anyone tries to achieve the same result, the way to do it is with some css: .slick-next { right: 25px; } 回答2: You can try this way

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

问题 I added Slick slider for any device under 1024px, however every time a button within the div is clicked and the page is refreshed, the slider is gone and it leaves a mess. It fixes itself if I change the device width from the console. I tried adding a function to reinitialize it every time a button is clicked, but for some reason 'reInit' does not work. I can't provide Jsfiddle, if someone could help based on my description, I would appreciate it. function slickify(){ event.preventDefault();