Справка по слайдеру jQuery

Question

Я создаю свой собственный пользовательский слайдер контента, и мне интересно, как лучше всего использовать jQuery.

Я хочу, чтобы две / следующие кнопки были следующими / предыдущими.Когда пользователь нажимает кнопку «Далее», текущий слайд смещается влево и отображается новый слайд.

Как мне поступить в jQuery?Я бы использовал плагин, но он так раздражает, когда дело доходит до настройки.

Код до сих пор:

    <!--Main slider content-->
    <div class="contentslider_content" style=" float:left; width:890px; height:300px; border:1px solid #CCC; overflow:hidden;">

    <div class="contentslider_slides slide_1" style=" float:left; width:890px; height:300px; background-color:#0F3"></div>

    <div class="contentslider_slides slide_2" style=" float:left; width:890px; height:300px; background-color:#ccc"></div>

    <div class="contentslider_slides slide_3" style=" float:left; width:890px; height:300px; background-color:#ccc"></div>

    </div>
    <!--Main slider content-->

<button class="next">Next</button>

<button class="previous">Previous</button>

Answer 1

Это мой подход: http://jsfiddle.net/UpDcS/3/

То, что я делаю, (в основном): все элементы по умолчанию скрыты и расположены абсолютно в области просмотра.Я создал две функции, которые оборачивают логику получения следующего / предыдущего элемента в слайд-шоу, чтобы его можно было бесконечно прокручивать.Скольжение достигается путем установки нового элемента влево / вправо от текущего элемента и перемещения обоих элементов на 100% в эту сторону.После этого (теперь) старый предмет снова скрывается.Я надеюсь, что вы можете выяснить детали.Это должно быть довольно хорошей отправной точкой.

Answer 2

Мой ответ не о самом коде JQ, а о концепции.

Я сам сделал нечто подобное:

1. Создание элементов X, тогда как X - это количество элементов, отображаемых в статической точке (предположим, 1) плюс еще 2, один справа и один слева. Я назвал их «лептер» - «центр» - «правее»
2. Создание массива элементов с содержимым, которое я хочу отобразить (создание html и JQ соберет его в массив JS)
3. Кнопки просто размещают innerHTML элементов lefter, center и rightter.
4. тогда JS выберет один из двух вариантов:
   • перемещение влево = изменение размера лефтера со 100% до 0 (вы можете добавить эффект затухания, когда он равен 5% ..)
   • делает то же самое, но вправо.

И, что касается настройки ... это почти "без стиля", просто css его.

Надеюсь, я понял ваш вопрос, и он отвечает на него. Йосси