Вертикальный CSS слайдер - TCSlider / Слайдеры / Сниппеты Bootstrap | BootstrapТема

1
2
3
4
5

Версия: v1.0.0

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

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

Bootstrap: 3, 4, 5

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

Язык: Русский

Вес файла: 0.9 Kb

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

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

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

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

Прикреплён файл №1: /_sf/62/6216.html

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

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

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

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

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

Авторство: https://github.com/alihomayouni/TCSlider

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

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

Теги: вертикальный слайдер, слайдер, Slider, css слайдер, css slider

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

Добавлено: 2024-03-20 в 22:53

Метка: 1710964385

⇄ ⇅

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" />

<style>
:root {
 /* width */
 --slide-width: 100%;
 /* aspect ratio (width/height) */
 --slide-aspect: 3;
 /* animation time */
 --slide-time: 18s;
}
.tcSlider {
 width: var(--slide-width);
 aspect-ratio: var(--slide-aspect) / 1;
 background-color: #222;
 overflow: hidden;
 border-radius: 10px;
}
.slider {
 animation-name: tc_slider;
 animation-duration: var(--slide-time);
 animation-iteration-count: infinite;
}
.slide {
 position: relative;
}
.slider_img {
 width: var(--slide-width);
 aspect-ratio: var(--slide-aspect) / 1;
 background-position: center center;
 background-size: cover;
}
.slider_link {
 color: #fff;
 background-color: rgba(0, 0, 0, 0.5);
 border-radius: 20px;
 text-decoration: none;
 padding: 5px 15px;
 position: absolute;
 bottom: 20px;
 left: 20px;
}
@keyframes tc_slider {
 0% {
 margin-top: 0;
 }
 31% {
 margin-top: 0;
 }
 36% {
 margin-top: calc(var(--slide-width) / var(--slide-aspect) * -1);
 }
 64% {
 margin-top: calc(var(--slide-width) / var(--slide-aspect) * -1);
 }
 69% {
 margin-top: calc(var(--slide-width) / var(--slide-aspect) * -2);
 }
 97% {
 margin-top: calc(var(--slide-width) / var(--slide-aspect) * -2);
 }
}
</style>

<div class="container">

<div class="tcSlider">
<div class="slider">
 <a class="slide" href="#">
 <div class="slider_img" style="background-image:url(http://drawings-girls.ucoz.net/2016/12/samoubiica-i-devushki-prizraki.jpg)"></div>
 <div class="slider_link">&#1055;&#1077;&#1088;&#1074;&#1099;&#1081;&#32;&#1089;&#1083;&#1072;&#1081;&#1076;</div>
 </a>
 <div class="slide">
 <div class="slider_img" style="background-image:url(http://drawings-girls.ucoz.net/2016/12/devushka-so-snaiperskim-rujyom.jpg)"></div>
 <a class="slider_link" href="#">&#1042;&#1090;&#1086;&#1088;&#1086;&#1081;&#32;&#1089;&#1083;&#1072;&#1081;&#1076;</a>
 </div>
 <div class="slide">
 <div class="slider_img" style="background-image:url(http://drawings-girls.ucoz.net/2016/12/devushka-s-bolshimi-glazami-i-sigaretoi.jpg)"></div>
 <a class="slider_link" href="#">&#1058;&#1088;&#1077;&#1090;&#1080;&#1081;&#32;&#1089;&#1083;&#1072;&#1081;&#1076;</a>
 </div>
</div>
</div>

</div>