I have a slider here

<!-- main-slider --> <div class='main-slider'> <!-- main-slider chevrons --> <button class='main-slider__chevron-left main-slider__chevron'><i class="fas fa-chevron-left"></i></button> <button class='main-slider__chevron-right main-slider__chevron'><i class="fas fa-chevron-right"></i></button> <div class='slidewrapper' data-current = '0'> <div class='slidewrapper__container'> <img src="http://bsnscb.com/data/out/163/39872064-restaurant-wallpapers.jpeg" class='slidewrapper__img'> <div class='slidewrapper__container-phrase'>Awesome taste</div> </div> <div class='slidewrapper__container'> <img src="http://www.wallpapers4u.org/wp-content/uploads/restaurant_cafe_design_style_tables_chairs_39235_1920x1080.jpg" class='slidewrapper__img'> <div class='slidewrapper__container-phrase'>Cozy atmosphere</div> </div> <div class='slidewrapper__container'> <img src="https://wallpapercave.com/wp/wp1882327.jpg" class='slidewrapper__img'> <div class='slidewrapper__container-phrase'>The best chefs</div> </div> </div><!-- /slidewrapper --> </div><!-- /main-slider --> /* START Main-slider */ .main-slider { width: 100%; height: 400px; overflow: hidden; background-color: #2c3e50; position: relative; top: 40px; } /* Main-slider chevrons*/ .main-slider:hover .main-slider__chevron-right { right: -10px; } .main-slider:hover .main-slider__chevron-left { left: -10px; } .main-slider__chevron { height: 50px; width: 50px; opacity: 0.7; outline: none; background-color: #1e272e; color: white; border: none; z-index: 11; position: absolute; top: 175px; -webkit-transition: 0.2s ease; -moz-transition: 0.2s ease; -ms-transition: 0.2s ease; -o-transition: 0.2s ease; transition: 0.2s ease; } .main-slider__chevron:hover { opacity: 0.95; } .main-slider__chevron-right { border-top-left-radius: 25px; border-bottom-left-radius: 25px; right: -50px; } .main-slider__chevron-left { border-top-right-radius: 25px; border-bottom-right-radius: 25px; left: -50px; } .slidewrapper { width: 100%; height: 100%; margin: 0; padding: 0; position: absolute; top: 0%; left: 0%; } /* Main-slider container */ .slidewrapper__container { width: 100%; height: 100%; position: relative; margin: 0; padding: 0; } /* Main-slider phrase */ .slidewrapper__container-phrase { height: 50px; background-color: rgba(0, 0, 0, 0.7); color: white; line-height: 40px; font-size: 1.8em; letter-spacing: 1px; font-family: Lobster; display: inline-block; padding: 5px 10px; position: absolute; bottom: 50px; left: 70px; } .slidewrapper__container-phrase:hover { background-color: rgba(0, 0, 0, 0.9); cursor: default; } /* Main-slider images */ .slidewrapper__img { width: 100%; height: auto; /* background-clip: border-box; background-origin: padding-box; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover;*/ } /* Media quaries */ @media (max-width: 782px) { .main-slider { top: 25px; } } /* END main-slider */ var slideHeight = jQuery('.main-slider').height(), sliderTimer; jQuery( function () { jQuery('.slidewrapper').width(jQuery('.slidewrapper').children().length * slideHeight); sliderTimer = setInterval(nextSlide, 3000); jQuery('.main-slider__chevron').hover( function () { clearInterval(sliderTimer); }, function(){ sliderTimer=setInterval(nextSlide, 3000); }); }); function nextSlide () { var currentSlide = parseInt(jQuery('.slidewrapper').data('current')); currentSlide++; if(currentSlide >= jQuery('.slidewrapper').children().length) { currentSlide = 0; } jQuery('.slidewrapper').animate({top: -currentSlide * slideHeight}, 300).data('current', currentSlide); } function prevSlide () { var currentSlide = parseInt(jQuery('.slidewrapper').data('current')); currentSlide--; if(currentSlide < 0) { currentSlide = jQuery('.slidewrapper').children().length - 1; } jQuery('.slidewrapper').animate({top: -currentSlide * slideHeight}, 300).data('current', currentSlide); } jQuery('.main-slider__chevron-left').click(function() { prevSlide(); }); jQuery('.main-slider__chevron-right').click(function() { nextSlide(); });

And for some reason, the images in it do not stretch the entire slider. I can not imagine where the error is.

    2 answers 2

    In your script, the fixed width is set to the .slidewrapper block. Modify or delete this line.

    jQuery('.slidewrapper').width(jQuery('.slidewrapper').children().length * slideHeight);

    • Thank you so much! - Eldar Yusupzhanov

    You had to do a simple zeroing of styles.

     var slideHeight = jQuery('.main-slider').height(), sliderTimer; jQuery(function() { jQuery('.slidewrapper').width(jQuery('.slidewrapper').children().length * slideHeight); sliderTimer = setInterval(nextSlide, 3000); jQuery('.main-slider__chevron').hover( function() { clearInterval(sliderTimer); }, function() { sliderTimer = setInterval(nextSlide, 3000); }); }); function nextSlide() { var currentSlide = parseInt(jQuery('.slidewrapper').data('current')); currentSlide++; if (currentSlide >= jQuery('.slidewrapper').children().length) { currentSlide = 0; } jQuery('.slidewrapper').animate({ top: -currentSlide * slideHeight }, 300).data('current', currentSlide); } function prevSlide() { var currentSlide = parseInt(jQuery('.slidewrapper').data('current')); currentSlide--; if (currentSlide < 0) { currentSlide = jQuery('.slidewrapper').children().length - 1; } jQuery('.slidewrapper').animate({ top: -currentSlide * slideHeight }, 300).data('current', currentSlide); } jQuery('.main-slider__chevron-left').click(function() { prevSlide(); }); jQuery('.main-slider__chevron-right').click(function() { nextSlide(); }); 
     * { padding: 0; margin: 0; box-sizing: border-box; } .main-slider { width: 100%; height: 400px; overflow: hidden; background-color: #2c3e50; position: relative; top: 40px; } /* Main-slider chevrons*/ .main-slider:hover .main-slider__chevron-right { right: -10px; } .main-slider:hover .main-slider__chevron-left { left: -10px; } .main-slider__chevron { height: 50px; width: 50px; opacity: 0.7; outline: none; background-color: #1e272e; color: white; border: none; z-index: 11; position: absolute; top: 175px; -webkit-transition: 0.2s ease; -moz-transition: 0.2s ease; -ms-transition: 0.2s ease; -o-transition: 0.2s ease; transition: 0.2s ease; } .main-slider__chevron:hover { opacity: 0.95; } .main-slider__chevron-right { border-top-left-radius: 25px; border-bottom-left-radius: 25px; right: -50px; } .main-slider__chevron-left { border-top-right-radius: 25px; border-bottom-right-radius: 25px; left: -50px; } .slidewrapper { width: 100%; height: 100%; margin: 0; padding: 0; position: absolute; top: 0%; left: 0%; } /* Main-slider container */ .slidewrapper__container { width: 100%; height: 100%; position: relative; margin: 0; padding: 0; } /* Main-slider phrase */ .slidewrapper__container-phrase { height: 50px; background-color: rgba(0, 0, 0, 0.7); color: white; line-height: 40px; font-size: 1.8em; letter-spacing: 1px; font-family: Lobster; display: inline-block; padding: 5px 10px; position: absolute; bottom: 50px; left: 70px; } .slidewrapper__container-phrase:hover { background-color: rgba(0, 0, 0, 0.9); cursor: default; } /* Main-slider images */ .slidewrapper__img { width: 100%; height: auto; /* background-clip: border-box; background-origin: padding-box; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover;*/ } /* Media quaries */ @media (max-width: 782px) { .main-slider { top: 25px; } } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='main-slider'> <!-- main-slider chevrons --> <button class='main-slider__chevron-left main-slider__chevron'><i class="fas fa-chevron-left"></i></button> <button class='main-slider__chevron-right main-slider__chevron'><i class="fas fa-chevron-right"></i></button> <div class='slidewrapper' data-current='0'> <div class='slidewrapper__container'> <img src="http://bsnscb.com/data/out/163/39872064-restaurant-wallpapers.jpeg" class='slidewrapper__img'> <div class='slidewrapper__container-phrase'>Awesome taste</div> </div> <div class='slidewrapper__container'> <img src="http://www.wallpapers4u.org/wp-content/uploads/restaurant_cafe_design_style_tables_chairs_39235_1920x1080.jpg" class='slidewrapper__img'> <div class='slidewrapper__container-phrase'>Cozy atmosphere</div> </div> <div class='slidewrapper__container'> <img src="https://wallpapercave.com/wp/wp1882327.jpg" class='slidewrapper__img'> <div class='slidewrapper__container-phrase'>The best chefs</div> </div> </div> <!-- /slidewrapper --> </div> <!-- /main-slider -->

    • Did not help. The pictures still did not stretch across the entire width of the slider. - Eldar Yusupzhanov