There is a Carousel Evolution carousel. I need to achieve its adaptive display, but in order for the pictures to remain adequate (not stretch, cut, and become curves) - how can this be achieved? Yoi can have another carousel, but with the same functions: a slide in front, and two semi-transparent ones on the sides with a smooth change
$(document).ready(function() { $('.carousel').carousel({ carouselWidth: 930, carouselHeight: 330, directionNav: true, backOpacity: 0.2, buttonNav: 'bullets' }); }); <link href="https://www.jqueryscript.net/demo/Coverflow-Style-Image-Carousel-Plugin-For-jQuery-Carousel-Evolution/style/content.css" rel="stylesheet" /> <link href="https://www.jqueryscript.net/demo/Coverflow-Style-Image-Carousel-Plugin-For-jQuery-Carousel-Evolution/style/carousel.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> <script src="https://www.jqueryscript.net/demo/Coverflow-Style-Image-Carousel-Plugin-For-jQuery-Carousel-Evolution/scripts/jquery.carousel-1.1.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.11/jquery.mousewheel.min.js"></script> <div class="carousel"> <!-- BEGIN CONTAINER --> <div class="slides"> <!-- BEGIN CAROUSEL --> <div> <!-- SLIDE ITEM --> <a href="#"> <img src="https://0.s3.envato.com/files/43917021/images/slide-1.jpg" /> </a> </div> <div> <a href="#"> <img src="https://0.s3.envato.com/files/43917021/images/slide-2.jpg" /> </a> </div> <div> <a href="#"> <img src="https://0.s3.envato.com/files/43917021/images/slide-3.jpg" /> </a> </div> <div> <a href="#"> <img src="https://0.s3.envato.com/files/43917021/images/slide-4.jpg" /> </a> </div> <div> <a href="#"> <img src="https://0.s3.envato.com/files/43917021/images/slide-5.jpg" /> </a> </div> <div> <a href="#"> <img src="https://0.s3.envato.com/files/43917021/images/slide-6.jpg" /> </a> </div> <div> <img src="https://0.s3.envato.com/files/43917021/images/slide-7.jpg" /> </div> </div> <!-- END SLIDES --> </div> <!-- END CAROUSEL -->