3D слайдер-карусель

Слайдер сделан на базе фреймворка Swiper

Пример:

Заголовок

Описание слайда

Заголовок

Описание слайда

Заголовок

Описание слайда

Заголовок

Большое описание слайда
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Заголовок

Описание слайда

CSS:

Подключаем CSS фреймворка swiper и стили ниже:

.swiper-container * {
	margin: 0;
	padding: 0;
	box-sizing: border-box; 
}
.swiper-container { 
	box-sizing: border-box;
	width: 100%;
	height: 400px;
	transition: opacity .6s ease;
}
.swiper-container.swiper-container-coverflow {
	padding: 2% 0 calc(2% + 30px) 0;
}
.swiper-container:hover .swiper-button-prev,
.swiper-container:hover .swiper-button-next {
	transform: translateX(0);
	opacity: 1;
	visibility: visible;
}
.swiper-slide {
	background-position: center;
	background-size: cover;
}
.swiper-slide .swiper-content {
	position: absolute;
	bottom: 4%;
	left: 2%;
	max-width: 70%;
	padding: 10px 16px;
	color: #fff;
	font-family: Verdana, sans-serif;   
	background: rgba(0,0,0,0.6);
}
.swiper-slide .swiper-content .swiper-title {
	font-size: 30px;
	margin-bottom: 10px;
	font-family: 'Roboto', sans-serif;  
}
.swiper-slide .swiper-content .swiper-caption {
	display: block;
	font-size: 15px;
	line-height: 1.4;
}
[class^="swiper-button-"] {
	width: 44px;
	opacity: 0;
	visibility: hidden;
}
.swiper-button-prev {
	transform: translateX(50px);
}
.swiper-button-next {
	transform: translateX(-50px);
}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
	margin: 0 10px;
	bottom: 10px;
	position: relative;
	width: 12px;
	height: 12px;
	background-color: #337AB7;
	opacity: .5;
	transition: all .3s ease; 
}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 18px;
	transform: translate(-50%, -50%);
	border: 1px solid #337AB7;
	border-radius: 50%;
}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet:hover, 
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {
	opacity: 1;
}
@media (max-width: 767px) {
	.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
		bottom: 4px;
	}
	.swiper-slide .swiper-content .swiper-title {
		font-size: 22px;
	}
	.swiper-slide .swiper-content .swiper-caption {
		font-size: 13px;
	}
}

.swiper-container * {

margin: 0;

padding: 0;

box-sizing: border-box;

}

.swiper-container {

box-sizing: border-box;

width: 100%;

height: 400px;

transition: opacity .6s ease;

}

.swiper-container.swiper-container-coverflow {

padding: 2% 0 calc(2% + 30px) 0;

}

.swiper-container:hover .swiper-button-prev,

.swiper-container:hover .swiper-button-next {

transform: translateX(0);

opacity: 1;

visibility: visible;

}

.swiper-slide {

background-position: center;

background-size: cover;

}

.swiper-slide .swiper-content {

position: absolute;

bottom: 4%;

left: 2%;

max-width: 70%;

padding: 10px 16px;

color: #fff;

font-family: Verdana, sans-serif;

background: rgba(0,0,0,0.6);

}

.swiper-slide .swiper-content .swiper-title {

font-size: 30px;

margin-bottom: 10px;

font-family: 'Roboto', sans-serif;

}

.swiper-slide .swiper-content .swiper-caption {

display: block;

font-size: 15px;

line-height: 1.4;

}

[class^="swiper-button-"] {

width: 44px;

opacity: 0;

visibility: hidden;

}

.swiper-button-prev {

transform: translateX(50px);

}

.swiper-button-next {

transform: translateX(-50px);

}

.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {

margin: 0 10px;

bottom: 10px;

position: relative;

width: 12px;

height: 12px;

background-color: #337AB7;

opacity: .5;

transition: all .3s ease;

}

.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet::before {

content: '';

position: absolute;

top: 50%;

left: 50%;

width: 18px;

height: 18px;

transform: translate(-50%, -50%);

border: 1px solid #337AB7;

border-radius: 50%;

}

.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet:hover,

.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {

opacity: 1;

}

@media (max-width: 767px) {

.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {

bottom: 4px;

}

.swiper-slide .swiper-content .swiper-title {

font-size: 22px;

}

.swiper-slide .swiper-content .swiper-caption {

font-size: 13px;

}

JS:

Подключаем JS фреймворка swiper и скрипт ниже:

var sliderSelector = '.swiper-container',
options = {
	init: false,
	loop: true,
	speed: 800,
	slidesPerView: 1,
	spaceBetween: 0,
	centeredSlides : true,
	effect: 'coverflow',
	coverflowEffect: {
        rotate: 50,
        stretch: 0,
        depth: 60,
        modifier: 1,
        slideShadows : true,
	},
	grabCursor: true,
	parallax: true,
	pagination: {
        el: '.swiper-pagination',
        clickable: true,
	},
	navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
	},
	breakpoints: {
        1000: {
			slidesPerView: 2,
			spaceBetween: 0
		},
        767: {
			slidesPerView: 2,
			spaceBetween: -80
		}		
		}
};
var mySwiper = new Swiper(sliderSelector, options);
mySwiper.init();

var sliderSelector = '.swiper-container',

options = {

init: false,

loop: true,

speed: 800,

slidesPerView: 1,

spaceBetween: 0,

centeredSlides : true,

effect: 'coverflow',

coverflowEffect: {

rotate: 50,

stretch: 0,

depth: 60,

modifier: 1,

slideShadows : true,

grabCursor: true,

parallax: true,

pagination: {

el: '.swiper-pagination',

clickable: true,

navigation: {

nextEl: '.swiper-button-next',

prevEl: '.swiper-button-prev',

breakpoints: {

1000: {

slidesPerView: 2,

spaceBetween: 0

767: {

slidesPerView: 2,

spaceBetween: -80

}

};

var mySwiper = new Swiper(sliderSelector, options);

mySwiper.init();

HTML:

<section class="swiper-container">
	<div class="swiper-wrapper">
		<div class="swiper-slide" style="background-image:url(background.jpg)">
			<div class="swiper-content">
				<p class="swiper-title" data-swiper-parallax="-30%" data-swiper-parallax-scale=".7">Заголовок</p>
				<span class="swiper-caption" data-swiper-parallax="-20%">Описание слайда</span>
			</div>
		</div>
		<!-- Еще слайды -->
		<div class="swiper-slide" style="background-image:url(background.jpg)">
			<div class="swiper-content">
				<p class="swiper-title" data-swiper-parallax="-30%" data-swiper-parallax-scale=".7">Заголовок</p>
				<span class="swiper-caption" data-swiper-parallax="-20%">Описание слайда</span>
			</div>
		</div>
	</div>
	<div class="swiper-pagination"></div>
	<div class="swiper-button-prev swiper-button-white"></div>
	<div class="swiper-button-next swiper-button-white"></div>
</section>

<p class="swiper-title" data-swiper-parallax="-30%" data-swiper-parallax-scale=".7">Заголовок</p>

<span class="swiper-caption" data-swiper-parallax="-20%">Описание слайда</span>

</div>

<p class="swiper-title" data-swiper-parallax="-30%" data-swiper-parallax-scale=".7">Заголовок</p>

<span class="swiper-caption" data-swiper-parallax="-20%">Описание слайда</span>

</div>

</section>

Фотографии для слайдера могут быть разных размеров, т.к. их края обрезаются согласно видимой области.

Swiper - это современный бесплатный сенсорный слайдер. Подробнее о нем и всех его возможностях можно посмотреть на официальном сайте.

Фотографии: kellepics

Опубликовано: 15.09.2020 / Обновлено: 02.04.2022
Рубрики: Слайдеры и карусели
Метки: 3D, JavaScript, swiper
18915 просмотров

Добавить комментарий:

Ваш комментарий отправлен!

Данио: 08.10.2023 в 15:41

Здравствуйте! Как сделать побольше расстояние между блоками ?

Ответить
- Alexander: 09.10.2023 в 08:42
  
  Поиграйте с настройками spaceBetween, depth и т.д.
  
  Ответить
Яхья: 18.04.2022 в 00:44

А как изменить размер изображения? так чтобы она вмеешалась в блока с width: 700px

Ответить
- Alexander: 18.04.2022 в 09:07
  
  Тут ширина слайда зависит от ширины контейнера.
  Задавайте его, а потом настройки, например spaceBetween
  
  Ответить
Кирилл: 15.04.2022 в 22:48

Подскажите пожалуйста, при подключении, все работает, но появляется ужасная горизонтальная прокрутка с элементами, которые должны быть скрыты?

Ответить
- Alexander: 17.04.2022 в 11:44
  
  По идеи, можно убрать прокрутку через overflow-x: hidden;, но что то не так с подключением.
  CSS от свипера подключен?
  
  Ответить
Олег: 21.01.2022 в 15:48

Александр, доброго дня. Подскажите пож-та как сделать что бы фото в слайдере по клику открывались в magnific popup.

Ответить
- Alexander: 21.01.2022 в 17:46
  Меняем
  <div class="swiper-slide" ....
  на
  <a href="background.jpg" class="swiper-slide" ....
  В итоге у нас будет открываться картинка по клику.
  Далее читаем описание, как удобнее подключить magnific popup, например:
  
  $('.swiper-wrapper').magnificPopup({ delegate: 'a', type: 'image' });
  Ответить
Савва: 12.12.2021 в 18:46

Добрый день, я решил скопировать данный код и попробовать его на своем шаблоне в редактор Atom, но к сожалению ничего не работает и я не понимаю в чем проблема, какие могут быть причины?

Ответить
- Alexander: 13.12.2021 в 04:17
  
  Дайте ссылку на пример, посмотрим какие там проблемы.
  
  Ответить
Mihail: 08.12.2021 в 23:54

Как подключить 2 таких слайдера на страницу, подскажите пожалуйста!(пробовал поменять все названия классов и переменных - не помогло)

Ответить
- Alexander: 09.12.2021 в 12:00
  На первый слайдер ставим id="slider1", на второй id="slider2"
  JS:
  
  var options = { тут настройки }; var mySwiper1 = new Swiper("#slider1", options); var mySwiper2 = new Swiper("#slider2", options); mySwiper1.init(); mySwiper2.init();
  Ответить
Max: 16.09.2021 в 15:32

Почему слайдер не работает, подскажите плиз кто разобрался?

Ответить
- Alexander: 16.09.2021 в 16:56
  
  Не работает на этой странице или у вас?
  Сделал пример в вакууме
  
  PS. данный пример для версии 6.1.2.
  На других не проверял, но на 7ой эффект выглядет совсем не так.
  
  Ответить
  - Max: 17.09.2021 в 08:07
    
    У меня не работает на локалке, хотя я просто копирую ваши коды, может быть я что то не доделываю?!
    
    Ответить
  - Max: 17.09.2021 в 08:22
    
    Подключил версию 6.1.2 и заработало, спасибо что откликнулись)))
    
    Ответить
Denis: 19.07.2021 в 10:15

Подключаю всё верно, однако слайдер не работает

Ответить

Пример:

CSS:

JS:

HTML:

Смотрите также:

Слайдер с меняющимися фото на CSS

Слайдер для radio кнопок

Анимированный эффект смены фотографий на JS

Добавить комментарий:

Комментарии: