Ссылка на слайдер для изменения не присоединения

Question

У меня есть слайдер, у которого есть ссылки внизу, которые хотели бы изменить слайды при нажатии. Попросите «активный» класс работать над обоими элементами, не можете объединить их вместе.

ссылки просто имеют префикс #LINK_NAME

Jquery код:

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"); 

}); 

Вот скрипку: http://jsfiddle.net/k4EU9/

Answer 1

Это должно делать то, что вам нужно, найти индекс щелкнули ссылку, то использовать его для поиска элементов в вашем слайдере

$('.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'); 
}); 

Обновлено js скрипка здесь http://jsfiddle.net/k4EU9/1/

Все, что вам нужно сделать, это добавить свой дисплей: список, который вы сейчас делаете.