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?
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
Post a Comment