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

1
2
3
4
5

Версия: v1.0.1

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

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

Для Bootstrap: 3, 4

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

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

Вес файла: 3.4 Kb

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

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

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

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

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

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

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

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

Авторство: https://github.com/naoxink/bgfader

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

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

Теги: Plugin, меняющийся фон, Background, Bootstrap, слайдшоу

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

Добавлено: 2017-10-02 в 17:05

Метка: 1583169236

⇄ ⇅

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

<style>
.header { 
 height:925px;
}
.bgfader{
 position: absolute;
 z-index: -2;
 top: 0;
 left: 0;
 overflow: hidden;
 width: 100%;
 height: 100%;
 display: none;
}
.bgfader-overlay{
 z-index: -1;
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 left: 0;
}
.bgfader > .image{
 display: none;
}
.bgfader, .bgfader > .image{
 width: 100%;
 height: 100%;
 background-position: center;
 background-attachment:fixed;
 background-repeat: no-repeat;
 -webkit-background-size:100% 100%;
 background-size:100% 100%;
 -moz-background-size: 100% 100%;
 -o-background-size: 100% 100%;
}
@media (max-width: 1600px) {
 .header {
 height: 795px;
}
}
@media (max-width: 1366px) {
.header {
 height: 765px;
}
}
@media (max-width: 1024px) {
.header {
 height: 685px;
}
}
@media (max-width: 991px) {
.header {
 height: 595px;
}
}
@media (max-width: 800px) {
.header {
 height: 520px;
}
}
@media (max-width: 736px) {
.header {
 height: 350px;
}
}
@media (max-width:667px) {
.header {
 height: 311px;
}
}
@media (max-width:640px) {
 .header {
 height: 400px;
}
}
@media (max-width: 568px) {
.header {
 height: 260px;
}
}
</style>

<div class="container-fluid">

<div class="header"></div>

</div>

<script>
var myBgFader = $('.header').bgfader([
 'https://bootstraptema.ru/images/demo/1920x1080/demo1.jpg',
 'https://bootstraptema.ru/images/demo/1920x1080/demo2.jpg',
 'https://bootstraptema.ru/images/demo/1920x1080/demo3.jpg',
 'https://bootstraptema.ru/images/demo/1920x1080/demo4.jpg',
], {
 'timeout': 2000,
 'speed': 2000,
 'opacity': 0.4
})
myBgFader.start()
</script>