Bootstrap Carousel Touch Slider / Слайдеры / Сниппеты Bootstrap

Версия: v1.0.2

Каталог: Сниппеты Bootstrap

Категория: Слайдеры

Bootstrap: 3, 4, 5

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

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

Вес файла: 6.1 Kb

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

Количество символов:

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

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

Прикреплён файл №2: /stuff/0-0-0-1473-20

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

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

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

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

Авторство: https://goo.gl/1hB1Fm

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

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

Теги: адаптивный, Bootstrap, Responsive, Carousel, Slider, слайдер

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

Добавлено: 2016-12-05 в 23:47

Метка: 1643652880

⇄ ⇅

<ol class="carousel-indicators">
 <li data-target="#bootstrap-touch-slider" data-slide-to="0" class="active"></li>
 <li data-target="#bootstrap-touch-slider" data-slide-to="1"></li>
 <li data-target="#bootstrap-touch-slider" data-slide-to="2"></li>
 </ol>

<div class="carousel-inner" role="listbox">

<div class="item active">

<img src="https://murchim.ru/_sf/32/60620433.jpg" alt="Bootstrap Touch Slider" class="slide-image"/>
 <div class="bs-slider-overlay"></div>

<div class="container">
 <div class="row">
 
 <div class="slide-text slide_style_left">
 <h1 data-animation="animated zoomInRight">Bootstrap Carousel</h1>
 <p data-animation="animated fadeInLeft">Bootstrap carousel now touch enable slide.</p>
 <a href="#" target="_blank" class="btn btn-default" data-animation="animated fadeInLeft">select one</a>
 <a href="#" target="_blank" class="btn btn-primary" data-animation="animated fadeInRight">select two</a>
 </div>
 </div>
 </div>
 </div>

<div class="item">

<img src="https://murchim.ru/_sf/32/49172077.jpg" alt="Bootstrap Touch Slider" class="slide-image"/>
 <div class="bs-slider-overlay"></div>
 
 <div class="slide-text slide_style_center">
 <h1 data-animation="animated flipInX">Bootstrap touch slider</h1>
 <p data-animation="animated lightSpeedIn">Make Bootstrap Better together.</p>
 <a href="#" target="_blank" class="btn btn-default" data-animation="animated fadeInUp">select one</a>
 <a href="#" target="_blank" class="btn btn-primary" data-animation="animated fadeInDown">select two</a>
 </div>
 </div>

<div class="item">

<img src="https://murchim.ru/_sf/32/41298963.jpg" alt="Bootstrap Touch Slider" class="slide-image"/>
 <div class="bs-slider-overlay"></div>
 
 <div class="slide-text slide_style_right">
 <h1 data-animation="animated zoomInLeft">Beautiful Animations</h1>
 <p data-animation="animated fadeInRight">Lots of css3 Animations to make slide beautiful .</p>
 <a href="#" target="_blank" class="btn btn-default" data-animation="animated fadeInLeft">select one</a>
 <a href="#" target="_blank" class="btn btn-primary" data-animation="animated fadeInRight">select two</a>
 </div>
 </div>

</div>

<a class="left carousel-control" href="#bootstrap-touch-slider" role="button" data-slide="prev">
 <span class="fa fa-angle-left" aria-hidden="true"></span>
 <span class="sr-only">Previous</span>
 </a>

<a class="right carousel-control" href="#bootstrap-touch-slider" role="button" data-slide="next">
 <span class="fa fa-angle-right" aria-hidden="true"></span>
 <span class="sr-only">Next</span>
 </a>

</div>

BootstrapTema

Bootstrap Carousel Touch Slider

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0