Slick: Slides not changing position when i am showing all slides in slider

[samadiftikhar770]

I am trying to change the position of slide in slider while showing all slides on my page

Example

I have 4 slides

1, 2, 3 , 4

settings for slider is

var settings = {
dots: false,
slidesToShow: 4,
slidesToScroll: 1,
infinite: true
};

when i click on 3rd slide it move to position [0] index from [2] index
and position of slides will be 3 4 1 2

[agustinl]

@samadiftikhar770 you tried with centerMode: true option ?

[samadiftikhar770]

@agustinl yes i have tried that when i am showing alll my slides they don't change there positions

[agustinl]

@samadiftikhar770 could you provide any repo example? or jsfiddle, codepen

[samadiftikhar770]

@austinpray it just if u set in settings of slider we show all number of slides like if i have 5 slides then my slidesToShow in settings will be 5
{slidesToShow:5}

if you see in this example of codepen https://codepen.io/vilcu/pen/ZQwdGQ
if you set slidesToShow:5 then it stop changing position but if you make it slidesToShow:4 then on click it is changing position
I want if i am showing noOfSlides==totalSlides then it will change there position when onClick the slide as above in codepen Example

[agustinl]

Sory @samadiftikhar770

I cant understand your problem exactly.
Pls think in provide a fiddle/codepen example to help you.

[samadiftikhar770]

@agustinl

let me explain you in better way
the codepen example i have provided you if you see it js file you will find this

$('.slider-nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: true,
focusOnSelect: true
});

this is showing 3 slides at moment out of 5 right ? and it is working perfectly fine

if i change the settings to this

$('.slider-nav').slick({
slidesToShow: 5,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: true,
focusOnSelect: true
});

it will now show all 5 slides but now if you click on any slide it stop the functionality of onClick slide moving.

like if you see in when you are showing slides 3

i want to show all my slides which is 5 in the codepen example and when i click on any slide it move at the position of first like it move in a wheel

If i click on slide number 3
then its position will be 3 4 5 1 2

[agustinl]

Hi @samadiftikhar770 , I understand now.
mmm I think that if you show all sliders (5 in this case), the slide movement is nulled.
You can change the nav slider position with jquery , I think slick not have this option.

To use the red buttons with 5 slider in navigation, add this line code:

$('.slider-for').slick('slickGoTo', slideno - 1); - codepen

Let me know if I understood ok, or if I can help with something else
regards

[samadiftikhar770]

hi @agustinl no this is not working for me . dont need navigation button i want when i click on any of the slide it move to position of slide 1

At the moment in codepend slides are like

1 2 3 4 5 in this position
I clicked 4
position will be
4 5 1 2 3

then if i click 3
position will be
3 4 5 1 2
if i click 5
position will be 5 1 2 3 4

[agustinl]

@samadiftikhar770
It is that this will not happen because the navigation slider does not move because it is already showing all the slider.

You can check it here, where I add more slider (8) and I only show 5 in the navigation, so when I click, it moves leaving the one I select first.

Unless there is some slick option that I'm not seeing, or maybe some function has to be put together with the methods and events

[samadiftikhar770]

@austinpray
Thanks for the help. I know i am showing all slides thats why it is not moving i have looked it into deeper i understand how it can happen but with the slick slider i am not able to do that.

my requirement is with all slides i want to move . so in that case i am trying to make it from scratch using css

i hope i will achieve my requirement with that

[agustinl]

OK, if you need any help, here I am :)

Have a good week!