How to implement such a circular slider?

I usually use slickslider or owlslider. Prompt, in what side to look to implement a similar navigation? 5ca0763f04cd6561448798.jpeg
March 19th 20 at 09:22
1 answer
March 19th 20 at 09:24
Use slick or owl. Make a slide in the center (in settings init the slider). Add the rest of the slides when loading classes. Like so:
slide_change_position function() {
 var first_left_slide = $('.active-slider').prev('.slide-class');
 var second_left_slide = $(first_left_slide).prev('.slide-class');
 var third_left_slide = $(second_left_slide).prev('.slide-class');

 var first_right_slide = $('.active-slider').next('.slide-class');
 var second_right_slide = $(first_left_slide).next('.slide-class');
 var third_right_slide = $(second_left_slide).next('.slide-class');

 $(first_left_slide, first_right_slide).addClass('slide-change-position-1');
 $(second_left_slide, second_right_slide).addClass('slide-change-position-2');
 $(third_left_slide, third_right_slide).addClass('slide-change-position-3');
}

slide_change_position();

To change the position
.slide-class {
 transition: 0.5 s;
}

.slide-change-position-1 {
 margin-top: 100px;
}

.slide-change-position-2 {
 margin-top: 200px
}

.slide-change-position-3 {
 margin-top: 300px;
}

When switching the slide to call again the function. It will find first, second, third slide relative to the main and change the position.
$('.slider-class').on('afterChange', function(event, slick) {
slide_change_position();
});


But the position probably will change only when the slide is completely switched. The position was changed immediately after clicking on the arrow (moving smoothly), you can try to use setInterval() with the condition that each time subtracted from the current margin-top 1px to the right and to set a certain interval. Then the slide will go smoothly to a new position.

This is just an example and maybe it's bad, but I just told you.
And get crap, because the shift elements will move in a straight line to a new position, not around the circumference. Changing classes, it is in principle implemented, it is necessary to move the items on js. - rowan40 commented on March 19th 20 at 09:27

Find more questions by tags HTMLJavaScriptCSS