jquery carousel - без плагина

Question

Я хочу повернуть свои divs с помощью кнопок next и prev. Я знаю, что есть плагины и т. Д., Но я хочу сделать это сам, только я не слишком уверен, как это сделать.

Так вот HTML-разметку, я до сих пор

<div class="prev-btn"></div> 
<div class="row"> <!-- content in here --></div> 
<div class="row"> <!-- content in here --></div> 
<div class="row"> <!-- content in here --></div> 
<div class="next-btn"></div> 

То, что я хочу сделать, это дисплей 1 строка в то время, и когда я нажимаю на следующей кнопки Prev /, отображать различные DIV , Когда я нахожусь в последней строке, следующий будет отображать первую строку снова.

Я знаю, как делать onclick события и переключать div. Но я действительно не знаю, как определить, в какую строку я включен, и как выбрать следующую для отображения.

Как я могу заставить свои кнопки next/prev работать правильно?

Answer 1

Просто идея о том, как вы можете это сделать ..

var $rotator = $(".container"); 
$rotator.find("div .row:gt(0)").hide(); 

получить Div вы хотите, чтобы показать, и на следующий DIV в списке

var $current = $rotator.find("div .row:visible"); 
var $next = $current.next(); 

Теперь по щелчку следующего сделать это,

if ($next.length == 0) 
    $next = $rotator.find("div .row:eq(0)"); 

$current.hide(); 
$next.show(); 

Аналогично вы можете использовать .prev(), чтобы получить предыдущий родственный DIV.

Вот простой Demo