Juicy Slider / Слайдеры / Сниппеты Bootstrap | BootstrapТема

1
2
3
4
5

Версия: v1.0.0

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

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

Для Bootstrap: 3

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

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

Вес файла: 1.56 Mb

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

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

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

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

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

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

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

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

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

Авторство: Посмотреть

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

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

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

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

Добавлено: 2017-02-03 в 15:56

Метка: 1581070037

⇄ ⇅

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://bootstraptema.ru/plugins/2017/juicy-slider/css/juicyslider-min.css" />
<script src="https://bootstraptema.ru/plugins/2017/juicy-slider/js/jquery-1.10.2.js"></script>
<script src="https://bootstraptema.ru/plugins/2017/juicy-slider/js/jquery-ui.min.js"></script>
<script src="https://bootstraptema.ru/plugins/2017/juicy-slider/js/juicyslider-min.js"></script>

<style>
body{
background:transparent;
background:url(https://bootstraptema.ru/snippets/textures/texture-1.gif) repeat;
color:#fff
}
</style>

<div class="container"><div class="row">

<h1 class="text-center">Responsive Juicy Slider for Bootstrap</h1>

<div id="myslider3" class="juicyslider">
<ul>
<li><img src="http://drawings-girls.ucoz.net/2016/12/dlinnovolosaya-blondinka-s-tigrom.jpg" alt="Juicy Slider 1"></li>
<li><img src="http://drawings-girls.ucoz.net/2016/12/neobichnaya-devushka-s-orujiem.jpg" alt="Juicy Slider 2"></li>
<li><img src="http://drawings-girls.ucoz.net/2016/12/misticheskaya-devushka-s-trohpaloi-lapoi.jpg" alt="Juicy Slider 3"></li>
</ul>
<div class="mask"></div>
</div>

</div></div>

<script>
$(function() {
$('#myslider3').juicyslider({
width: '100%',
height: '500px',
mask: "strip",
bgcolor: "#000",
autoplay: 6000,
shuffle: false,
show: {effect: 'puff', duration: 5000},
hide: {effect: 'puff', duration: 3000},
});
});
</script>