Рекомендовать jQuery отзывчивый карусель/слайдер

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

То, как он должен работать, - показать текущее изображение посередине сайта (определенная ширина и высота изображения, фиксированная для всех изображений, вертикальное изображение по вертикали, высота карусели/слайдера не изменяется с шириной браузера), а частично или полностью видимое следующее изображение справа, предыдущее слева. Когда браузер станет больше, все больше и больше этих "вырезанных" изображений будут видны, если браузер будет достаточно большим, 3 фотографии будут видны полностью, а следующий будет вырезать справа и слева налево. Изображения будут выглядеть как диафильм, с одним изображением в середине и с другими изображениями, видимыми слева и справа, как позволяет окно браузера.

Это изображение показывает, как эта карусель должна вести себя в разных ширинах браузера... Самые темные поля - это выравниваемые по горизонтали фотографии, более светлые боксы вне их показывают разные высоты окна браузера:

Для тех, у кого есть проблемы с визуализацией того, что я говорю, на следующих экранах показано, как должно выглядеть ширина обозревателя шириной окна 1920px, 1800px 1600px и 1400px. Это зерновые культуры всего сайта, заполняющие всю ширину браузера.

Ответ 1

Я искал что-то очень похожее в последние несколько дней. мои фавориты до сих пор

Королевский слайдер

http://dimsemenov.com/plugins/royal-slider/visible-nearby/

этот получил все. сенсорная поддержка, настраиваемый, отзывчивый макет. Вы должны работать в кратчайшие сроки. цена будет 12 $.

carouFredSel

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

это может быть интересно. http://coolcarousels.frebsite.nl/c/2/

Ответ 2

Вы можете использовать:

bxSlider: http://bxslider.com/
FlexSlider: http://www.woothemes.com/flexslider/

Ответ 3

Я бы использовал этот. http://tympanus.net/codrops/2012/03/15/parallax-content-slider-with-css3-and-jquery/ он использует анимацию css3, и поскольку он чист css, вы можете использовать запросы @media для изменения применяемого css на слайдере по мере изменения размера экрана.

Вы можете узнать больше о медиа-запросах, посмотрев на этот шаблон http://www.getskeleton.com/

Ответ 4

Недавно я искал что-то подобное себе и нашел следующую статью: http://www.tripwiremagazine.com/2012/12/jquery-carousel.html

просматривая примеры, представленные в статье и на своих сайтах, и сравнивая их с вашими требованиями, я думаю, http://codecanyon.net/item/icarousel/full_screen_preview/2527180 или http://www.bkosborne.com/jquery-feature-carousel будет наилучшим вариантом. Первый потребовал бы, чтобы вы его купили.

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

Ответ 5

Wowslider может быть полезен в этом случае. http://wowslider.com/jquery-slider-carousel-mac-stack-demo.html

Аналогичное решение также доступно на http://www.smoothdivscroll.com/#quickdemo

Ответ 6

Swipe выглядит довольно прилично и отзывчиво. Он также очень плавный и поддерживает прокрутку на мобильных телефонах/планшетах.

http://swipejs.com/

Возможно, не совсем так полно, как Royal Slider, но он бесплатный.