Swiper / Улучшение / Плагины Bootstrap | BootstrapТема

1
2
3
4
5

Версия: v11.0.7

Каталог: Плагины Bootstrap

Категория: Улучшение

Bootstrap: 3, 4, 5

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop, Shopify, Laravel, WHMCS, PHP

Язык: Английский

Вес файла: 1.46 Mb

Уникальный ID: 2623

Посмотрели: 4419 раз

Скачать бесплатно

Помощь: установка & настройка

Скачали бесплатно: 65 раз

Прокомментировали: 0 раз

Рейтинг: 5.0 / 5 - 5 голосов

Тип лицензии: CC BY 4.0

Авторство: https://github.com/nolimits4web/Swiper

Информация: Пользователям

Информация: Правообладателям

Теги: swiper, Bootstrap, слайдер, Slider, Plugin

Поделился: BootstrapТема

Добавлено: 2024-11-15 в 12:24

Метка: 1710740578

⇄ ⇅

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://bootstraptema.ru/plugins/2018/swiper/swiper.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://bootstraptema.ru/plugins/2018/swiper/swiper.min.js"></script>

<style>
.swiper-container,
.swiper-container img{width:100%;height:100vh}
</style>

<div class="container-fluid m-0 p-0">

<div class="swiper-container">
 <div class="swiper-wrapper">
 <div class="swiper-slide"><img src="https://bootstraptema.ru/images/demo/1920x1080/demo28.jpg" alt="1" /></div>
 <div class="swiper-slide"><img src="https://bootstraptema.ru/images/demo/1920x1080/demo29.jpg" alt="1" /></div>
 <div class="swiper-slide"><img src="https://bootstraptema.ru/images/demo/1920x1080/demo30.jpg" alt="1" /></div>
 </div>
 
 <div class="swiper-button-next"></div>
 <div class="swiper-button-prev"></div>
</div>

</div>

<script>
 var swiper = new Swiper('.swiper-container', {
 navigation: {
 nextEl: '.swiper-button-next',
 prevEl: '.swiper-button-prev',
 },
 });
 </script>