CODEWITHSUNDEEP
jqueryhyperlinkslider
jolen
jolen

Reputation: 191

Slider link to change not joining

I have a slider that has links at the bottom that would like to change the slides when clicked. Have the "active" class working on both elements, Can't join them together.

Links just have a #LINK_NAME prefix

Jquery code is:

var $slider = $('.home-slider'); // class or id of carousel slider
var $slide = 'li'; // could also use 'img' if you're not using a ul
var $transition_time = 1000; // 1 second
var $time_between_slides = 5000; // 5 seconds

jQuery(function ($) {
    slides().fadeOut();

    // set active classes
    slides().first().addClass('active');
    $('.nav-slider a').first().addClass('active');

    slides().first().fadeIn(100);

    // auto scroll
    $interval = setInterval(sliderInterval, $transition_time + $time_between_slides);

    $('.home-slider').hover(function () {
        $interval = clearInterval($interval);
    }, function () {
        $interval = setInterval(sliderInterval, $time_between_slides);
    });
});

function slides() {
    return $slider.find($slide);
}

function sliderInterval() {
    var $i = $slider.find($slide + '.active').index();

    slides().eq($i).removeClass('active');
    $('.nav-slider a').eq($i).removeClass('active');

    slides().eq($i).fadeOut($transition_time);
    $('.nav-slider a').eq($i+1).addClass('active');

    if (slides().length == $i + 1) $i = -1; // loop to start

    slides().eq($i + 1).fadeIn($transition_time);
    slides().eq($i + 1).addClass('active');
}
// Handles navigation for each slide (placed in the nav div)
$('.nav-slider a').click(function() {
   $('.nav-slider a').removeClass("active");
   $(this).addClass("active");

});

Here's the fiddle: http://jsfiddle.net/k4EU9/

Upvotes: 0

Views: 80

Answers (1)

Michael Tempest
Michael Tempest

Reputation: 834

This should do what you need, find the index of the clicked link then use it to search the elements in your slider

$('.nav-slider a').click(function() {
   $('.nav-slider a').removeClass("active");
   $('.home-slider').find('.active').removeClass("active");

   $('.home-slider').find('li:eq(' + $(this).index() + ')').addClass('active');
   $(this).addClass('active');
});

Updated js fiddle here http://jsfiddle.net/k4EU9/1/

All you need to do is add your display:list-item, you are currently doing.

Upvotes: 1

Related Questions