Hello, how can you implement a similar animation switching slider points. About how here
As it should be: when you click on a point, it becomes strictly centered, the others are aligned under it.
That's what I did when clicking on a point, it becomes centered, but how to make other points move relatively active? Tell me how it is possible to implement?
var ww = jQuery(window).width(); jQuery('.dots li').each(function (i) { jQuery(this) .css('right', (ww/2 - i*50)-20 +"px") .attr('data-count',i); }); jQuery('.dots li').click(function () { jQuery(this).animate({ right: (ww/2)-20 },500); }) .intro_temp{ width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #000000; } .dots{ height: 70px; width: 100%; display: flex; align-items: center; position: relative; transition: all 1s ease; } .dots li{ transition: all 1s ease; height: 50px; width: 50px; display: inline-block; border: 1px solid $white; margin: auto ; position: absolute; top: 0; bottom: 0; right: 0; cursor: pointer; transform: rotate(45deg); } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section class="intro_temp"> <ul class="dots"> <li> <button></button> </li> <li> <button></button> </li> <li> <button></button> </li> <li> <button></button> </li> </ul> </section> 
