Как добавить слайдер на миниатюры в плагине Nivo Slider?

Я искал это довольно долго и пытался объединить два разных плагина, чтобы это работало, но, похоже, ничего не работает.

Ребята, вы знаете какие-нибудь хорошие ссылки, чтобы добавить ползунок к миниатюрам в ползунке nivo, чтобы вы могли просматривать только 5 миниатюр за раз, и когда вы нажимаете или оставляете область миниатюр, она скользит, чтобы показать следующие 5 миниатюр?

Я попробовал использовать JCarousel и ThumbnailScroller для тега .nivo-controlNav, но ни с одним из них мне не повезло.

Любая помощь будет оценена спасибо!


slider jquery nivo-slider thumbnails
person Jiran Dowlati    schedule 07.04.2012    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Похоже, вам может понадобиться разработать собственное решение. Я бы посоветовал попробовать еще раз с JCarousel, я использовал его в прошлом для того же самого решения и был успешным. В противном случае я не буду писать ваш код за вас, но псевдокод будет выглядеть так:

  1. Перечислите все миниатюры в теге div, который представляет собой высоту (с полями и отступами) миниатюр и автоматическую ширину. Оберните вокруг него div с фиксированной шириной. Например, если у вас есть квадратные миниатюры размером 90 пикселей, и вы хотите иметь отступы по 10 пикселей вокруг каждой, тогда высота контейнера div будет 110 пикселей, а если вы хотите отобразить 5 миниатюр, тогда ваша ширина будет 550 пикселей. Самое главное, чтобы ваше переполнение было скрыто, чтобы другие миниатюры не отображались.
  2. Создайте свои кнопки с обеих сторон.
  3. Одним нажатием кнопки сдвиньте левую позицию миниатюры, удерживающей div, на 550 пикселей (или на любую ширину, которая у вас есть).
  4. Имейте условные операторы, которые проверяют, больше ли левая позиция ширины (достигнут правый предел) или меньше 0 (достигнут левый предел).

Надеюсь, это укажет вам правильное направление!

person cereallarceny    schedule 07.04.2012
comment
Почти получилось, что вы подразумеваете под левой позицией, левым отступом или дать div абсолютную позицию и оттуда повлиять на левый attr? - person Jiran Dowlati; 08.04.2012
comment
Я застрял на том, что если анимировать с помощью marginLeft, он просто делает те же самые изображения, но идет влево на 550 пикселей вместо того, чтобы показывать следующие миниатюры, и если я выбираю тег img, он перемещает их все на marginLeft 550 пикселей и ничего не показывает, как мне это сделать чтобы img ускользал и показывал следующие 5 миниатюр? Это высоко ценится! Спасибо - person Jiran Dowlati; 08.04.2012
comment
Внешний div должен быть относительным по положению, а тот, который обертывает изображения, является абсолютным по положению. Извините, что не уточнил. - person cereallarceny; 08.04.2012