javascriptjqueryhtmlcssmobify

jQuery Tabs activate on Carousel with Mobify

I need to be able to have a tab menu above my Carousel, which when clicked on will move the carousel to the associated package within the carousel.

Also when the carousel is swiped the tabs will move accordingly to what package you swipe to. So the active tab will change if you swipe and vise-versa.

I have put together a demo, all working apart from linking up the tabs and carousel. I am totally lost at how to do this.

My DEMO code and example: - http://jsfiddle.net/jnYs7/

<ul id="navlist">
   <li>BASIC</li>
   <li class="activeStep">STANDARD</li>
   <li>SUPER</li>
   <li>ANTOHER</li>
</ul>

Plugin is using: http://www.mobify.com/mobifyjs/modules/carousel-examples/

Hope someone can help out. Thanks

Solution

  • An example: http://jsfiddle.net/jnYs7/3/

    What I did was move the #navlist inside of the .m-carousel and added <a> with data-slide='number_here' attribute to the <a>, making it a pagination. I also changed your activeStep class name to m-active.

    Now you only need to style it.

    UPDATE http://jsfiddle.net/jnYs7/10/

    Change the margin-right here to define the distance between the divs

    .m-center:not(.m-fluid) > .m-carousel-inner > *:not(:first-child),
.m-center:not(.m-fluid) > .m-carousel-inner > *:not(:last-child){
    position: relative;
    float: left;
    left:40px;
    margin-left:0px;
    margin-right:-30px;
}

    I didn't find any reference to the starting point but you can use something like .trigger() from jquery that will trigger the click event on a link

    $('#navlist li:eq(2) a').trigger('click'); 
//:eq() is the index of li (in this case super)

    In the updated fiddle I changed some css in overall, compare the fiddle for missing CSS.