Bootstrap carousel не работает

Не работают кнопки слайдера Bootstrap Carousel

Мой слайд карусели Bootstrap не работает, хотя я пробовал здесь другие ответы (один из них — это.

Но почти все они не работают и устарели, хотя они решают большинство других проблем (что, кажется, не работает на мне)

Большая часть кода взята из пакета сниппетов Bootstrap из Visual Studio 2017 (расширение)

JS: (скопировал код здесь)

Я также пробовал другой код на некоторых веб-сайтах, и, похоже, я не могу найти ответ или решение своей проблемы.

2 ответа

В вашей разметке есть несколько ошибок. Ссылка Bootstrap CSS CDN отсутствует. Каждый слайд в вашей разметке имеет идентификатор id=»#my-carousel» . Идентификаторы должны быть уникальными.

Вот два рабочих примера слайдеров Bootstrap. Один использует атрибуты данных, а другой — инициализацию JavaScript и внешние элементы управления.

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

• В опубликованном вами коде не было загрузочного css. Не уверен, что вы пропустили это в своем собственном проекте, но я добавил ссылку на CDN.
• Ссылка на bootstrap js выдает ошибку (ищется объект Popper ?). Я переключился с бета-версии на стабильную версию бутстрапа, и все заработало.
• Я полностью исключил ваш пользовательский jquery: bootstrap css может использовать разметку html, чтобы знать, когда переходить дальше, назад и т. Д.

Последнее замечание: я не менял его, но почему в каждом элементе есть id=»#my-carousel» ? Я думаю, что только внешний div (с классом carousel ) нуждается в id=»my-carousel» (без символа решетки), а остальные можно удалить.

Источник

Bootstrap 3 Карусель не работает

Моя карусель из Bootstrap не отображает мои изображения или не реагирует на элементы управления.

Ошибок в консоли Chrome нет, и код почти такой же, как и в примерах Bootstrap.

Это то, что выглядит на моем сайте:

Здесь есть только две незначительные вещи.

Первый находится в следующих пунктах списка индикаторов карусели:

Вам необходимо передать атрибут data-target селектору, который означает, что перед ID должен стоять префикс # . Поэтому измените их на следующее:

Во-вторых, вам нужно дать отправную точку карусели, чтобы и элементы индикатора карусели, и внутренние элементы карусели должны иметь один active класс. Как это:

Ну, Bootstrap Carousel имеет различные параметры контроля.

Интервал: задает задержку (в миллисекундах) между каждым слайдом.

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

wrap: Указывает, должна ли карусель проходить через все слайды непрерывно или останавливаться на последнем слайде

Для вашей справки:

Для более подробной информации нажмите здесь.

Надеюсь, что это поможет вам 🙂

Примечание. Это для дальнейшей помощи. Я имею в виду, как вы можете настроить или изменить поведение по умолчанию после загрузки карусели.

Вот изменения, которые необходимо выполнить.

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

Вы пропустили «#» для цели данных и добавили активный класс для первого элемента

Недавно я помогал другу выяснить, почему их карусель не работает. Элементы управления не будут работать, и изображения не будут переходить. У меня был рабочий образец на странице, которую я использовал, и мы просмотрели весь код, включая проверку пунктов выше в этом посте. Мы вставили «хорошую» карусель в ту же страницу, и она все еще работала. Теперь все файлы CSS и начальной загрузки были одинаковыми для обоих. Код теперь был идентичен, поэтому мы могли попробовать только изображения.

Итак, мы заменили изображения двумя, которые работали в моем образце. Это сработало. Мы заменили два изображения на первые два, которые изначально не работали, и это сработало. Мы добавили обратно каждое изображение (все jpegs) один за другим, и когда мы добрались до седьмого изображения (из 18), карусель не удалась. Weird. Мы удалили это одно изображение и продолжили добавлять оставшиеся изображения, пока все они не были добавлены и карусель не заработала.

для справки мы использовали jquery-3.3.1.slim.min.js и bootstrap/4.3.1/js/bootstrap.min.js на этом сайте.

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

Тестовая карусель с ограниченным набором «известных к хорошему» изображений.

Источник

Карусель

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

Как это работает

«Карусель» — это слайд-шоу для отображения серии содержимого, созданная на основе CSS 3D-трансформаций и немного на JavaScript. Она работает с текстом, изображениями или обычной разметкой. Она также поддерживает кнопки “next/prev”.

В браузерах с поддержкой API видимости страниц элементы карусели не будут сменяться, когда страница невидима пользователю (например, когда вкладка браузера неактивна, или окно браузера «минимизировано» — кнопка «квадратик» слева от крестика «закрыть браузер», и т.д.).

Учтите, что вложенные карусели не поддерживаются, а карусели в целом не очень желательны «стандартам доступности».

Пример

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

Класс .active добавляют к одному из слайдов, иначе карусель не будет видно. Также для внедрения элементов управления необходимо задать уникальный ID элементу класса .carousel , особенно если у вас много каруселей на одной странице. Элементы управления и индикаторы должны иметь атрибут data-target (или href для ), который совпадает с ID элемента класса .carousel .

Задавайте уникальный id классу .carousel для возможности гибкого управления, особенно если вы используете много каруселей на странице.

Только слайды

Вот пример карусели, где есть только слайды. Заметьте присутствие классов .d-block и .w-100 , отменяющих дефолтное выравнивание изображений в браузерах у изображений карусели.

С элементами управления

Добавляет кнопки prev/next:

С индикаторами

Вы также можете добавить индикаторы к карусели, наряду с органами управления.

С надписями

Добавляйте надписи в ваши слайды с помощью добавления элемента класса .carousel-caption в любой элемент карусели класса .carousel-item . Надписи легко скрыть на меньших устройствах, используя утилиты отображения элементов. Они спрятаны первоначально с помощью класса .d-none и показываем их опять на средних устройствах с помощью класса .d-md-block .

Метка первого слайда

Некоторый репрезентативный заполнитель для первого слайда.

Метка второго слайда

Некоторый репрезентативный заполнитель для второго слайда.

Метка третьего слайда

Некоторый репрезентативный заполнитель для третьего слайда.

Склейка (плавный переход)

Добавьте .carousel-fade в вашу карусель для анимации слайдов с постепенным переходом на следующий слайд.

Индивидуальный интервал .carousel-item

Добавьте data-interval=»» к элементу .carousel-item , чтобы изменить время задержки между автоматическим циклическим переходом к следующему элементу.

Отключенный сенсорный свайпинг

Карусели поддерживают смахивание влево/вправо на устройствах с сенсорным экраном для перемещения между слайдами. Это можно отключить с помощью атрибута data-bs-touch . Пример ниже также не включает атрибут data-bs-ride и имеет data-bs-interval=»false» , поэтому он не запускается автоматически.

Темный вариант

Добавьте .carousel-dark к .carousel для отображения более темных элементов управления, индикаторов и подписей. По умолчанию элементы управления инвертированы и смотрятся более темными по сравнению с их белой заливкой благодаря свойству CSS filter . Заголовки и элементы управления имеют дополнительные Sass переменные, которые настраивают цвет color и цвет фона background-color .

Метка первого слайда

Некоторый репрезентативный заполнитель для первого слайда.

Метка второго слайда

Некоторый репрезентативный заполнитель для второго слайда.

Метка третьего слайда

Некоторый репрезентативный заполнитель для третьего слайда.

Изменение продолжительности перехода

Длительность перехода .carousel-item может быть изменена с помощью переменной Sass $carousel-transition-duration перед компиляцией или настраиваемыми стилями, если вы используете скомпилированный CSS. Если применяется несколько переходов, убедитесь, что сначала определен переход преобразования (например, transition: transform 2s ease, opacity .5s ease-out ).

Переменные

Использование

Через атрибуты

Используйте атрибуты данных, чтобы легко контролировать положение карусели. data-bs-slide принимает ключевые слова prev или next , которые изменяют положение слайда относительно его текущего положения. В качестве альтернативы, используйте data-bs-slide-to , чтобы передать необработанный индекс слайда в карусель data-bs-slide-to=»2″ , который сдвигает положение слайда на конкретный индекс, начинающийся с 0 .

Атрибут data-bs-ride=»carousel» используется для пометки карусели как анимированной, начиная с загрузки страницы. Если Вы не используете data-bs-ride=»carousel» для инициализации карусели, Вам придется инициализировать ее самостоятельно. Его нельзя использовать в сочетании с (избыточной и ненужной) явной инициализацией JavaScript той же карусели.

Через JavaScript

Вызов карусели вручную с помощью:

Параметры

Параметры можно передавать через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя параметра к data-bs- , как в data-bs-interval=»» .

Если задано значение ‘hover’ , приостанавливает цикл карусели на mouseenter и возобновляет цикл карусели на mouseleave . Если установлено значение false , при наведении курсора на карусель она не приостанавливается.

На устройствах с сенсорным экраном, когда установлено значение ‘hover’ , цикл будет приостанавливаться на touchend (после того, как пользователь закончит взаимодействие с каруселью) на два интервала, прежде чем автоматически возобновляется. Обратите внимание, что это в дополнение к описанному выше поведению мыши.

Наименование	Тип	По умолчанию	Описание
interval	number	5000	Время задержки между автоматическим циклическим переключением элемента. Если false , карусель не будет автоматически повторяться.
keyboard	boolean	true	Должна ли карусель реагировать на события клавиатуры.
pause	string | boolean	‘hover’
ride	string | boolean	false	Автоматически отображает карусель после того, как пользователь вручную перебирает первый элемент. Если установлено значение ‘carousel’ , карусель автоматически отображается при загрузке.
wrap	boolean	true	Должна ли карусель работать непрерывно или иметь жесткие остановки.
touch	boolean	true	Должна ли карусель поддерживать взаимодействие смахивания влево/вправо на устройствах с сенсорным экраном.

Методы

Асинхронные методы и переходы

Все методы API асинхронны и запускают переход. Они возвращаются функции, вызвавшей их, с началом перехода, но до его конца. Плюс, вызов метода к компоненту, выполняющему переход, будет проигнорирован.

Вы можете создать экземпляр карусели с помощью конструктора карусели, например, для инициализации с дополнительными параметрами и начала циклического перебора элементов:

Метод	Описание
cycle	Перебирает элементы карусели слева направо.
pause	Не дает карусели перебирать элементы.
prev	Переходит к предыдущему элементу. Возврат к вызывающему абоненту до того, как был показан предыдущий элемент (например, до возникновения события slid.bs.carousel ).
next	Переход к следующему элементу. Возврат к вызывающему абоненту до того, как будет показан следующий элемент (например, до того, как произойдет событие slid.bs.carousel ).
nextWhenVisible	Не переключать карусель на следующую, если страница не отображается или карусель или ее родительский элемент не видны. Возврат к вызывающему абоненту до того, как будет показан целевой элемент
to	Циклически переключает карусель на конкретный кадр (на основе 0, аналогично массиву). Возврат к вызывающему абоненту до того, как будет показан целевой элемент (например, до того, как произойдет событие slid.bs.carousel ).
dispose	Уничтожает элемент карусели. (Удаляет сохраненные данные в элементе DOM)
getInstance	Статический метод, позволяющий получить экземпляр карусели, связанный с элементом DOM.

События

Класс карусели Bootstrap предоставляет два события для подключения к функциональности карусели. Оба события имеют следующие дополнительные свойства:

• direction : Направление, в котором движется карусель ( «left» или «right» ).
• relatedTarget : Элемент DOM, который вставляется на место как активный элемент.
• from : Индекс текущего элемента
• to : Индекс следующего элемента

Все события карусели запускаются в самой карусели (т.е. в

Источник

Bootstrap — Carousel (карусель)

В этой статье рассмотрим как на страницу, к которой подключён Bootstrap 3 или 4 версии, добавить карусель или слайдер. Содержимое слайдов карусели может быть разнообразным: текстовым, в виде изображения или другого контента.

Что такое карусель

Carousel (карусель) – это элемент интерфейса для демонстрации на сайте серии изображений (слайдов). Каждое изображение (слайд) демонстрируется обычно несколько секунд, пока не сменится следующим. Смена изображения (слайда) может осуществляться как автоматически через равные промежутки времени, так и вручную.

Слайд в Bootstrap карусели может быть представлен не только изображением , но и текстовым контентом . Кроме этого при создании слайда можно использовать разметку.

В Bootstrap компонент Carousel построен с помощью технологии CSS 3D Transforms и кода JavaScript.

Карусель в Bootstrap реализована с использованием Page Visibilty API . Это означает, что если браузер поддерживает этот API , то карусель не будет осуществлять автоматическую смену слайдов до тех пор, пока она не будет видна пользователю. Например, до тех пор, пока вкладка, содержащая карусель, будет находиться в не активном или свёрнутом состоянии.

Фреймворк Boostrap 3 и 4 не позволяет создавать вложенные карусели.

Карусель без элементов управления

Компонент Carousel автоматически не нормализует размеры изображений (слайдов) . Таким образом, могут потребоваться дополнительные утилиты или стили, чтобы привести содержимое к необходимому размеру.
Один из примеров, как это выполнить с помощью CSS, можно посмотреть в этой статье.

Важно! Класс active необходимо добавить к одному из слайдов. Если это не выполнить, то карусель не будет отображаться.

HTML-разметка карусели в Bootstrap 3:

HTML разметка карусели в Bootstrap 4 отличается только классом item . Вместо него необходимо использовать carousel-item . Кроме этого в Boostrap 4 к изображениям, для придания им адаптивности, необходимо добавить класс img-fluid .

HTML-разметка карусели в Bootstrap 4:

Атрибут data-ride=»carousel» запускает автоматическую смену слайдов карусели после загрузки страницы. Если инициализация карусели выполняется с помощью JavaScript, то этот атрибут не нужно использовать.

Карусель с элементами управления

Важно! Карусель с элементами управления и (или) с индикаторами слайдов должна иметь id . А элементы управления и индикаторы слайдов должны иметь атрибут data-target (или href для ссылок), значение которого должно указывать на карусель (т.е. состоять из # и id ).

HTML разметка карусели с элементами управления для перехода к предыдущему и следующему слайду:

Поведение кнопок «Предыдущий» и «Следующий» определяется в карусели с помощью атрибута data-slide .

Значение prev данного атрибута связывает с кнопкой определённые действия, с помощью которых она будет осуществлять смену текущего слайда на предыдущий . Значение next связывает с кнопкой соответственно другие действия, которые будут выполнять смену текущего слайда на следующий .

Карусель с индикаторами слайдов

К карусели с элементами управления, также можно ещё добавить индикаторы слайдов.

Атрибут data-slide-to добавляет к карусели возможность дополнительной навигации по слайдам с помощью индикаторов. Атрибут data-slide-to в качестве значения содержит порядковый номер (индекс) слайда. Отсчёт слайдов в карусели ведётся с нуля. Если необходимо чтобы при клике на индикатор пользователь перешёл, на третий слайд, то к индикатору необходимо добавить атрибут data-slide-to со значением 2 .

Добавление надписей к слайдам карусели

К слайдам можно добавить надписи. Осуществляется это посредством добавления к каждому слайду, некоторого элемента, например, div, с классом carousel-caption . При необходимости эти надписи можно с помощью классов display отображать на одних экранах и скрывать на других.

Классы Boostrap 4 предназначенные для управления отображением элементов приведены в этой статье.

Карусель с анимацией появления (Bootstrap 4)

Добавьте к карусели класс carousel-fade , чтобы изменить анимацию перехода на анимацию появления.

Инициализация карусели с помощью JavaScript

Карусель можно активировать с помощью кода JavaScript:

Вместо ‘.carousel’ укажите необходимый селектор для выбора одной или множества каруселей, которые нужно активировать.

Настройка карусели

Настройка карусели осуществляется с помощью параметров . Параметры можно устанавливать как с помощью data-атрибутов, так и посредством JavaScript.

При использовании data-атрибутов , добавьте к имени параметра приставку data- . Например, для установки параметра interval необходимо использовать атрибут с именем data-interval .

Имя	Описание
interval	Значение по умолчанию (миллисекунд): 5000, т.е. 5 секунд. Параметр interval устанавливает количество времени в миллисекундах (паузу) между автоматической сменой слайдов карусели. Если данному параметру указать значение false , то карусель не будет выполнять автоматическую смену слайдов.
keyboard	Значение по умолчанию: true. Данный параметр определяет должна ли карусель реагировать на события клавиатуры.
pause	Значение по умолчанию: «hover». Если параметр pause имеет значение «hover» , то смена слайдов, при нахождении курсора над ней, не будет выполняться. А при покидании курсора смена слайдов будет опять возобновляться. Если параметру pause установить значение false , то нахождение курсора над каруселью не будет останавливать автоматическую смену слайдов. На устройствах с сенсорным экраном, при значении «hover» , пауза будет устанавливаться на касание. Но после касания, карусель начнёт сменять слайды только после времени, равное 2 интервалам (по умолчанию, равное 10 секундам).
ride	Значение по умолчанию: false. При значении false , запуск автоматической смены слайдов произойдёт только после того, как пользователь вручную (с помощью элементов управления или индикаторов) перейдёт к другому слайду. Если в качестве этого параметра установить значение «carousel» , то смена слайдов запустится автоматически сразу после загрузки страницы.
wrap	Значение по умолчанию: true. Данный параметр определяет должна ли смена слайдов зацикливаться. Т.е. после последнего слайда осуществляться переход к первому при движении next и после первого к последнему при движении prev . Если это не нужно, то значение параметра wrap необходимо установить равное false .

Методы плагина Carousel

Методы плагина Carousel приведены в таблице.

Имя	Описание
.carousel(options)	Инициализирует один или множество выбранных элементов в качестве карусели с указанными параметрами.
.carousel(‘cycle’)	Запускает процесс автоматической смены слайдов (слева направо).
.carousel(‘pause’)	Отменяет процесс автоматической смены слайдов.
.carousel(number)	Выполняет переход на указанный слайд карусели. Отсчёт слайдов ведётся с 0. Поэтому, например, чтобы перейти на второй слайд, методу carousel необходимо передать число 1.
.carousel(‘prev’)	Выполняет переход на предыдущий слайд.
.carousel(‘next’)	Выполняет переход на следующий слайд.

Пример инициализации карусели с параметрами:

Пример использование методов для управления каруселью:

События плагина Carousel

JS Bootstrap генерирует для карусели два события.

Имя	Описание
slide.bs.carousel	Событие возникает перед началом смены слайда.
slid.bs.carousel	Событие возникает после завершения смены слайда.

Оба эти события имеют следующие дополнительные свойства:

• direction — направление слайдинга ( «left» или «right» );
• relatedTarget — DOM-элемент, который перемещается на место текущего;
• from — индекс текущего элемента;
• to — индекс следующего элемента.

Свойства from и to имеются только в Bootstrap 4.

Пример работы с событиями:

Пример работы с событиями карусели в Bootstrap 3:

Изменение длительности перехода (Bootstrap 4)

Длительность перехода элементов .carousel-item может быть изменена с помощью Sass переменной $carousel-transition перед компиляцией или пользовательскими стилями, если используете уже скомпилированный CSS. Если применяете несколько переходов, то выполните сначала transition transform (например: transform 2.5s ease, opacity .75s ease-out ).

Примеры

1. Карусель с автоматической нумерацией слайдов:

2. Скрипт для слайдера без зацикливания ( data-wrap=»false» ), который скрывает стрелку влево на первом слайде и стрелку вправо – на последнем:

Источник