Question

I am working on a full width jQuery slider.
I’m stuck at the navigation.
When I click on “1”, it goes to slider 1. on “2”, it goes to slide 2…and so on.
But I want the link color to change to #d45; when the link is active.
I tried adding a a.active class…but it does not seems to work.

Here’s my fiddle

Here’s my code :

HTML

<div class="slider">
    <div class="slide">1</div>
    <div class="slide">2</div>
    <div class="slide">3</div>
    <div class="slide">4</div>
</div>
<ul class="slider-nav">
    <li><a href="#" >1</a></li>
    <li><a href="#" >2</a></li>
    <li><a href="#" >3</a></li>
    <li><a href="#" >4</a></li>
</ul>
<div class="clear"></div>
<div class="content">
    <div class="wrapper">
        <p>Some site content will be here</p>
        <p>Some site content will be here</p>
        <p>Some site content will be here</p>
        <p>Some site content will be here</p>
        <p>Some site content will be here</p>
    </div>
</div>
<div class="footer">
    <div class="wrapper">&copy; www.mysite.com</div>
</div>​

CSS

.clear { clear:both; }
.wrapper { width:980px; margin:0 auto; }
.slider { margin:0 0; height:200px; position:relative;  }
.slider .slide { display:none; background:red; position:absolute; height:200px; width:100%; text-align:center; color:#fff; font-size:24pt; }
.header { background:#eee; font-size:18pt; }
.content { }
.footer { background:#eee; text-align:center; }

.slider-nav { margin: 0 auto; width:100px; clear:both; } 
.slider-nav li { float:left; margin:0 5px; }

.slider-nav li a.active { color:#d45; }
​

jQuery

$('.slider .slide:first').addClass('active').fadeIn(200);

function rotate(index) {
     $('.slider .slide.active').removeClass('active').fadeOut(200, function() { 
         $('.slider .slide:eq(' + index + ')').addClass('active').fadeIn(200);
     });   
}

$('.slider-nav li a').click(function() {    
    var index = $(this).parent().index('li');
    rotate(index);
    return false;
});

setInterval(function() {
    var $next = $('.slider .slide.active').next();

    if ($next.length == 0)
        $next = $('.slider .slide:first');

    rotate($next.index());
}, 2000);​

Any help would be appreciated.

Thank you

Answer 1

See http://jsfiddle.net/5UYmu/3/

$('.slider .slide:first').addClass('active').fadeIn(200);

function rotate(index) {
     $('.slider .slide.active').removeClass('active').fadeOut(200, function() {
         $('.slider .slide:eq(' + index + ')').addClass('active').fadeIn(200);
     });   
}

$('.slider-nav li').click(function() {
    clearInterval(timer);
    $(this).siblings('.active').removeClass('active');
    $(this).addClass('active');
    var index = $(this).index('li');
    rotate(index);
    timer=setInterval(go, 2000);
    return false;
});
$('.slider-nav li:first').click();
var timer=setInterval(go, 2000);
function go() {
    var $next = $('.slider-nav li.active').next();
    if ($next.length == 0){
        $next = $('.slider-nav li:first');
    }
    $next.click();
}

It’s easier if you add the click event to '.slider-nav li' instead of '.slider-nav li a'.

And in order to solve your problem, instead of showing the next .slide, you can click() the next <li> in .slider-nav.

Moreover, I think it’s better if we clear the interval when the user clicks a navigation link. This way we avoid situations like:

• t=0ms. Interval starts
• t=2000ms. Next slide
• t=3900ms. User click a navigation link
• t=4000ms. Next slide