Splide - Слайдер / Улучшение / Плагины Bootstrap

Версия: v4.1.3

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

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

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

Вес файла: 1.70 Mb

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

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

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

Посетить Демо страница

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

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

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

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

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

Авторство: https://github.com/Splidejs/splide

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

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

Теги: Слайдер, Bootstrap, plugin, карусель

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

Добавлено: 2026-02-01 в 11:20

Метка: 1769934059

⇄ ⇅

<!DOCTYPE html>
<html lang="ru">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Splide для Bootstrap 3/4/5 | BootstrapTema</title>
 
 
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
 
 
 
 
 
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css">
 
 
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
 
 <style>
 /* Универсальные стили для всех версий Bootstrap */
 :root {
 --bs-primary: #0d6efd;
 --bs-success: #198754;
 --bs-warning: #ffc107;
 --bs-danger: #dc3545;
 --bs-light: #f8f9fa;
 }
 
 .card {
 border: none;
 box-shadow: 0 5px 15px rgba(0,0,0,0.08);
 transition: transform 0.3s;
 }
 
 .card:hover {
 transform: translateY(-5px);
 }
 
 .btn-bs {
 font-weight: 500;
 letter-spacing: 0.5px;
 }
 
 /* Адаптивные отступы для разных версий Bootstrap */
 .container-bs {
 padding: 15px;
 }
 
 @media (min-width: 768px) {
 .container-bs {
 padding: 30px;
 }
 }
 
 /* Стилизация слайдера для Bootstrap */
 .splide__slide {
 padding: 10px;
 }
 
 .splide__slide img {
 border-radius: 8px;
 width: 100%;
 height: 400px;
 object-fit: cover;
 }
 
 /* Пагинация в стиле Bootstrap */
 .splide__pagination {
 bottom: -40px;
 }
 
 .splide__pagination__page {
 background-color: #dee2e6;
 border-radius: 50%;
 width: 12px;
 height: 12px;
 margin: 0 5px;
 transition: all 0.3s;
 border: 2px solid transparent;
 }
 
 .splide__pagination__page.is-active {
 background-color: var(--bs-primary);
 transform: scale(1.2);
 border-color: white;
 box-shadow: 0 0 0 2px var(--bs-primary);
 }
 
 /* Стрелки в стиле Bootstrap */
 .splide__arrow {
 background: rgba(13, 110, 253, 0.9);
 border: 2px solid white;
 width: 50px;
 height: 50px;
 opacity: 0.9;
 }
 
 .splide__arrow:hover {
 background: var(--bs-primary);
 opacity: 1;
 }
 
 .splide__arrow svg {
 fill: white;
 width: 20px;
 height: 20px;
 }
 
 /* Специфичные настройки для разных версий Bootstrap */
 /* Bootstrap 3 */
 .bs3 .panel {
 border-radius: 4px;
 border: 1px solid #ddd;
 }
 
 .bs3 .btn {
 border-radius: 4px;
 }
 
 /* Bootstrap 4/5 */
 .bs4 .card {
 border-radius: 0.375rem;
 }
 
 .bs5 .btn {
 border-radius: 0.375rem;
 }
 
 /* Индикатор версии Bootstrap */
 .bs-version-badge {
 position: fixed;
 top: 20px;
 right: 20px;
 z-index: 1000;
 }
 
 /* Тумбнейлы для Bootstrap */
 .thumbnail-slider .splide__slide {
 opacity: 0.6;
 transition: opacity 0.3s;
 cursor: pointer;
 }
 
 .thumbnail-slider .splide__slide.is-active {
 opacity: 1;
 border: 2px solid var(--bs-primary);
 }
 
 .thumbnail-slider img {
 height: 80px;
 object-fit: cover;
 border-radius: 4px;
 }
 </style>
</head>
<body class="bg-light">
 
 <div class="bs-version-badge">
 <span class="badge bg-primary" id="bsVersionBadge">Bootstrap 5</span>
 </div>
 
 <div class="container container-bs mt-5">
 
 <div class="row mb-5">
 <div class="col-12 text-center">
 <h1 class="display-4 fw-bold mb-3">📱 Универсальный слайдер для Bootstrap</h1>
 <p class="lead text-muted">Полностью совместим с Bootstrap 3, 4 и 5. 30 изображений 1920×1080</p>
 
 
 <div class="btn-group mt-3" role="group">
 <button type="button" class="btn btn-outline-primary active" data-bs-version="5">Bootstrap 5</button>
 <button type="button" class="btn btn-outline-primary" data-bs-version="4">Bootstrap 4</button>
 <button type="button" class="btn btn-outline-primary" data-bs-version="3">Bootstrap 3</button>
 </div>
 </div>
 </div>
 
 
 <div class="row mb-4">
 <div class="col-12">
 <div class="card shadow-lg">
 <div class="card-body p-4">
 <h5 class="card-title mb-3">
 <i class="fas fa-images me-2"></i>Основной слайдер
 </h5>
 
 <div id="main-slider" class="splide">
 <div class="splide__track">
 <ul class="splide__list" id="slides-container">
 
 </ul>
 </div>
 </div>
 
 
 <div class="mt-3 text-center">
 <div class="alert alert-info d-inline-block mb-0" id="slide-info">
 <i class="fas fa-info-circle me-2"></i>
 <span id="current-slide">1</span> из 30 | 1920×1080
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 
 
 <div class="row mb-5" id="thumbnails-row">
 <div class="col-12">
 <div class="card">
 <div class="card-body p-3">
 <h6 class="card-title mb-2">
 <i class="fas fa-th me-2"></i>Миниатюры
 </h6>
 
 <div id="thumbnail-slider" class="splide thumbnail-slider">
 <div class="splide__track">
 <ul class="splide__list" id="thumbnails-container">
 
 </ul>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 
 
 <div class="row">
 <div class="col-12">
 <div class="card">
 <div class="card-body">
 <h5 class="card-title mb-4">
 <i class="fas fa-sliders-h me-2"></i>Управление слайдером
 </h5>
 
 
 <div class="row mb-3">
 <div class="col-md-8 mb-2 mb-md-0">
 <div class="btn-group" role="group">
 <button class="btn btn-primary" id="prevBtn">
 <i class="fas fa-chevron-left me-1"></i> Назад
 </button>
 <button class="btn btn-success" id="playPauseBtn">
 <i class="fas fa-pause me-1"></i> Пауза
 </button>
 <button class="btn btn-primary" id="nextBtn">
 Вперед <i class="fas fa-chevron-right ms-1"></i>
 </button>
 </div>
 </div>
 
 <div class="col-md-4">
 <div class="input-group">
 <span class="input-group-text">
 <i class="fas fa-tachometer-alt"></i>
 </span>
 <select class="form-select" id="speedSelect">
 <option value="2000">Быстро (2с)</option>
 <option value="3000">Средне (3с)</option>
 <option value="4000" selected>Нормально (4с)</option>
 <option value="5000">Медленно (5с)</option>
 <option value="7000">Очень медленно (7с)</option>
 </select>
 </div>
 </div>
 </div>
 
 
 <div class="row">
 <div class="col-md-6 mb-2">
 <div class="form-check form-check-inline">
 <input class="form-check-input" type="checkbox" id="autoPlayCheck" checked>
 <label class="form-check-label" for="autoPlayCheck">
 Автопроигрывание
 </label>
 </div>
 
 <div class="form-check form-check-inline">
 <input class="form-check-input" type="checkbox" id="loopCheck" checked>
 <label class="form-check-label" for="loopCheck">
 Зациклить
 </label>
 </div>
 
 <div class="form-check form-check-inline">
 <input class="form-check-input" type="checkbox" id="dragCheck" checked>
 <label class="form-check-label" for="dragCheck">
 Перетаскивание
 </label>
 </div>
 </div>
 
 <div class="col-md-6 text-md-end">
 <button class="btn btn-outline-warning" id="fullscreenBtn">
 <i class="fas fa-expand me-1"></i> Полный экран
 </button>
 
 <button class="btn btn-outline-info" id="thumbToggleBtn">
 <i class="fas fa-eye me-1"></i> Скрыть миниатюры
 </button>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 
 
 <div class="row mt-4">
 <div class="col-12">
 <div class="alert alert-secondary">
 <h6><i class="fas fa-check-circle me-2"></i>Проверено на совместимость:</h6>
 <div class="row mt-2">
 <div class="col-md-4">
 <span class="badge bg-success me-1">Bootstrap 5</span>
 <small>Полная поддержка</small>
 </div>
 <div class="col-md-4">
 <span class="badge bg-primary me-1">Bootstrap 4</span>
 <small>Полная поддержка</small>
 </div>
 <div class="col-md-4">
 <span class="badge bg-warning me-1">Bootstrap 3</span>
 <small>Базовая поддержка</small>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
 
 
 
 
 
 
 <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>
 
 <script>
 // Определяем текущую версию Bootstrap
 let currentBSVersion = '5';
 const bsVersionClasses = {
 '3': 'bs3',
 '4': 'bs4',
 '5': 'bs5'
 };
 
 // Генерация URL изображений
 function generateImageUrls() {
 const images = [];
 const baseUrl = 'https://bootstraptema.ru/images/demo/1920x1080/demo';
 
 for (let i = 1; i <= 30; i++) {
 images.push({
 url: `${baseUrl}${i}.jpg`,
 number: i,
 alt: `Демо изображение ${i} • 1920×1080`
 });
 }
 
 return images;
 }
 
 // Создание слайдов
 function createSlides(images, containerId) {
 const container = document.getElementById(containerId);
 container.innerHTML = '';
 
 images.forEach(img => {
 const slide = document.createElement('li');
 slide.className = 'splide__slide';
 slide.innerHTML = `
 <div class="position-relative">
 <img 
 src="${img.url}" 
 alt="${img.alt}"
 class="img-fluid rounded"
 loading="lazy"
 >
 <div class="position-absolute bottom-0 start-0 m-3">
 <span class="badge bg-dark bg-opacity-75">${img.number}/30</span>
 </div>
 </div>
 `;
 container.appendChild(slide);
 });
 }
 
 // Инициализация основного слайдера
 let mainSlider = null;
 let thumbnailSlider = null;
 
 function initSliders() {
 const images = generateImageUrls();
 
 // Основной слайдер
 createSlides(images, 'slides-container');
 createSlides(images, 'thumbnails-container');
 
 // Настройки для основного слайдера
 mainSlider = new Splide('#main-slider', {
 type: 'loop',
 perPage: 1,
 perMove: 1,
 gap: '10px',
 pagination: true,
 arrows: true,
 autoplay: true,
 interval: 4000,
 pauseOnHover: true,
 pauseOnFocus: true,
 drag: true,
 keyboard: true,
 cover: true,
 height: '500px',
 breakpoints: {
 768: {
 height: '300px'
 }
 }
 });
 
 // Настройки для тумбнейлов
 thumbnailSlider = new Splide('#thumbnail-slider', {
 fixedWidth: 100,
 fixedHeight: 60,
 gap: 10,
 rewind: true,
 pagination: false,
 arrows: false,
 cover: true,
 isNavigation: true,
 focus: 'center',
 breakpoints: {
 768: {
 fixedWidth: 70,
 fixedHeight: 45
 }
 }
 });
 
 // Синхронизация слайдеров
 mainSlider.sync(thumbnailSlider);
 mainSlider.mount();
 thumbnailSlider.mount();
 
 // Обновление информации о текущем слайде
 mainSlider.on('moved', (newIndex) => {
 document.getElementById('current-slide').textContent = (newIndex + 1);
 });
 }
 
 // Настройка управления
 function setupControls() {
 // Кнопки навигации
 document.getElementById('prevBtn').addEventListener('click', () => mainSlider.go('-1'));
 document.getElementById('nextBtn').addEventListener('click', () => mainSlider.go('+1'));
 
 // Кнопка Play/Pause
 const playPauseBtn = document.getElementById('playPauseBtn');
 let isPlaying = true;
 
 playPauseBtn.addEventListener('click', () => {
 if (isPlaying) {
 mainSlider.pause();
 playPauseBtn.innerHTML = '<i class="fas fa-play me-1"></i> Воспроизвести';
 playPauseBtn.className = 'btn btn-success';
 } else {
 mainSlider.play();
 playPauseBtn.innerHTML = '<i class="fas fa-pause me-1"></i> Пауза';
 playPauseBtn.className = 'btn btn-warning';
 }
 isPlaying = !isPlaying;
 });
 
 // Изменение скорости
 document.getElementById('speedSelect').addEventListener('change', function() {
 mainSlider.options.interval = parseInt(this.value);
 if (isPlaying) {
 mainSlider.play();
 }
 });
 
 // Переключение опций
 document.getElementById('autoPlayCheck').addEventListener('change', function() {
 if (this.checked && isPlaying) {
 mainSlider.play();
 } else {
 mainSlider.pause();
 }
 });
 
 document.getElementById('loopCheck').addEventListener('change', function() {
 mainSlider.options.type = this.checked ? 'loop' : 'slide';
 mainSlider.refresh();
 });
 
 document.getElementById('dragCheck').addEventListener('change', function() {
 mainSlider.options.drag = this.checked;
 mainSlider.refresh();
 });
 
 // Полноэкранный режим
 document.getElementById('fullscreenBtn').addEventListener('click', function() {
 const container = document.querySelector('#main-slider');
 
 if (!document.fullscreenElement) {
 if (container.requestFullscreen) container.requestFullscreen();
 else if (container.webkitRequestFullscreen) container.webkitRequestFullscreen();
 else if (container.msRequestFullscreen) container.msRequestFullscreen();
 
 this.innerHTML = '<i class="fas fa-compress me-1"></i> Обычный режим';
 } else {
 if (document.exitFullscreen) document.exitFullscreen();
 else if (document.webkitExitFullscreen) document.webkitExitFullscreen();
 else if (document.msExitFullscreen) document.msExitFullscreen();
 
 this.innerHTML = '<i class="fas fa-expand me-1"></i> Полный экран';
 }
 });
 
 // Переключение тумбнейлов
 document.getElementById('thumbToggleBtn').addEventListener('click', function() {
 const thumbRow = document.getElementById('thumbnails-row');
 const isVisible = thumbRow.style.display !== 'none';
 
 if (isVisible) {
 thumbRow.style.display = 'none';
 this.innerHTML = '<i class="fas fa-eye-slash me-1"></i> Показать миниатюры';
 } else {
 thumbRow.style.display = 'block';
 this.innerHTML = '<i class="fas fa-eye me-1"></i> Скрыть миниатюры';
 }
 });
 
 // Переключение версий Bootstrap
 document.querySelectorAll('[data-bs-version]').forEach(btn => {
 btn.addEventListener('click', function() {
 const version = this.getAttribute('data-bs-version');
 
 // Обновляем активную кнопку
 document.querySelectorAll('[data-bs-version]').forEach(b => {
 b.classList.remove('active');
 });
 this.classList.add('active');
 
 // Обновляем бейдж
 document.getElementById('bsVersionBadge').textContent = `Bootstrap ${version}`;
 
 // Обновляем классы на body для стилизации
 document.body.classList.remove(...Object.values(bsVersionClasses));
 document.body.classList.add(bsVersionClasses[version]);
 
 currentBSVersion = version;
 
 // Показываем уведомление
 showToast(`Переключено на Bootstrap ${version}`, 'info');
 });
 });
 }
 
 // Всплывающее уведомление в стиле Bootstrap
 function showToast(message, type = 'info') {
 const toastId = 'bs-toast-' + Date.now();
 const toastHtml = `
 <div id="${toastId}" class="toast align-items-center text-white bg-${type} border-0" role="alert">
 <div class="d-flex">
 <div class="toast-body">
 ${message}
 </div>
 <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
 </div>
 </div>
 `;
 
 // Создаем контейнер для тостов если его нет
 let toastContainer = document.getElementById('toast-container');
 if (!toastContainer) {
 toastContainer = document.createElement('div');
 toastContainer.id = 'toast-container';
 toastContainer.className = 'toast-container position-fixed bottom-0 end-0 p-3';
 document.body.appendChild(toastContainer);
 }
 
 toastContainer.insertAdjacentHTML('beforeend', toastHtml);
 
 // Показываем toast
 const toastElement = new bootstrap.Toast(document.getElementById(toastId), {
 autohide: true,
 delay: 3000
 });
 toastElement.show();
 
 // Удаляем после скрытия
 document.getElementById(toastId).addEventListener('hidden.bs.toast', function() {
 this.remove();
 });
 }
 
 // Инициализация при загрузке
 document.addEventListener('DOMContentLoaded', function() {
 initSliders();
 setupControls();
 
 // Показываем приветственное сообщение
 setTimeout(() => {
 showToast('🚀 Слайдер успешно загружен! Совместим с Bootstrap 3, 4 и 5', 'success');
 }, 1000);
 
 // Логирование
 console.log('🎨 Универсальный слайдер для Bootstrap готов!');
 console.log('📱 Версии: Bootstrap 3, 4, 5');
 console.log('🖼️ Изображения: 30 × 1920×1080');
 console.log('🎮 Управление: все кнопки активны');
 });
 
 // Обработка ошибок загрузки изображений
 document.addEventListener('error', function(e) {
 if (e.target.tagName === 'IMG') {
 e.target.src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkyMCIgaGVpZ2h0PSIxMDgwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9IiNlZWUiLz48dGV4dCB4PSI1MCUiIHk9IjUwJSIgZm9udC1mYW1pbHk9IkFyaWFsIiBmb250LXNpemU9IjI0IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSIjOTk5Ij5JbWFnZSAkZTtlLnRhcmdldC5zcmMuc3BsaXQoJy8nKS5wb3AoKS5zcGxpdCgnLScpWzBdfTwvdGV4dD48L3N2Zz4=';
 console.warn(`⚠️ Не загружено: ${e.target.src}`);
 }
 }, true);
 </script>
</body>
</html>

BootstrapTema

Splide - Слайдер

Скриншот

Подробнее

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

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

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