Actually you need a rubber slider with a fixed height or just advice on how to achieve this with the example of any slider. I will be very grateful. Used responsiveslides.com and Flexslider

  • kenwheeler.imtqy.com/slick - HamSter
  • Thanks, but that didn't solve my problem. I need a slider adaptive in width so that it does not exceed a fixed height - Alexander
  • Well, set it up as you need. In general, any slider can be adapted if desired. - HamSter

2 answers 2

Use any slider, for example responsiveslides.com. As a slider element, use a div whose image is set as a background.

background: url(1.jpg) 50% 50% no-repeat; height: 500px; width: 100%;

Then you will have an adaptive slider with a fixed height.

  • I need the images to be loaded from the code (the layout will be stretched on the engine and it will be necessary for them to be manually changed by the user). - Alexander
  • one
    Use inline style pictures for diva and users will be able to edit them. - Sergey Omelchenko

As an option:

 $('.sl-img').each(function(){ var path = $(this).attr('src'); var d = $(this).closest('div'); d.css({ 'background': 'url(' + path + ') center no-repeat', '-webkit-background-size': 'cover', 'background-size': 'cover' }); }); $('.slider').slick({ infinite: true, slidesToShow: 3, slidesToScroll: 1, responsive: [ { breakpoint: 500, settings: { slidesToShow: 1, slidesToScroll: 1, } } ] }); 
 * { box-sizing: border-box; } div { padding: .25rem; } img { max-width: 100%; width: 100%; height: auto; } .slider { padding-bottom: 4rem; position: relative; } .slider div { height: 200px; } .slider div img { display: none; } .slick-arrow { position: absolute; bottom: 0; } .slick-next { left: 7rem; } 
 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <script src="https://code.jquery.com/jquery-1.11.3.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css" /> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script> </head> <body> <div class="slider"> <div><div><img src="https://dummyimage.com/600x400/b8b8b8/fff.png" alt="" class="sl-img"></div></div> <div><div><img src="https://dummyimage.com/900x300/b8b8b8/fff.png" alt="" class="sl-img"></div></div> <div><div><img src="https://dummyimage.com/750x450/b8b8b8/fff.png" alt="" class="sl-img"></div></div> <div><div><img src="https://dummyimage.com/850x350/b8b8b8/fff.png" alt="" class="sl-img"></div></div> <div><div><img src="https://dummyimage.com/500x480/b8b8b8/fff.png" alt="" class="sl-img"></div></div> </div> </body> </html>

Jsbin example

Used plugin - slick slider