Horizontal carousel is getting a gap

Question

I've come across this great stack where you can build a vertical carousel. I implemented my own version of the code to make everything slide horizontally.

It works great, but in order for it to work, you have to know how many images the horizontal gallery will going to have so we can adapt the code to it. Otherwise the images goes below the another. I Does anyone know how to adapt the code to the actual width of the gallery?

window.clients = function($elem) {
    var left = parseInt($elem.css("left"));
    var $cp = $("#clients .client");
    var temp = -1 * $cp.width();
    var guarda = [];

    $cp.each(function () {
        quantos.push($(this).width());
    });

    var quantos = guarda.length();

    if(left < temp) {
        left = $("#clients").width();
        $elem.css("left", left);
    }
    $elem.animate({ left: (parseInt(left)-230) }, 1000, "linear", function () {
        window.clients($(this));
    });
};

$(function () {
    $(document).ready(function() {
        var i = 0;
        $("#clients .client").each(function () {
          $(this).css("left", i);
          i += 230;
          window.clients($(this));
      });
    });

    $(".client").hover( function () {
        $(this).children("h3").stop().fadeIn("fast");
    }, function () {
        $(this).children("h3").stop().fadeOut("fast");
    });
});

score 1 · Answer 1 · answered Oct 02 '14 at 08:12

I changed some code as (please check :- http://jsfiddle.net/rNXs9/1203/). The sample code will give you each inner div's width and the variable will alert total width of all divs.

in css

#verticalScroller > div{
    /*position:absolute;*/
    width:50px;
    height:50px;
    border: 1px solid blue;
    overflow:hidden;
    float: left;
}

in js

 window.clients = function($elem) {
    var left = parseInt($elem.css("left"));
    var $cp = $("#clients .client");
    var temp = -1 * $cp.width();
    var guarda = [];

    $cp.each(function () {
        quantos.push($(this).width());
    });

    var quantos = guarda.length();

    if(left < temp) {
        left = $("#clients").width();
        $elem.css("left", left);
    }
    $elem.animate({ left: (parseInt(left)-230) }, 1000, "linear", function () {
        window.clients($(this));
    });
};

$(function () {
    $(document).ready(function() {
        var i = 0;
        $("#clients .client").each(function () {
          $(this).css("left", i);
          i += 230;
          window.clients($(this));
      });

     ///this is I was changed for your understanding
        var totalinnerdivwidth = 0;
        $( "#verticalScroller" ).find( "div" ).each(function () {
            alert($(this).width());
             totalinnerdivwidth += $(this).width();
             });
        alert(totalinnerdivwidth);
    });
    ///// 

    $(".client").hover( function () {
        $(this).children("h3").stop().fadeIn("fast");
    }, function () {
        $(this).children("h3").stop().fadeOut("fast");
    });

});

Thank you very much, Ajay! I managed to make it almost work. The only problem I'm getting is that after the first iteration there is a gap (the size of a box) between the first and the last boxes. Here's the fiddle: http://jsfiddle.net/GuiHarrison/o8m219v5/ — Digger, Oct 02 '14 at 16:01
Also, is this code to heavy on memory? I have the impression that watching for every single box is too demanding. Is there a way to smooth it up? — Digger, Oct 02 '14 at 16:03

score 0 · Answer 2 · edited May 23 '17 at 11:49

0

I've found the perfect solution! Absolutely not my merit, though, I found this other stack (that perfectly deserves more praise, it's incredible how the answer got so little points). The elegant solution os to scroll, rather than move the elements. That shift in thinking makes the whole code so much dryer and memory free!

Here's my adapted Bin.

edited May 23 '17 at 11:49

Community

1
1

answered Oct 02 '14 at 20:15

Digger

718
1
9
22

Horizontal carousel is getting a gap

2 Answers2