How to make this carousel work right?

Question

I've made this carousel (image slider) a few years ago and it was working properly until now. I'd like to make it responsive. The problem is that I set the picture's width 100% but the javascript change the parent div's width five times bigger when it put the pictures next to each other therefore the picture(s) is also become bigger and hazy. I spent my whole day to find out how can I solve this so I hope you can help me! :) Thanks a lot!

  function carousel() { var speed = 3000; var timer = setInterval("rotate()", speed); var tabs_number = $(".tab").length; var tab_width = $(".tab").outerWidth(); var offset = tab_width * (-1); var total_width = $("#tabs").width = tab_width * tabs_number; var first_tab = $(".tab:first"); var last_tab = $(".tab:last"); $("#tabs").css({"width" : total_width}); last_tab.insertBefore(first_tab); $("#tabs").css({"left" : offset}); first_tab.addClass("active"); $("#nav-right").click(function() { var active_tab = $(".active"); active_tab.removeClass("active"); active_tab.next().addClass("active"); var left_indent = parseInt($("#tabs").css("left")) - tab_width; $("#tabs:not(:animated)").animate({"left" : left_indent},500,function () { // az elsőt berakjuk az utolsó mögé $("#tabs div:first").insertAfter($("#tabs div:last")); $("#tabs").css({"left" : offset}); }); }); $("#nav-left").click(function() { var active_tab = $(".active"); active_tab.removeClass("active"); active_tab.prev().addClass("active"); var left_indent = parseInt($("#tabs").css("left")) + tab_width; $("#tabs:not(:animated)").animate({"left" : left_indent},500,function(){ $(".tab:last").insertBefore($(".tab:first")); $("#tabs").css({"left" : offset}); }); }); $("#tabs, #nav-left, #nav-right").hover( function() { clearInterval(timer); }, function() { timer = setInterval("rotate()", speed); } ); }; function rotate() { $("#nav-right").click(); } // Client code $(document).ready(function() { carousel(); }); 

  div#wrapper { width: 100%; height: calc(100% - 220px); float: left; margin: 120px auto; overflow: hidden; } div.nav-buttons { width: 100%; height: 100%; float: left; display: flex; flex-direction: row; justify-content: space-between; } div#nav-left, div#nav-right { width: 100px; height: 100%; background-size: 40px; background-repeat: no-repeat; background-position: 50%; z-index: 2; cursor: pointer; } div#nav-left { background-image: url('images/icons/left.png'); } div#nav-right { background-image: url('images/icons/right.png'); } div#nav-left:hover, div#nav-right:hover { background-color: rgba(52, 73, 94,0.5); } div#tabs { width: 100%; height: 100%; position: relative; } div.tab { width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: 50%; } 

  <div id="wrapper"> <div class="nav-buttons"> <div id="nav-left" title="Előző"></div> <div id="nav-right" title="Következő"></div> </div> <div id="tabs"> <div d="tab-first" class="tab"></div> <div id="tab-second" class="tab"></div> <div id="tab-third" class="tab"></div> <div id="tab-fourth" class="tab"></div> <div id="tab-fifth" class="tab"></div> </div> </div> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 

Answer 1

Success! Thanks everything!

 function carousel() { // sebesség var speed = 3000; // időzítő var timer = setInterval("rotate()", speed); // képek száma var images_number = $(".tab").length; // carousel teljes szélessége var carousel_width = $("#tabs").width() * images_number; // a képeket tartalmazó DIV szélessége megegyezik a carousel teljes szélességével var wrapper_width = $("#wrapper").width(); $("#tabs").css({"width": carousel_width}); // az első képre rátesszük az active class-t $(".tab:first").addClass("active"); // következő gombra történő kattintás $("#nav-right").click(function(){ // aktív képet léptetjük eggyel $active_image = $("#tabs div.active").next(); // ha nincs több kép akkor visszaugrunk az elsőre if ($active_image.length==0){ $active_image = $("#tabs div:first"); } // léptetést végrehajtó függvény hívása step(); }); // előző gombra történő kattintás $("#nav-left").click(function(){ // aktív képet léptetjük eggyel vissza $active_image = $("#tabs div.active").prev(); // ha nincs több kép akkor visszaugrunk az utolsóra if ($active_image.length==0){ $active_image = $("#tabs div:last"); } // léptetést végrehajtó függvény hívása step(); }); // ha az egeret a kép vagy a gombok fölé mozgatjuk, megállítjuk az automatikus léptetést $("#tabs, #nav-left, #nav-right").hover( // a clearInterval() metódus törli a setInterval() által beállított időzítőt function() { clearInterval(timer); }, // a setInterval() metódussal meghívjuk a rotate() függvényt a speed változóban meghatározott időközönként function() { timer = setInterval("rotate()", speed); } ); } // léptetést végrehajtó függvény function step() { // össze képről leszedjük az active class-t $("#tabs div").removeClass("active"); // aktív képre rátesszük az active class-t $active_image.addClass("active"); /* Meghatározzuk az eltolás mértékét amit úgy kapunk meg, hogy az akutális kép indexét beszorozzuk a kép méretével. Jelen esetben 800px egy kép szélessége, ezért az eltolás mértéke így fog alakulni: 0, 800, 1600, 2400, 3200... */ var imagesposition = $active_image.index() * $("#tabs div").width(); // images DIV-et eltoljuk az imageposition változóban meghatározott értékkel $("#tabs:not(:animated)").animate({"left": -imagesposition}, 500); } // automatikus léptetést végző függvény function rotate() { $("#nav-right").click(); } 

 div#wrapper { width: 100%; height: calc(100% - 220px); float: left; margin: 120px auto; overflow: hidden; background: #3498db; position: relative; } div.nav-buttons { width: 100%; height: 100%; float: left; display: flex; flex-direction: row; justify-content: space-between; } div#nav-left, div#nav-right { width: 100px; height: 100%; background-size: 40px; background-repeat: no-repeat; background-position: 50%; z-index: 2; cursor: pointer; } div#nav-left { background-image: url('images/icons/left.png'); } div#nav-right { background-image: url('images/icons/right.png'); } div#nav-left:hover, div#nav-right:hover { background-color: rgba(52, 73, 94,0.5); } div#tabs { width: 100%; height: 100%; position: absolute; background: orange; } div.tab { width: calc(100% / 5); height: 100%; float: left; background-size: cover; background-repeat: no-repeat; background-position: 50%; } div#tab-first { background-image: url('../pics/1.jpg'); } div#tab-second { background-image: url('../pics/2.jpg'); } div#tab-third { background-image: url('../pics/3.jpg'); } div#tab-fourth { background-image: url('../pics/4.jpg'); } div#tab-fifth { background-image: url('../pics/5.jpg'); } 

  <div id="wrapper"> <div class="nav-buttons"> <div id="nav-left" title="Előző"></div> <div id="nav-right" title="Következő"></div> </div> <div id="tabs"> <div id="tab-first" class="tab"></div> <div id="tab-second" class="tab"></div> <div id="tab-third" class="tab"></div> <div id="tab-fourth" class="tab"></div> <div id="tab-fifth" class="tab"></div> </div> </div>