Създаване на плъзгач с помощта на Bootstrap. Как да създадете свой собствен начален плъзгач в няколко лесни стъпки bootstrap carousel 3 примера

Компонент за слайдшоу за циклични елементи - въртележка на изображения или текстови слайдове.

Как работи

Carousel е слайдшоу за показване на поредица от съдържание, базирано на CSS 3D трансформации и някои JS. Работи с текст, изображения или обичайно маркиране. Той също така поддържа бутони следващ/предишен.

Моля, имайте предвид, че вложените въртележки не се поддържат и въртележките като цяло не са много желателни според „стандартите за достъпност“.

В крайна сметка, ако използвате BS4 carousels, това изисква util.js да бъде включен.

Пример

Въртележката не преоразмерява автоматично съдържанието на слайда. Следователно може да се нуждаете от допълнителни помощни програми, за да направите съдържанието им в правилния размер. Докато въртележките поддържат бутони преди/следващ, не е необходимо да се добавят изрично. Добавете и персонализирайте ги сами.

Класът .active се добавя към един от слайдовете, в противен случай въртележката няма да се вижда. Освен това, за да вградите контроли, трябва да дадете уникален идентификатор на елемента на класа .carousel, особено ако имате много въртележки на една и съща страница. Контролите и индикаторите трябва да имат атрибут за целта на данните (или href за ), който съответства на идентификатора на елемент от класа .carousel.

Само слайдове

Ето пример за въртележка, където има само пързалки. Обърнете внимание на наличието на класовете .d-block и .w-100, които отменят подравняването на изображението по подразбиране в браузърите за изображения с въртележка.

Заместител Първи слайд

Заместител Втори слайд

Заместител Трети слайд

С контроли

Добавя бутони предишен/следващ:

С индикатори

Можете също да добавите индикатори към въртележката заедно с контроли.

Изисква първоначален активен елемент

Класът .active трябва да се добави към един от слайдовете, в противен случай въртележката няма да се вижда.

С надписи

Добавете надписи към вашите слайдове, като добавите елемент от класа .carousel-caption към който и да е елемент от класа .carousel-item. Етикетите са лесни за скриване на по-малки устройства с помощта на помощни програми за показване. Те са скрити първоначално с класа .d-none и ги показват отново на средни устройства с класа .d-md-block.

Заместител Първи слайд

етикет на първия слайд

Nulla vitae elit libero, a pharetra augue mollis interdum.

Заместител Втори слайд

втори етикет на слайд

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Заместител Трети слайд

трети етикет на слайд

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

етикет на първия слайд

Nulla vitae elit libero, a pharetra augue mollis interdum.

"carousel-caption d-none d-md-block">

втори етикет на слайд

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

"carousel-caption d-none d-md-block">

трети етикет на слайд

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

залепване

Добавете .carousel-fade към вашата въртележка, за да анимирате слайдовете си да избледняват към следващия слайд.

"carousel slide carousel-fade" data-ride="carousel">

Индивидуално разстояние.carousel-item

Добавете data-interval="" към елемента .carousel-item, за да промените времето на забавяне между автоматичното преминаване към следващия елемент.

Използване

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

Атрибутът data-slide приема стойностите prev или next, които променят позицията на слайда спрямо текущата му позиция. Или използвайте data-slide-to, за да отидете до слайда с индекс, като 2: data-slide-to="2" , индексите на слайдовете започват от 0 .

Атрибутът data-ride="carousel" се използва за създаване на анимация на въртележката. Не може да се комбинира с изрична инициализация на въртележка чрез JavaScript.

Чрез JavaScript

Извикайте въртележката ръчно:

$(".въртележка"). въртележка()

Настроики

Параметрите могат да се предават чрез атрибути или JavaScript. За да използвате атрибути, добавете името на параметъра към data-, например: data-interval="" .

Име	Тип	По подразбиране	Описание
интервал	номер	5000	Време на забавяне между автоматичните смени на слайдовете. Ако е невярно, въртележката няма да променя автоматично слайдовете.
клавиатура	булево	вярно	Дали въртележката ще реагира на събития от клавиатурата.
пауза	низ \| булево	завъртане	Ако е зададено "hover", смяната на слайда се забавя с mouseenter и промяната започва с mouseleave. Ако е невярно, задържането на курсора на мишката върху въртележката няма да спре смяната на слайдовете. Устройства, активирани с докосване: „задръжте“ - пауза при докосване (когато потребителят приключи взаимодействието с въртележката) за два интервала, след което отново сменете слайдовете. Имайте предвид, че това поведение е в допълнение към описаното по-горе поведение на мишката.
езда	линия	невярно	Автоматична смяна на слайдовете на въртележката след първата ръчна смяна на слайдове от потребителя. Ако въртележка - автоматичната промяна е активирана след зареждане.
обвивам	булево	вярно	Дали въртележката трябва да се променя плавно или дискретно.
докосване	булево	вярно	Въртележката трябва да поддържа ляво/дясно взаимодействие на сензорни устройства.

Методи

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

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

.carousel (опции)

Инициализира обекта на въртележката с посочените опции и стартира прехода на слайда.

$(".въртележка"). въртележка (( интервал : 2000 ))

.carousel("цикъл")

Променя слайдовете на въртележката отляво надясно.

.carousel("пауза")

Спира прехода между слайдове.

.carousel(номер)

Превъртанията се плъзгат до определена точка (базирана на 0, подобно на редове).

.carousel("предишна")

Превърта до предишния слайд. Връща стойността на извикването на функцията, преди да бъде показан елементът "target".(т.е. преди да се задейства събитието slid.bs.carousel).

.carousel("следващ")

Към следващия слайд. Връща стойността на извикването на функцията, преди да бъде показан елементът "target".(т.е. преди да се задейства събитието slid.bs.carousel).

.carousel("изхвърляне")

Унищожава въртележката на предмета.

Разработки

Въртележката в Bootstrap има 2 събития за прилагане на функционалността. И двете събития имат следните допълнителни свойства:

посока: Посоката, в която се движат слайдовете („наляво“ или „надясно“).
relatedTarget: Елементът DOM, който се придвижва до позицията на "преместения" слайд.
от: Индексът на текущия слайд
до: Индекс на следващия слайд

Всички събития от въртележката се задействат директно в въртележката (т.е. в

$("#myCarousel" ). on ("slide.bs.carousel", функция () ( // направи нещо… ))

Промяна на продължителността на прехода

Продължителността на conversion.carousel-item може да бъде променена в променливата $carousel-transition Sass преди компилиране или в обикновен CSS (когато използвате компилиран CSS). Ако са приложени множество преходи, уверете се, че преходът за трансформация е зададен първи (напр.: преход: трансформиране 2s лекота, непрозрачност .5s лекота на излизане).

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

Какво е въртележка?

Карусел (карусел) е интерфейсен елемент за демонстриране на поредица от изображения (слайдове) на сайта. Всяко изображение (слайд) обикновено се показва за няколко секунди, докато бъде заменено от следващото. Промяната на изображението (слайд) може да се извършва както автоматично на редовни интервали, така и ръчно.

Може да се представи слайд във въртележката на Bootstrap не само изображение, но също текстово съдържание. Освен това, когато създавате слайд, можете да използвате маркиране.

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

Въртележката в Bootstrap се реализира с помощта на Page Visibilty API. Това означава, че ако браузърът поддържа този API, тогава въртележката няма автоматично да променя слайдоветедокато стане видимо за потребителя. Например, докато разделът, съдържащ въртележката, е неактивен или минимизиран.

Рамките Boostrap 3 и 4 не позволяват вложени въртележки.

Въртележка без управление

Карусел компонент не нормализира автоматично размерите на изображението (слайда).. По този начин може да са необходими допълнителни помощни програми или стилове, за да се приведе съдържанието в правилния размер.
Един пример за това как да направите това с CSS може да бъде намерен в тази статия.

важно! Активният клас трябва да се добави към един от слайдовете. Ако това не е направено, въртележката няма да се покаже.

Карусел HTML маркиране в Bootstrap 3:

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

Карусел HTML маркиране в Bootstrap 4:

Атрибутът data-ride="carousel" кара слайдовете на въртележката да се променят автоматично след зареждане на страницата. Ако въртележката се инициализира с помощта на JavaScript, този атрибут не е необходимо да се използва.

Въртележка с управление

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

HTML маркиране на въртележка с контроли за преминаване към предишния и следващия слайд:

Поведението на бутоните Предишен и Следващ се определя във въртележката с помощта на атрибута data-slide.

Стойността prev на този атрибут свързва определени действия с бутона, с помощта на които той ще промени текущия слайд на предишния. Следващата стойност свързва с бутона съответно други действия, които ще променят текущия слайд на следващия.

Въртележка с слайд индикатори

Към въртележката с контроли можете също да добавите слайд индикатори.

Атрибутът data-slide-to добавя към въртележката възможността за допълнителна навигация в слайдове с помощта на индикатори. Атрибутът data-slide-to съдържа поредния номер (индекс) на слайда като стойност. Слайдовете във въртележката се броят от нула. Ако е необходимо потребителят да премине към третия слайд, когато щракне върху индикатора, тогава атрибутът data-slide-to със стойност 2 трябва да бъде добавен към индикатора.

Добавяне на надписи към слайдове с въртележка

Можете да добавяте надписи към слайдове. Това става чрез добавяне към всеки слайд на някакъв елемент, например div, с клас carousel-caption. Ако е необходимо, тези надписи могат да бъдат показани с помощта на класове за показване на някои екрани и скрити на други.

Класовете Boostrap 4 за управление на показването на елементи са дадени в тази статия.

...

Въртележка на анимация на външен вид (Bootstrap 4)

Добавете класа за избледняване на въртележката към въртележката, за да промените анимацията на прехода на анимация с избледняване.

Инициализиране на въртележката с JavaScript

Въртележката може да се активира с помощта на JavaScript код:

$(".carousel").carousel();

Заменете ".carousel" с подходящия селектор, за да изберете една или повече въртележки за активиране.

Настройка на въртележка

Въртележката се конфигурира с помощта на параметрите. Параметрите могат да се задават както с помощта на атрибути на данни, така и с JavaScript.

Когато използвате атрибути на данни, добавете префикс към името на параметъра с data-. Например, за да зададете параметъра interval, трябва да използвате атрибут с име data-interval.

Име	Описание
интервал	Стойност по подразбиране (милисекунди): 5000, т.е. 5 секунди.Параметърът за интервал задава времето в милисекунди (пауза) между автоматичните преходи на слайдове с въртележка. Ако този параметър е зададен на false, тогава въртележката няма да извършва автоматични преходи между слайдове.
клавиатура	Стойност по подразбиране: вярно.Този параметър определя дали въртележката трябва да отговаря на събития от клавиатурата.
пауза	Стойност по подразбиране: "hover".Ако параметърът за пауза е зададен на "hover", тогава преходът между слайдовете няма да се извърши, докато курсорът е върху него. И когато оставите курсора, смяната на слайда ще се възобнови отново. Ако параметърът за пауза е зададен на false, тогава задържането на курсора над въртележката няма да спре автоматичния преход на слайда. На устройства със сензорен екран, ако е зададено на „задръжте“ , паузата ще бъде настроена на докосване. Но след докосване, въртележката ще започне да сменя слайдовете едва след време, равно на 2 интервала (по подразбиране е 10 секунди).
езда	Стойност по подразбиране: невярно.Ако е зададено на false, автоматичните преходи между слайдовете ще се задействат само след като потребителят ръчно (чрез контроли или индикатори) премине към друг слайд. Ако този параметър е зададен на "carousel", преходът между слайдове ще започне автоматично веднага щом страницата се зареди.
обвивам	Стойност по подразбиране: вярно.Този параметър определя дали преходът между слайдове трябва да се повтаря. Тези. след последния слайд, преходът към първия се извършва при преминаване към следващия и след първия към последния при преместване пред. Ако това не е необходимо, тогава стойността на параметъра за обвиване трябва да бъде зададена на false.

Методи за приставка за въртележка

Методите на приставката Carousel са показани в таблицата.

Пример за инициализация на въртележка с параметри:

...

Пример за използване на методи за управление на въртележката:

...

Събития с приставка за въртележка

JS Bootstrap задейства две събития за въртележката.

И двете събития имат следните допълнителни свойства:

посока - посока на плъзгане ("наляво" или "надясно");
relatedTarget - DOM елементът, който се премества на текущото местоположение;
от - индекс на текущия елемент;
to - индексът на следващия елемент.

Свойствата от и до са налични само в Bootstrap 4.

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

...

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

Отворен пример

Промяна на продължителността на прехода (Bootstrap 4)

Продължителността на прехода на елементите .carousel-item може да бъде променена с променливата $carousel-transition Sass преди компилиране или персонализиран стил, ако се използва вече компилиран CSS. Ако прилагате множество преходи, тогава първо изпълнете трансформацията на прехода (например: трансформиране 2.5s лекота, непрозрачност .75s лекота навън).

Примери

1. Въртележка с автоматично номериране на слайдове:

...

Какво е въртележка?

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

Рамките Boostrap 3 и 4 не позволяват вложени въртележки.

Въртележка без управление

Карусел HTML маркиране в Bootstrap 3:

Карусел HTML маркиране в Bootstrap 4:

Въртележка с управление

HTML маркиране на въртележка с контроли за преминаване към предишния и следващия слайд:

Поведението на бутоните Предишен и Следващ се определя във въртележката с помощта на атрибута data-slide.

Въртележка с слайд индикатори

Към въртележката с контроли можете също да добавите слайд индикатори.

Добавяне на надписи към слайдове с въртележка

Класовете Boostrap 4 за управление на показването на елементи са дадени в тази статия.

...

Въртележка на анимация на външен вид (Bootstrap 4)

Инициализиране на въртележката с JavaScript

Въртележката може да се активира с помощта на JavaScript код:

$(".carousel").carousel();

Заменете ".carousel" с подходящия селектор, за да изберете една или повече въртележки за активиране.

Настройка на въртележка

Име	Описание
интервал	Стойност по подразбиране (милисекунди): 5000, т.е. 5 секунди.Параметърът за интервал задава времето в милисекунди (пауза) между автоматичните преходи на слайдове с въртележка. Ако този параметър е зададен на false, тогава въртележката няма да извършва автоматични преходи между слайдове.
клавиатура	Стойност по подразбиране: вярно.Този параметър определя дали въртележката трябва да отговаря на събития от клавиатурата.
пауза	Стойност по подразбиране: "hover".Ако параметърът за пауза е зададен на "hover", тогава преходът между слайдовете няма да се извърши, докато курсорът е върху него. И когато оставите курсора, смяната на слайда ще се възобнови отново. Ако параметърът за пауза е зададен на false, тогава задържането на курсора над въртележката няма да спре автоматичния преход на слайда. На устройства със сензорен екран, ако е зададено на „задръжте“ , паузата ще бъде настроена на докосване. Но след докосване, въртележката ще започне да сменя слайдовете едва след време, равно на 2 интервала (по подразбиране е 10 секунди).
езда	Стойност по подразбиране: невярно.Ако е зададено на false, автоматичните преходи между слайдовете ще се задействат само след като потребителят ръчно (чрез контроли или индикатори) премине към друг слайд. Ако този параметър е зададен на "carousel", преходът между слайдове ще започне автоматично веднага щом страницата се зареди.
обвивам	Стойност по подразбиране: вярно.Този параметър определя дали преходът между слайдове трябва да се повтаря. Тези. след последния слайд, преходът към първия се извършва при преминаване към следващия и след първия към последния при преместване пред. Ако това не е необходимо, тогава стойността на параметъра за обвиване трябва да бъде зададена на false.

Методи за приставка за въртележка

Методите на приставката Carousel са показани в таблицата.

Пример за инициализация на въртележка с параметри:

...

Пример за използване на методи за управление на въртележката:

...

Събития с приставка за въртележка

JS Bootstrap задейства две събития за въртележката.

И двете събития имат следните допълнителни свойства:

посока - посока на плъзгане ("наляво" или "надясно");
relatedTarget - DOM елементът, който се премества на текущото местоположение;
от - индекс на текущия елемент;
to - индексът на следващия елемент.

Свойствата от и до са налични само в Bootstrap 4.

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

...

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

Отворен пример

Промяна на продължителността на прехода (Bootstrap 4)

Примери

1. Въртележка с автоматично номериране на слайдове:

...

Компонент за слайдшоу за циклично преминаване през елементи-изображения или слайдове от текст като въртележка.

Как работи

Въртележката е слайдшоу за циклично преминаване през поредица от съдържание, изградено с CSS 3D трансформации и малко JavaScript. Работи с поредица от изображения, текст или персонализирано маркиране. Той също така включва поддръжка за предишни/следващи контроли и индикатори.

Моля, имайте предвид, че вложените въртележки не се поддържат и въртележките обикновено не отговарят на стандартите за достъпност.

пример

Въртележките не нормализират автоматично размерите на слайда. Поради това може да се наложи да използвате допълнителни помощни програми или персонализирани стилове за подходящо оразмеряване на съдържанието. Въпреки че въртележките поддържат предишни/следващи контроли и индикатори, те не са изрично задължителни. Добавете и персонализирайте, както сметнете за добре.

Класът .active трябва да се добави към един от слайдоветев противен случай въртележката няма да се вижда. Също така не забравяйте да зададете уникален идентификатор на .carousel за незадължителни контроли, особено ако използвате няколко въртележки на една страница. Контролни и индикаторни елементи трябва да имаатрибут data-target (или href за връзки), който съответства на идентификатора на елемента .carousel.

само слайдове

Ето въртележка само с пързалки. Обърнете внимание на наличието на .d-block и .w-100 върху изображения с въртележка, за да предотвратите подравняването на изображенията по подразбиране на браузъра.

Заместител Първи слайд

Заместител Втори слайд

Заместител Трети слайд