Совсем недавно писал подобную штуку..
На мой взгляд, если мы пишем свой велосипед (я, к сожалению, их большой любитель), то нам нужно:
1. написать две функции: а) листание по кнопке влево; б) листание по кнопке вправо.
2. Вёрстка одной карусели должна выглядеть примерно так:
<div class='carusel_container'>
<div class='carousel_slides_box'>
<div class='carousel_slide active'>
//Содержимое слайда
</div>
<div class='carousel_slide'>
//Содержимое слайда
</div>
<div class='carousel_slide'>
//Содержимое слайда
</div>
</div>
<div class='carousel_nav'>
<span class='prev_slide_button'>Left</span>
<span class='next_slide_button'>Right</span>
</div>
</div>
3. Пишем обработчики для двух селекторов:
$('.prev_slide_button').click(function(){
//Вызов функции мотающей слайд назад
})
$('.next_slide_button').click(function(){
//Вызов функции мотающей слайд вперёд
})
А чтобы работало конкретно для одной карусели, нам нужно просто взять $(this) при клике и передать его в соответствующую функцию, а там получить главного родителя нашей карусели, то есть carusel_container, ну а дальше выполнять необходимые манипуляции со слайдами.
Например, так:
$('.prev_slide_button').click(function(){
show_prev_slide($this);
})
Надеюсь, что поможет.
Не ругайте, если что, первый раз на форуме пишу.
|