Интерактивная вращающаяся 3D галерея / Слайдеры / Сниппеты Bootstrap

Версия: v1.0.0

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

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

Bootstrap: 3, 4, 5, CSS Grid, Tailwind CSS, Materialize CSS

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

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

Вес файла: 1.0 Kb

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

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

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

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

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

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

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

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

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

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

Авторство: https://github.com/ariyojoey/rotating-gallery

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

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

Теги: слайдер, карусель фото, вращающийся слайдер, js слайдер, 3d галерея, 3d слайдер, 3d карусель

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

Добавлено: 2024-09-19 в 08:41

Метка: 1726724484

⇄ ⇅

.btn-container{
 position:relative;
 width:80%;
}
.btn{
 position: absolute;
 bottom:-80px;
 background-color: orangered;
 color:white;
 padding:10px 20px;
 border-radius: 5px;
 border:none;
 cursor: pointer;
}
.btn:hover{
 filter:brightness(1.5);
}
#prev{
 left:20%;
}
#next{
 right:20%;
}
</style>

const prevEl = document.getElementById("prev");
const nextEl = document.getElementById("next");

let x=0;
let timer=0;

prevEl.addEventListener("click",()=>{
 x=x+45;
 clearTimeout(timer);
 updateImage();
});
nextEl.addEventListener("click",()=>{
 x=x-45;
 clearTimeout(timer);
 updateImage();
});

function updateImage(){
 imageCon.style.transform=`perspective(1000px) rotateY(${x}deg)`;
 timer=setTimeout(()=>{
 x=x-45;
 updateImage();
 },3000);
}
updateImage();
</script>

BootstrapTema

Интерактивная вращающаяся 3D галерея

Скриншот

Подробнее

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

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

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