TouchCarouse dynamically add divs

garyjarrel's Avatar

garyjarrel

15 Aug, 2013 04:09 AM

Hi

I purchased both the RoyalSlider & the TouchCarousel, and am wondering what would be the easiest way to dynamically add divs to the TouchCarousel, ideally what I am trying to achieve is similar to http://www.rei1440project.com/ however using divs. The divs are either 300 or 150 pixes wide and they are the only 2 sizes that I working with.

Thank you

GJ

  1. 1 Posted by garyjarrel on 15 Aug, 2013 10:42 AM

    garyjarrel's Avatar

    Ok after some dirty hacking around I did this and it's partially working:

    /**
     * @proto ID of a div within DOM to add to the carousel
     */
    function add(proto) {
        var slider = $("#timeline");
        var timelineList = $("#timeline ul");
        var obj = $(proto);
        var sliderInstance = $("#timeline").data('touchCarousel');    
        var elementWidth = $(obj).find('div:first').width();
        var container = $('.touchcarousel-container');
    
        var newWidth = $('.touchcarousel-container').width() + elementWidth + 'px';
        $(container).css({ "width": newWidth});
        sliderInstance._totalItemsWidth = sliderInstance._totalItemsWidth + elementWidth;   
    
        var lastLi = $("#timeline li:last");
        $(lastLi).removeClass('last');
        $(timelineList).append("<li class='touchcarousel-item last'>" + $(obj).html() + '</li>');
    
        sliderInstance.numItems = sliderInstance.numItems + 1;
    
        var items = sliderInstance.items
        var lastItem = items[items.length - 1];
        var newPos = lastItem.posX + lastItem.width;
    
        var newObj = {index: lastItem.index +1, item: $(obj), posX: newPos, width: elementWidth};
        sliderInstance.items.push($(newObj));
    
        $(slider).data("touchCarousel").updateCarouselSize();
        var index = $(".last").index();
        sliderInstance.animateTo(index); //does not work even though index is picked up correctly 
    }
    

    I know itt's dirty, but I just need something quick. It''s working ok, but what I have found is that the carousel become infinite to the right and you can keep on scrolling & scrolling even though there is are no elements there. And the last list sliderInstance.animateTo(index) does not work, even though the index is correct as elements are added the animateTo and goTo functions do not work.

    Any thoughts?

    GJ

  2. Support Staff 2 Posted by Dmitry Semenov on 15 Aug, 2013 05:26 PM

    Dmitry Semenov's Avatar

    Hi,

    For now dynamic adding of slides is supported only by RoyalSlider.

    I'm planning to update/release new version of Touchcarousel in a few months, so thank you for sharing the code I'll add something similar to it.

    Dmitry

  3. 3 Posted by garyjarrel on 19 Aug, 2013 09:06 AM

    garyjarrel's Avatar

    Hi Dimiry

    Is it possible to achieve the same layout with div elements and 0 margin between each within the slider as it's seen in the Carousel?

    Thank you

    GJ

  4. Support Staff 4 Posted by Dmitry Semenov on 19 Aug, 2013 03:22 PM

    Dmitry Semenov's Avatar

    @GJ with RoyalSlider all slides must have same width.

  5. 5 Posted by payter86 on 17 Jan, 2014 09:10 AM

    payter86's Avatar

    Hi Dimitry,
    When will be this done? I have manage it in way like garyjarrel did, but its not good sollution, because i need to access to the private variable. Main problem is that, when i have minified version of source, then theres no ._totalItemsWidth variable, but ._h1 or something like that

  6. Support Staff 6 Posted by Dmitry Semenov on 18 Jan, 2014 07:34 PM

    Dmitry Semenov's Avatar

    @payter86, you may use unminified version and minify it with your own "compiler" like http://closure-compiler.appspot.com

  7. 7 Posted by payter86 on 19 Jan, 2014 03:37 AM

    payter86's Avatar

    Thx for suggestion, but its not good sollution, i nned to have it in my mind everytime in future....

    I just need to have methods appendElement() and prependElement() and maybe removeElement(id) out of the box, it shouldlnt be that complicated, will you add this feturest in nearest future pls? thx

  8. 8 Posted by fredrik on 28 Apr, 2015 03:47 PM

    fredrik's Avatar

    I accually resorted to modifying the <UL> list with jQuery, and then rebuilding the whole carousel. Pretty easy to implement, and allows add/remove/sort/etc of items:

    html:

    <div id="mycarouselwrapper">
        <div id="mycarousel" class="touchcarousel grey-blue">
    <ul class="touchcarousel-container"> <li class="touchcarousel-item"><img src=".."/></li> <li class="touchcarousel-item"><img src=".."/></li> </ul> </div> </div>

    javascript:

    // initializes or re-initializes the carousel
    function SetupCarousel() {
        if ($("#mycarousel").data("touchCarousel") != null) {
            // save the items, and destroy & remove
            var html = $("#mycarousel ul").html();
            $("#mycarousel").data("touchCarousel").destroy();
            // insert new carousel with copy of items
            $("#mycarouselwrapper").prepend(
                $("<div id='mycarousel' class='touchcarousel grey-blue'></div>").append($("<ul class='touchcarousel-container'></ul>").append(html))
            ).find("li.last").removeClass("last");
        }
        // setup carousel
        $("#mycarousel").touchCarousel({
            pagingNav: true,
            scrollbar: false,
            directionNavAutoHide: false,
    itemsPerMove: 1,
    loopItems: false,
    directionNav: false, autoplay: false, useWebkit3d: false, dragUsingMouse: true, transitionSpeed: 300 }); }
    say that you've already setup the carousel (using SetupCarousel() at document.ready), and that you now need to add an item. then you would simply:
    $("#mycarousel ul").append("<li class='touchcarousel-item'><img src='..'/></li>");
    SetupCarousel();
    

    Hope this helps anyone!

  9. Support Staff 9 Posted by Dmitry Semenov on 28 Apr, 2015 04:05 PM

    Dmitry Semenov's Avatar

    @fredrik, thanks a lot for sharing, I'm sure it'll help someone.

  10. 10 Posted by jk on 09 Oct, 2017 06:24 AM

    jk's Avatar

    Hey, is dynamic tab adding supported now?

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac