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

1
2
3
4
5

Версия: v2.1.0

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

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

Bootstrap: 3, 4

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

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

Вес файла: 69.0 Kb

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

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

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

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

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

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

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

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

Авторство: https://github.com/jedrzejchalubek/glidejs

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

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

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

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

Добавлено: 2017-12-15 в 16:06

Метка: 1582702295

⇄ ⇅

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://bootstraptema.ru/plugins/2017/glide/glide.core.min.css" />
<link rel="stylesheet" href="https://bootstraptema.ru/plugins/2017/glide/glide.theme.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://bootstraptema.ru/plugins/2017/glide/glide.min.js"></script>

<style>
.box {
 color: #fff;
 font-size: 3vw;
 display: flex;
 align-items: center;
 justify-content: center;
}
.module--horizontal {
 width: 100%;
 height: 320px;
 overflow: hidden;
}
.module--horizontal .box {
 width: 100%;
 height: 320px;
}
</style>

<div class="container text-center"><h1>Glide & BootstrapTema</h1><div class="row"><div class="col-xs-12">

<div class="module module--horizontal">
 <div id="carousel" class="glide">

<div class="glide__arrows">
 <button class="glide__arrow prev" data-glide-dir="<">prev</button>
 <button class="glide__arrow next" data-glide-dir=">">next</button>
 </div>

<div class="glide__wrapper">
 <ul class="glide__track">
 <li class="glide__slide" data-glide-autoplay="1000">
 <div class="box"><img src="https://bootstraptema.ru/images/demo/1920x1080/demo24.jpg" class="img-responsive" alt="demo 1" /></div>
 </li>
 <li class="glide__slide" data-glide-autoplay="3000">
 <div class="box"><img src="https://bootstraptema.ru/images/demo/1920x1080/demo25.jpg" class="img-responsive" alt="demo 2" /></div>
 </li>
 <li class="glide__slide" data-glide-autoplay="5000">
 <div class="box"><img src="https://bootstraptema.ru/images/demo/1920x1080/demo26.jpg" class="img-responsive" alt="demo 3" /></div>
 </li>
 </ul>
 </div>

<div class="glide__bullets"></div>

</div>
 </div>

</div></div></div>

<script>
 var carousel = $('#carousel').glide({
 type: 'carousel',
 startAt: 1,
 touchDistance: 2
 });
</script>