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

1
2
3
4
5

Версия: v2.2.1

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

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

Для Bootstrap: 3, 4

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

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

Вес файла: 683.1 Kb

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

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

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

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

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

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

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

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

Авторство: https://github.com/kthornbloom/Smoothslides

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

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

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

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

Добавлено: 2017-12-03 в 21:57

Метка: 1583136115

⇄ ⇅

<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/snippets/slider/2017/smoothslides/smoothslides.theme.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://bootstraptema.ru/snippets/slider/2017/smoothslides/smoothslides-2.2.1.min.js"></script>

<style>
/* styles from bootstrapTema */
.ss-caption {
 background: rgba(255, 255, 255, 0.18);
 color: #444;
 text-shadow: 0 0 10px #cdcdcd;
}
.smoothslides-on a.ss-prev, .smoothslides-on a.ss-next {
 color:#A1A1A1;
 background:#ccc;
 opacity:.3;
}
.smoothslides-on .ss-prev:hover, .smoothslides-on .ss-next:hover {
 background:#ccc; 
 color:#222;
 opacity:.6;
}
</style>

<div class="container"><h1 class="text-center">Smoothslides & BootstrapTema</h1><div class="row"><div class="col-md-8 col-md-offset-2">

<div class="smoothslides" id="myslideshow2">
 <img src="http://drawings-girls.ucoz.net/2017/06/devushka-s-ognennoi-scripkoi.jpg" alt="Pan Up Effect" data-effect="panUp"/>
 <img src="http://drawings-girls.ucoz.net/2017/06/spyaschaya-devushka-s-drakonom.jpg" alt="Pan Right Effect" data-effect="panRight"/>
 <img src="http://drawings-girls.ucoz.net/2016/12/dlinnovolosaya-blondinka-s-tigrom.jpg" alt="Zoom In Effect" data-effect="zoomIn"/>
</div>

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

<script>
 $('#myslideshow2').smoothSlides({
 effectDuration: 3500,
 effectModifier: 1.4,
 navigation:'true',
 pagination:'false'
 });
 </script>