Arrow keys are not working with initialSlide

[nitinsinghal123]

Hi

I am using slick slider from https://kenwheeler.github.io/slick/. It is working fine unless I add the initialSlide : 8 in the js.

Yes, it is taking me to the 8th slide, but navigation keys(Please ignore the visibility of these arrow keys) on both sides have stopped working.

Please see the code in https://jsfiddle.net/Lx5nzath/

Please help

[agustinl]

Reference to #2927

set infinite: true

[nitinsinghal123]

Thanks @agustinl for the reply.

2 issues :

1. I do not want the carousel to be repeated. I want to finish this carousel on both sides when they reach the end of values.

2. All the "cloned slides" have removed the id's from their inside div's. Please see, all the inside div's now have the empty id's.

Thanks

[agustinl]

Hi @nitinsinghal123

You set infinite: false and your slider have 12 slides. You show 6 sliders slidesToShow: 6 and start in the position 8 initialSlide : 8 (9 really because the first slide is 0), so you have 3 sliders in the right to complete the twelves (9 + 3 = 12). You can never move to right because not have more sliders to show.

So, I dont know what the slider it does not allow to move to left.

btw, If you set infinite: false and a slidesToShow: 5 the slider works fine. Maybe its a javascript core code issue, and not a configuration problem, but this quick fix help you.

$('.center').slick({
  infinite: false,
  slidesToShow: 5,
  slidesToScroll: 1,
  swipeToSlide : true,
  draggable : true,
  arrows: true,
  initialSlide : 8
});```

[nitinsinghal123]

Thanks, @agustinl for the quick fix.

But in my slider, "Number of slides" & initialSlide are dynamic. It depends on the SQL query results that how many days should be in the slider & which one would be the first slide to be active.

Okay, I will tell you the basic explanation: Normally SQL returns 7-12 days in the query. Then I will set slidesToShow as "7" & initialSlide would be today's date. I hope this will clarify more.

So for that reason, I can not fix initialSlide & I want infinite to be set as false.

Please consider one more situation: Total number of slides : 7 infinite: true slidesToShow: 7 initialSlide : 5

I have created a new JSFiddle for this problem : https://jsfiddle.net/c58tbL32/ This is also creating a problem. I do not understand why ?

[agustinl]

@nitinsinghal123

But you know both options, initialSlide and slidesToShow. You get this value from the query result. So, you can init your slick slider with these options from the SQL query result.

I think you will have to mix php and javascript in your code.

Try create a example in codepen, I dont know why jsfiddle doesnt load slick in your example.

[nitinsinghal123]

@agustinl: Thanks for the reply. Sorry for the delay. I got busy with another project last week. Now I am back with this.

Yes, I am also initializing my slick slider with these options from the SQL query result.

As you said, I have also created a very simple & same example in codepan. Please see https://codepen.io/hello12345678/pen/YzyRWNd

But this is also creating the same problem. I think if we find out what is wrong with this example, we may be able to solve the issue as well.

Please help.

[agustinl]

Hi @nitinsinghal123

I think the problem is if you start the carousel with the same number of slides you have. If you change the slidesToShow to 6 it displays correctly. I think maybe it is some "problem" of the plugin but If it showed all the slides at the same time, it would stop being a carousel, right?

[nitinsinghal123]

Hi @agustinl, Thanks for the reply.

"I think the problem is if you start the carousel with the same number of slides you have." -> Actually I want to show one-week ACTIVE results & the rest of them would be in NON-ACTIVE mode. So if the query has return 9 days, then 7 days would be in the first fold & rest 2 would be in the slider. Sometimes it happens that there are only 7 days to show. So how would I solve this problem ?

"but If it showed all the slides at the same time, it would stop being a carousel, right?" -> But there has to an option in the carousel, when it can show all the slides at the same time. Like in my case, sometimes it happens.

Also, I would prefer infinite: false ... is this possible with above conditions ?

[agustinl]

About you first question, the only way that I can think, it's initialize the slider depends of slides length.

If is more than 7, use slidesToShow: 7. If is less than 7, dont initialize the slider, and create a "fake" css to simulate the same style.

About the second question, apparently there is no utility for a slider that displays the same number of slides as there are. Here are a pull request from someone, that I can think have the same problem of you #2822

And on the third question, I think infinite: true is mandatory for sliders with multiple slides.