There is a task - to make this slider: Slider example

Chose to implement slick. That's what happened

`http://codepen.io/victorAA/pen/eBGrQM.`

The problem is to make two active slides. Now alone.

Perhaps there are other solutions besides slick slider, I will be glad to hear.

  • I do not know how in the slick slider itself, but in its rocket port there are parameters slidesToScroll, slidesToShow - Duck Learns to Take Cover
  • In general, you will have enough of a slider's slider for the eyes, just take the trouble to read the documentation - Duck Learns to Take Cover

1 answer 1

I recommend that you combine the blocks two by one in one slide so that the markup is like this:

 <div class="slider-wrap"> <div class="slider"> <div class="slider__item"> <img src="http://fillmurray.com/200/200" alt="" /> <img src="http://fillmurray.com/200/200" alt="" /> </div> <div class="slider__item"> <img src="http://fillmurray.com/200/200" alt="" /> <img src="http://fillmurray.com/200/200" alt="" /> </div> <div class="slider__item"> <img src="http://fillmurray.com/200/200" alt="" /> <img src="http://fillmurray.com/200/200" alt="" /> </div> <div class="slider__item"> <img src="http://fillmurray.com/200/200" alt="" /> <img src="http://fillmurray.com/200/200" alt="" /> </div> </div> </div>

And do not forget to reduce the number of displayed slides:

 $('.slider').slick({ slidesToShow: 3, centerMode: true });

Also, do not forget to make an internal element, for example, an inline block, so that it does not wrap onto the following line:

 .slider__item transform: scale(0.8) transition: all 0.6s ease img display: inline-block margin: 0 10px

Full fork of your codepen: http://codepen.io/sandmanisdancing/pen/LbOyPa