css - jquery horizontal slider white space issue -


i working on project in horizontal slider need show multiple products blocks. since there not fix number of products have given width of div 1360% problem facing here if products less white spaces showing in div obvious of 1360% div size. if keep width of div auto design structure messes. how can avoid white space?

enter image description here

live site link - http://foxboxretail.in/

css

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

in above css if keep width auto & max-width:1360% content gets overlap

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 @ 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> 

because it's dynamic content can't display markup since code gets lengthy

change css:

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

Comments

Popular posts from this blog

Spring Boot + JPA + Hibernate: Unable to locate persister -

go - Golang: panic: runtime error: invalid memory address or nil pointer dereference using bufio.Scanner -

c - double free or corruption (fasttop) -