jquery horizontaler slider white space issue

Question

Ich arbeite an einem Projekt, wo im horizontalen Schieberegler ich mehrere Produktblöcke zeigen muss. Da es keine feste Anzahl von Produkten gibt, habe ich eine Breite von div 1360% gegeben, welches Problem ich hier habe, ist, wenn Produkte weniger als weiße Leerzeichen sind, die in div zeigen, was von dieser 1360% div Größe offensichtlich ist. Wenn ich die Breite von div auto behalte, dann wird die Designstruktur durcheinander gebracht. Wie kann ich diesen Leerraum vermeiden?

Live-Website hinzu Link - http://foxboxretail.in/

css

.common-blocks { 
    width: 100%; 
    width: 1366%; 
    overflow: hidden; 
    height: auto; 
    transition: all 0.5s; 
    margin-left: 0px; 
} 

In über CSS, wenn ich Breite Auto & max-width halten: 1.360%, dann bekommt Inhalt überlappen

JQuery

<script> 
     var registerEvents = function() { 
      $(".next").off("click").on("click", function (event) { 
       if ($(this).hasClass('disable')) return; 
       $(this).addClass('disable'); 
       window.setTimeout(function() { 
        $(event.target).removeClass('disable'); 
       }, 510); 
       var targetBlock = $(event.target).parents().children(".common-blocks"); 
       var leftMargin = parseInt(targetBlock.css("marginLeft") || 0); 
       var numberOfBlocks = targetBlock.children(".blocks").length; // Total Number of blocks 
       var displayCount = 3;//Number of blocks displaying at a time 
       if (leftMargin <= (numberOfBlocks - displayCount) * (-1024)) // -300 width of block in left direction 
        return; 
       targetBlock.css("marginLeft", parseInt(leftMargin - 1024) + "px") 
      }); 
      $(".prev").off("click").on("click", function (event) { 
       if ($(this).hasClass('disable')) return; 
       $(this).addClass('disable'); 
       window.setTimeout(function() { 
        $(event.target).removeClass('disable'); 
       }, 510); 
       var targetBlock = $(event.target).parents().children(".common-blocks"); 
       var leftMargin = parseInt(targetBlock.css("marginLeft") || 0); 
       if (leftMargin == 0) 
        return; 
       targetBlock.css("marginLeft", parseInt(leftMargin + 1024) + "px") 
      }); 

     }(); 
    </script> 

Weil es dynamische Inhalte, die ich nicht Markup angezeigt werden kann, da Code langwieriger bekommt

Answer 1

Änderung CSS:

.blocks { 
    width: 100% !important; 
    max-width: 249px !important; 
    margin: 5px 0px 0 1px; 
} 

Answer 2

Bild sehen für CSS-Klasse ändern: