Как реализовать продвинутый слайдер содержимого Javascript?

Question

Я дизайнер, отвечающий за внедрение горизонтального слайдера JS, аналогичного следующему макету (нажмите кнопки со стрелками вправо и влево, чтобы увидеть, к чему я стремлюсь):

http://hovenftp.com/spinscroll/scroll1.html (загрузка может занять некоторое время)

Я много занимался поиском в Google, чтобы найти библиотеку, которую можно настроить для достижения чего-то похожего, но мне не повезло.К сожалению, мне не хватает моих навыков в JS, поэтому я не уверен, с чего бы начать строить его с нуля.Я предполагаю, что что-то, включающее абсолютное позиционирование и условные выражения, может обрабатывать движение синего селектора, но альбомы нужно прокручивать влево и вправо тоже.

Любая помощь или советы будут оценены.

Answer 1

хорошо, структура html такая:

div.viewport -> wrapping the whole slide and defining the 'viewport' of your slider
    div.slider -> this wraps all the single images and has a width of 900000px
        div.img -> this wraps the actual image and has a blue border on 'selected'
        div.img -> another
        div.img -> and another..

ваш javascript будет считать div.img и вычислять ширину div.slider.Затем вы всегда будете проверять, находится ли активный div.img в div.viewport, если нет, установите стиль div.slider влево или margin-left, чтобы он был в окне просмотра.Вот как я разработал ползунки для новостной компании, для которой я работаю (www.20min.ch)

Answer 2

Мне нравится использовать Cycle для подобных вещей.Легкий, хорошо документированный и простой в настройке в соответствии с вашими потребностями.

Answer 3

Как насчет bxslider ?Отметьте Примеры -> Несколько слайдов одновременно