I use the slick slider on my site. And no matter how much I was pulling the slider to the left or to the right, it just runs only on the number of slides that is specified in the property slidesToScroll. Is it possible to do something with slick slider that it worked like this slider http://www.owlcarousel.owlgraphic.com/demos/mousewheel.html. How much do you pulling - it scroll the same distance. Sorry for my english. Thanks you.
There is my code for init slick slide:
$('.slider-wrapper-2').slick({
slidesToShow: 4,
slidesToScroll: 4,
rows: 1
});
Just add the swipeToSlide setting, which enables swiping to any slide irrespectively to slidesToScroll
Your initializing script should look like this:
$('.slider-wrapper-2').slick({
slidesToShow: 4,
slidesToScroll: 4,
rows: 1,
swipeToSlide: true
});
In case it doesn't work, remove the slidesToScroll option. Please comment how it worked so I can edit my answer.
swipeToSlide: true
Adding swipeToSlide option does the job, even with slidesToScroll enabled. No need to disable slidesToScroll.
Related
$('.vendor_slider_fixed ').slick({
dots: false,
arrows:false,
infinite: false,
speed: 300,
slidesToShow: 3,
slidesToScroll: 3
});
Here I have shared screenshot I have implemented slick slider on my website but it showing unexpected behavior after one time scroll it works completely perfect Can you please help me to get rid of this issue? any help would be appreciated
https://prnt.sc/26np6ld
Try to reinitialize it by adding reInit or some other parameter/method. https://kenwheeler.github.io/slick/
I am using slick plugin and I have problem with centering items when there is only one element. My code:
$('#divId').slick({
dots: false,
infinite: true,
speed: 300,
slidesToShow: 1,
centerMode: true,
variableWidth: true
});
If I have few elements in the container everything is OK (centerMode works great) but when I have only one element in slick queue - it goes to the right hand side.
Real example
I couldn't reproduce that problem on jsfiddle. I coppied my code there but everything seems to be ok there: jfFiddle
Does anybody know where is the problem ?
Thanks in advance.
I'm using Slick sliders with two different styles, for my web page but I'm having a problem with arrows.
Can you please help me?
This is my main .slider, I've styled it's prev and next arrows using CSS
http://prntscr.com/7kdpgo
And here I used .filtering class of Slick, but I don't want these arrows. How can I disable them here and add those in the design?
http://prntscr.com/7kdq03
<script>
$('#carouselclass').slick({
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 1500,
arrows : false,
});
</script>
Just set them to null. Job done!
<script>
$('#carouselclass').slick({
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 1500,
prevArrow: null,
nextArrow: null,
});
</script>
From what I see the slider generates with js its own arrows (the ones you want to remove from what i understand). But they have the functionality linked to them, so you want to make them look like those from above the slider and then replace the ones on top with them.
$(document).ready(function(){
$('.your-class-reg').slick({
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
prevArrow: '<a class="your-class-btn-back">Back</a>',
nextArrow: '<a class="your-class-btn-forward">Forward</a>',
rows: 1
});
});
You will have to use the same css class you used for the small top arrows instead of .your-class-btn-back and .your-class-btn-forward. After that you can move them with absolute position, overlapping the ones you initially made, and then get read of the initial ones.
This way they will look like the ones you have on top of your print-screen, and have the necessary functionality.
I have 4 tabs, each containing a carousel. The problem is that only the carousel in the first tab works fine. If you activate the second tabs, the carousel divs are all collapsed.
Here is an example with bootstrap 3 tabs and 'slick' plugin for the carousel: http://www.example.design-way.ro/
I tried multiple tabbing scripts and it's the same problem no matter what I use.
The carousel works fine in the second tab if you try to move it a bit..then it somehow activates.
Is this a plugin initialization problem? Here's how I do it:
$('.carousel').slick({
slidesToShow: 3,
slidesToScroll: 1,
dots: false,
arrows: true
});
Please give me some solution or idea to get this carousel working properly. I tried tweaking the css but I got no result.
I have meet this issue When have 3 tabs, each containing a carousel.
PROBLEM:
The problem is that only the carousel in the first tab works fine.
If you activate the second tabs, the carousel divs are all collapsed.
SOLUTION:
After mail to auther of script for help. We have the resolve:
Moved all CSS files first, followed by all js files
Started javascript of Carousel first and Tabs next
For my sample has used script from:
+ TABs script: Simple-Tabbed-Content-Slider-Plugin-For-jQuery-tabbedcontent
demo: http://www.racotecnic.com/tutorials/tabbedcontent/demo.html
download: http://www.jqueryscript.net/demo/Simple-Tabbed-Content-Slider-Plugin-For-jQuery-tabbedcontent/#tab-1
+ Carousel script: als.musings.it
I'm not familiar with the tabs plugin you used, but you should enable carousel only on active (and visible) tabs only (you should have a callback for tab switching)
I also faced the same problem. The best ever solution I have found in this: http://jsfiddle.net/phpdeveloperrahul/bejFM/
Not only that. bxSlider offers a lot of options those are easy to understand and use. Some of the options I am mentioning in the following section:
mode: 'horizontal',
auto: true,
autoControls: true,
pause: 2000,
maxSlides: 4,
minSlides: 1,
controls: true,
infiniteLoop: true,
moveSlideQty: 1,
slideWidth: 200,
responsive: true,
Hope this will fulfill your need.
So I want to make a little image gallery carousel. Four images across. And you can carousel over to more images. I found bxslider and it seemed like a quick, plug & play, solution. But it's only showing one image per slide.
I think I've followed their directions. But I've obviously done something wrong.
I've left their css and js untouched. My HTML looks like a copy of of theirs. And I put this at the end of their js file:
$(document).ready(function(){
$('.bxslider').bxSlider({
mode: 'fade',
captions: true,
auto: true,
autoControls: false,
minSlides: 4
});
});
Here's the jsfiddle: http://jsfiddle.net/7YH8Q/
Anyone know how I can get this to work?
The problem is you didn't set slideWidth. In order to setup a carousal, you have to provide 3 values, namely : slideWidth, minSlides, maxSlides.
Here's a working fiddle http://jsfiddle.net/hwQ6C/
$('.bxslider').bxSlider({
slideWidth: 200,
minSlides: 4,
maxSlides: 5,
slideMargin: 10
});
Multiple items per slides and fade mode is not currently supported. This has been flaged as an issue. Changing mode is the only option to fix this with bxslider.