Это тот эффект, которого я пытаюсь достичь с помощью карусели Bootstrap 3.
Вместо того, чтобы просто показывать по одному кадру за раз, он отображает N кадров подряд. Затем, когда вы скользите (или когда он скользит автоматически), он сдвигает группу слайдов, как это происходит.
Можно ли это сделать с помощью карусели bootstrap 3? Надеюсь, мне не придется искать еще один плагин jQuery ...
jquery
twitter-bootstrap-3
jquery-plugins
carousel
bootstrap-4
Родриго-Сильвейра
источник
источник
Ответы:
По состоянию на 2013-12-08 ответ отрицательный. Эффект, который вы ищете, невозможен при использовании универсального плагина карусели Bootstrap 3. Однако вот простой плагин jQuery, который, кажется, делает именно то, что вы хотите http://sorgalla.com/jcarousel/
источник
Обновлено 2019 ...
Бутстрап 4
Карусель изменилась в 4.x, и переходы многослайдной анимации можно переопределить следующим образом ...
Bootstrap 4 Alpha.6 Demo
Bootstrap 4.0.0 (показать 4, продвигаться по 1 за раз)
Bootstrap 4.1.0 (показать 3, продвигаться по одному за раз)
Bootstrap 4.1.0 (продвигать все 4 одновременно)
Bootstrap 4.3.1, отзывчивый (показать несколько, продвижение 1) new
Bootstrap 4.3.1 карусель с карточкамиnew
Другой вариант - отзывчивая карусель, которая показывает и продвигает только 1 слайд на небольших экранах. , но показывает, что несколько слайдов - это большие экраны . Вместо того, чтобы клонировать слайды, как в предыдущем примере, этот настраивает CSS и использует jQuery только для перемещения дополнительных слайдов, чтобы обеспечить непрерывный цикл (циклический переход):
Пожалуйста, не просто копируйте и вставляйте этот код. Во-первых, разберитесь, как это работает.
Bootstrap 4 Responsive (показать 3, 1 слайд на мобильном устройстве)
Пример - Bootstrap 4 Responsive (показать 4, 1 слайд на мобильном устройстве)
Пример - Bootstrap 4 Responsive (показать 5, 1 слайд на мобильном устройстве)
Бутстрап 3
Вот пример 3.x на Bootply: http://bootply.com/89193
Вам нужно поместить в активный элемент целый ряд изображений. Вот еще одна версия, в которой изображения не складываются при меньшей ширине экрана: http://bootply.com/92514
ИЗМЕНИТЬ Альтернативный подход для продвижения по одному слайду за раз :
Используйте jQuery для клонирования следующих элементов ..
И затем CSS для соответствующего позиционирования ...
До 3.3.1
После 3.3.1
Это покажет 3 раза, но только слайды по одному :
Демо Bootstrap 3.x
Пожалуйста, не копируйте и не вставляйте этот код. Во-первых, разберитесь, как это работает. Этот ответ здесь, чтобы помочь вам узнать .
Удвоение этой модифицированной карусели начальной загрузки 4 работает только наполовину (цикл прокрутки перестает работать),
как сделать 2 слайдера начальной загрузки на одной странице, не смешивая их css и jquery?
Bootstrap 4 Multi Carousel показывает 4 изображения вместо 3
источник
Все вышеперечисленные решения хакерские и содержат ошибки. Даже не пытайся. Используйте другие библиотеки. Лучшее, что я нашел - http://sachinchoolur.github.io/lightslider Отлично работает с bootstrap, не добавляет ненужный html, легко настраивается, отзывчивый, удобный для мобильных устройств и т. Д.
источник
Это рабочий бутстрап для твиттера 3.
Вот javascript :
И css :
Вы можете увидеть это в действии на этом Jsfiddle
Причина, по которой я добавил этот ответ, потому что другие не работают полностью. Я обнаружил внутри них 2 ошибки, одна из них заключалась в том, что стрелка влево создавала странный эффект, а другая касалась выделения текста жирным шрифтом в некоторых ситуациях, который можно решить, установив цвет фона, чтобы нижний элемент не был виден во время перехода эффект.
источник
Это то, что у меня сработало. Очень простой jQuery и CSS, чтобы адаптивная карусель работала независимо от каруселей на одной странице. Широко настраиваемый, но в основном div с белым пространством nowrap, содержащий кучу встроенных блочных элементов и помещающий последний в начало для перемещения назад или первый в конец для перемещения вперед. Спасибо
insertAfter
!источник
Обновление 2019-03-06 - Bootstrap v4.3.1
Кажется, что новая версия Bootstrap добавляет
margin-right: -100%
к каждому элементу, поэтому в отзывчивом решении, приведенном в наиболее популярном ответе здесь , это свойство должно быть сброшено, например:Рабочий код с v4.3.1 в LESS .
источник
Самый популярный ответ правильный, но я считаю, что код бесполезно сложен. Я считаю, что с тем же css этот код jquery легче понять:
источник
попробуйте это ..... он работает в моем .... код:
источник
источник
У меня была та же проблема, и описанные здесь решения работали хорошо. Но я хотел поддержать изменение размера окна (и макета). В результате получилась небольшая библиотека, которая решает все вычисления. Проверьте это здесь: https://github.com/SocialbitGmbH/BootstrapCarouselPageMerger
Чтобы скрипт заработал, вам нужно добавить новую
<div>
оболочку с классом.item-content
прямо в ваш.item
<div>
. Пример:Использование этой библиотеки:
Чтобы изменить настройки:
Пример:
Как видите, карусель обновляется, чтобы отображать больше элементов управления при изменении размера окна. Проверьте
watchWindowSizeTimeout
настройку для управления тайм-аутом для реакции на изменение размера окна.источник
источник
Я видел ваши вопросы и ответы и создал новую адаптивную и гибкую многоэлементную карусель Gist. Вы можете видеть это здесь:
https://gist.github.com/IVIR3zaM/d143a361e61459146ae7c68ce86b066e
источник
Вы можете добавить несколько тегов li в ol, которые имеют атрибут как класс со значением «carousel-sizes», а с data-slide-to имеют последовательные значения, такие как от 0 до 6 или от 0 до 9.
чем вам просто нужно скопировать и вставить div, у которого есть атрибут как класс со значением «item».
У меня это работает.
источник
Ссылка на ссылку выше Я добавил 1 новую вещь под названием show 4 at time, слайд по одному для начальной загрузки 3 (v3.3.7)
CODEPLY : - https://www.codeply.com/go/eWUbGlspqU
ЖИВОЙ СНИППЕТ
источник