0

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

henryh15
  • 25
  • 2
Mucky Paws
  • 23
  • 1
  • 6

1 Answers1

0

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.

Spokey
  • 10,741
  • 2
  • 23
  • 40
  • ...Dont suppose you know how it would be possible to center the active image. Then the left and right image slightly revealed (as it currently is on the right hand side). But also on the left, evenly spaced out? Been trying this all night and cant get it working. Its similar to the Facebook app when people upload >3 images on your timeline? Thanks anyway tho, great help! – Mucky Paws May 18 '13 at 21:18
  • I could center it but I have no idea how to reveal the right and left. http://jsfiddle.net/jnYs7/4/ (I changed the plugin code a little by adding +45 to delta variable) – Spokey May 18 '13 at 21:37
  • + quick tip you have to change the margins of `m-center` to get your effect with the right and left images – Spokey May 18 '13 at 21:46
  • cheers, ill copy it all in to a html page tomorrow, been looking for ages via inspect element but cant find the m-center class with the margin elements to adjust the margins. Thanks for your help – Mucky Paws May 18 '13 at 22:32
  • still no joy, every time i affect the margin the top nav indents too and cant get them to line up evenly each side. – Mucky Paws May 19 '13 at 08:47
  • hi, if you scroll through the packages, i have made the gap closer on one side but cant figure out how to do the same on the other side? http://jsfiddle.net/jnYs7/6/ Also on page load how would you make a particular package the active one? For example "Super" package? Thanks – Mucky Paws May 20 '13 at 20:08
  • +1 again, thanks! how did you do it? Exactly what i was after, cheers – Mucky Paws May 20 '13 at 21:32