Changing CSS when Slide Changes in Cycle2

Question

http://jsfiddle.net/gS8LE/

The effect that I'm going for is when a slide is active, the corresponding slide button (outside of the slideshow container) changes CSS.

I hope this will make the site easier to understand for users; to see a slide and a corresponding change of buttons.

HTML

<!-- BUTTON -->
<a href="#" data-cycle-context=".mySlideshows" 
            data-cycle-cmd="goto" 
            data-cycle-arg="0"> SLIDE 0 
</a>

<!-- SLIDE -->
<div class="mySlideshows" data-cycle-slides="> div">
    <div id="slide-0"> SOME TEXT </div>

CSS
.active { color: red; }

JS
$( '.mySlideshows' ).cycle(

    // Can I change the active CSS rule 
    // here with Cycle's options?

    // When SLIDE 0 is active
    // Change  to have the active class (.active)

);

Answer 1

Using Cycle 2's pager functionality to handle this would be the simplest approach. It's really flexible and shouldn't require you specify the pager template on every slide for something like this. Here's the example html:

<div class="mySlideshows">
    <div><p>Slide text...</p></div>
    <div><p>Slide text...</p></div>
    <div><p>Slide text...</p></div>
</div>

<ul id="custom-pager"></ul>

the JavaScript:

$('.mySlideshows').cycle({
    slides: '> div',
    pager: '#custom-pager',
    pagerTemplate: '<li><a href="">Slide {{slideNum}}</a></li>',
    pagerActiveClass: 'active'
});

and an updated fiddle: http://jsfiddle.net/gS8LE/5/

This works well if you just need your pager links to just show the slide number. However it can be easily modified to also show custom text in the pager link for each slide. You just need to put a data attribute onto your slides. It can be called anything so long as it starts with 'data-cycle-'. Here's the modified html for that:

<div class="mySlideshows">
    <div data-cycle-pager-title="Custom link text">
        <p>Slide text...</p>
    </div>
    <div data-cycle-pager-title="Another link">
        <p>Slide text...</p>
    </div>
    <div data-cycle-pager-title="Final link">
        <p>Slide text...</p>
    </div>
</div>

the updated JavaScript:

$('.mySlideshows').cycle({
    slides: '> div',
    pager: '#custom-pager',
    pagerTemplate: '<li><a href="">{{pagerTitle}}</a></li>',
    pagerActiveClass: 'active'
});

and here's a fiddle for this setup: http://jsfiddle.net/gS8LE/4/

Answer 2

When click on an anchor, you can remove class active from all the anchors inside ul.nav and only add this class active to the clicked anchor:

$('ul.nav li a').click(function () {
    $('ul.nav li a').removeClass('active');
    $(this).addClass('active');
});

Updated Fiddle

Answer 3

Basically (and it's messy) you have to create a pager div and in each slide, add a custom pager template. Then use the CSS rule to handle the active slide.

It's a lot of inline Cycle data attributes. But it works!

http://jsfiddle.net/gS8LE/3/

<div data-cycle-pager-template="<li><a href=# data-cycle-cmd=goto data-cycle-arg=0>SLIDE 1</a> </li>">
<p>Slide Content</p>
</div>

<div id="custom-pager"></div>


    CSS
        .cycle-pager-active {
            background-color: red;
        }

Note: When using data-cycle-pager-template you have to remove all quotations.