I am using center mode in the vertical slider of a slick slider in my project. The demo on their website is always active in the center slide and they have 3 slides in total. But in my case, I have 9 slides and when I apply their setting and make the slides 9, it again actives the second one but I need it to active the center which will e 5th slide.
I am attaching my project screenshot and my code
Javascript Code
$('.slider-for').slick(
{
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: false,
adaptiveHeight: true,
infinite: false,
useTransform: true,
speed: 400,
});
$('.slider-nav').slick(
{
slidesToShow: 9,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: false,
arrows: false,
centerMode: true,
focusOnSelect: true,
vertical: true
});
On there site, In center mode they have six slides but showing 3 slides at a time and scrolling 1 slide per click.
Therfore, *slideToShow * must be the value how many slide you want to show in their case it's 3. not how many slide you have.
I think, you can try putting
slideToShow: 3
Related
Thanks in advance for any help. I have been trying to resolve this for over 48hrs, no matter what I try I hit a wall.
I have a grid (table), I want the size to remain the same 940px across all device sizes and on any small devices for overflow-scroll so overflow can be side scrolled. I am using Webflow builder so I don't want to all custom code. Just hopefully modify the slick slider code or webflow settings.
Image of table -desktop view
I am using slick slider to turn it into a carousel, I disabled all touch/swipes so carousel was not slidable/swippable unless arrow were used.
Code inserted to disable:
swipeToSlide: false,
arrows: false,
draggable: false,
touchMove: false,
swipeToSlide: false,
touchThreshold:0,
Everything on desktop works as expected. However on mobile the carousel shows all three slides, even settings are set to 1
slidesToShow: 1,
slidesToScroll: 1,
AND
responsive: [
{
// tablet
breakpoint: 991,
settings: {
slidesToShow: 1
}
},
{
// mobile portrait
breakpoint: 479,
settings: {
slidesToShow: 1
}
}
]
However on mobile it continues showing all three slides on side scroll, arrows controls scroll one by one.
mobile you can see more than one slide- separated by green side cells
I want to only view one slide on mobile with overflow side scroll grid so you can see full grid but not all three slides.
Ready only: Webflow - Anastasia Stallcop Portfolio
https://preview.webflow.com/preview/anastasiastallcop-09463966869e63530c18a?utm_medium=preview_link&utm_source=designer&utm_content=anastasiastallcop-09463966869e63530c18a&preview=e4ad52b0551c0685b1b170f3fd29714d&pageId=62b67bbd0134354aa31af254&workflow=preview
Published:
https://anastasiastallcop-09463966869e63530c18a.webflow.io/case-study-template-copy-2
HEAD CODE
<style>
.text-contain {pointer-events: none;}
.list::-webkit-scrollbar {
display: none;
}
</style>
BODY CODE
<!-- NEW Dragable Slider -->
<style>
.item {display: inline-block;}
.list {display:block !important;}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
outline: none;
}
.slick-slide, .slick-slide *{ outline: none !important; }
</style>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.min.js"></script>
<script>
// when document is fully loaded
$( document ).ready(function() {
$('.list').slick({
dots: false,
speed: 700,
infinite: true,
swipe: false,
slidesToShow: 1,
slidesToScroll: 1,
swipeToSlide: false,
arrows: false,
draggable: false,
touchMove: false,
swipeToSlide: false,
touchThreshold:0,
responsive: [
{
// tablet
breakpoint: 991,
settings: {
slidesToShow: 1
}
},
{
// mobile portrait
breakpoint: 479,
settings: {
slidesToShow: 1
}
}
]
});
$('.slider-prev').click(function(){
$("#slider-id").slick('slickPrev');
});
$('.slider-next').click(function(){
$("#slider-id").slick('slickNext');
});
});
</script>
I figured it out by complete accident! I was testing a different slider (splide) I had copied from a youtubers website and noticed it would work on that one when I pasted my contents into it but not on my original slider.js, so I noticed the only different was the wrapper width and setting the parent container to overflow-scroll.
So the solution: I had set the wrapper width to wider than my slide/table (940px is my slider so I set wrapper to 1480). I also set overflow on the parent container and it finally worked however before I set it for mobile devices only it was creating a scroll bar with extra space on desktop so I modified desktop to 940px wrapper (remover overflow-scroll) and ipad to mobile devices only to 1480 (with overflow-scroll) - this removed scroll bar and extra space on desktop while being perfect for mobile. YAYYYYY!
I want to use a link to go to a certain slide inside a slick slider.
At the moment I'm using the following code for that (You can see it here: https://codepen.io/cray_code/pen/xxPRLKK):
<div class="slider slider-for">
<div><h3>1</h3></div>
<div><h3>2</h3></div>
<div><h3>3</h3></div>
<div><h3>4</h3></div>
<div><h3>5</h3></div>
</div>
<div class="action">
go to slide 3
go to slide 4
go to slide 5
</div>
And this JS code:
$('.slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
});
$('a[data-slide]').click(function(e) {
e.preventDefault();
var slideno = $(this).data('slide');
$('.slider').slick('slickGoTo', slideno - 1);
});
It works fine to jump do a certain slide.
But I need to mark the current slide inside the navigation as active and add a class .active to the link.
Is that possible?
I know that there is a thing like slider syncing with asNavFor. But I can't use that in my case.
You can add an active class when clicking on those nav items.
You can see it here https://codepen.io/sifat009/pen/VwrmzPm
Here is the code i've changed.
$('.slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
});
$('a[data-slide]').click(function(e) {
e.preventDefault();
var slideno = $(this).data('slide');
$('.slider').slick('slickGoTo', slideno - 1);
$('a[data-slide]').removeClass('active');
this.classList.add('active');
});
I am using react-slick and I am trying to find the solution to go to initial slide on clicking the last slide
I have tried adding afterChange,beforeChange and added slickGoto(0) if nextslide is equal to last-slide-num.Actually nothing happens
I have gone through this... but that is not sufficient
const settings = {
dots: false,
infinite: false,
autoplay: false,
speed: 500,
arrows: true,
slidesToShow:2.7,
beforeChange:(current,next) => {
if(current === 2){
this.slider.slickGoTo(0);
}
},
}
This is the setting
Expected should go to initial slide
You can use this setting
infinite: true
Hii i am trying to slide continuous using owl carousel without delay in single slide and slide should stop immediate on hover.. Can anyone Please Help me out..
check the documentation owl-carosuel you just need to use stopOnHover
$("#owl-demo").owlCarousel({
autoPlay: 3000, //Set AutoPlay to 3 seconds
stopOnHover: true,
items : 4,
itemsDesktop : [1199,3],
itemsDesktopSmall : [979,3]
});
You need to add stopOnHover option to true to your js file. As per the documentation of owl carosuel, if we want to stop slide when we hover over It we can set stopOnHover: true;
and for smooth sliding of the slides you have to use autoplayTimeout option, which help us to set time in ms. So your code should be like this:
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
loop: true,
autoplay: true,
autoplayTimeout: 2000, // 2 sec you can change it as per you choice.(time between tow slide changes).
stopOnHover: true, // To stop sliding on hover.
responsive: {
0: {
items: 1
},
600: {
items: 2
},
1190: {
items: 3
}
}
});
});
I am trying to use the slick Slider to create a slider that allows a user to select the title of the section and see the slide for it but also give the option for it to autoplay.
The stuff works fine. But I need some way to correspond into make it so that when it autoplays, it corresponds to the active navigation and changes it color.
Right now it only show a new color for the active slide title if a user is clicking it. I want it to do so on autoplay also
how would I do that??
Here is the code I have working right now
Js Bin
The only thing I changed is that autoplay option that does not exist on the demo of slick slider
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-nav',
autoplay:true
});
$('.slider-nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: true,
centerMode: true,
focusOnSelect: true
});
If you are using Slick Slider Version: 1.5.5
you will need to call afterChange on().
// function event,slick and index
// version 1.5+ uses slick-current stead of slick-active
$('.slider-for').on('afterChange', function(event,slick,i){
$('.slider-nav .slick-slide').removeClass('slick-current');
$('.slider-nav .slick-slide').eq(i).addClass('slick-current');
});
// remember document ready on this
$('.slider-nav .slick-slide').eq(0).addClass('slick-current');
http://jsfiddle.net/bpbaz10L/
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
autoplay:true,
//trigger after the slide appears
// i is current slide index
onAfterChange:function(slickSlider,i){
//remove all active class
$('.slider-nav .slick-slide').removeClass('slick-active');
//set active class for current slide
$('.slider-nav .slick-slide').eq(i).addClass('slick-active');
}
});
//set active class to first slide
$('.slider-nav .slick-slide').eq(0).addClass('slick-active');
the dm4web answer is perfect if you are showing all the slides you have in your nav slider. If you have more slides that are hidden (say you have 12 slides, but show only 8 in your nav at once), you can do something similar, like
$('.slider-nav').on('afterChange', function(){
$('.slider-nav .slick-slide').removeClass('current');
$('.slider-nav .slick-active:first').addClass('current');
});
//set active class to first slide
$('.slider-nav .slick-active:first').addClass('current');
function _Slider(){
$('#hm-slider ul').slick({
dots: false,
infinite: true,
arrows:false,
autoplay: true,
autoplaySpeed: 5000,
fade: true,
slidesToShow: 1,
slidesToScroll: 1,
asNavFor: '#slider-dots',
});
$('#slider-dots').slick({
slidesToShow: 5,
slidesToScroll: 1,
asNavFor: '#hm-slider ul',
dots: false,
centerMode: false,
focusOnSelect: true,
variableWidth: true,
centerMode: true,
useCSS:true
});
//set active class to first slide
$('#slider-dots .slick-slide').removeClass('slick-active');
$('#slider-dots .slick-slide').eq(0).addClass('slick-active');
$('#hm-slider ul').on({
beforeChange: function(event, slick, current_slide_index, next_slide_index) {
//remove all active class
$('#slider-dots .slick-slide').removeClass('slick-active');
//set active class for current slide
$('#slider-dots .slick-slide[data-slick-index='+next_slide_index+']').addClass('slick-active');
}
});
}