Слайдер с точками

На днях на codepen увидел интересный слайдер Material Slider Dots и решил сделать похожий, добавив:

Автоматический расчет и расстановку точек
Единый CSS для равного кол-ва слайдов
Возможность размещать несколько слайдеров на одной странице

Код написан для библиотеки jQuery

Пример слайдера с фоновыми изображениями:

HTML:

<div class="slider">
	<div class="slider-slides">
		<div class="slider-slide" style="background-image: url(photo.jpg);"></div>
		<!-- Еще слайды -->
		<div class="slider-slide" style="background-image: url(photo.jpg);"></div>
	</div>
	<div class="slider-dots"></div>
</div>

</div>

</div>

CSS:

.slider {
	position: relative;
	height: 400px;
	margin: 20px 0;
	box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2); 
	overflow: hidden;
}
.slider-slides {
	position: relative;
	height: 100%;
	transition: transform 0.3s cubic-bezier(0.51, 0.92, 0.24, 1);
	will-change: transform;
}
.slider-slide {
	float: left;
	height: 100%;
	background-position: 50% 50%;
	background-size: cover;	
}
.slider-dots {
	display: flex;
	position: absolute;
	bottom: 20px;
	left: 20px;
	width: calc(100% - 40px);
}
.slider-dot, 
.slider-indicator {
	display: block;
	margin: 0 5px;
	height: 14px;
	background: rgba(255, 255, 255, 0.5);
	border-radius: 50px;
	cursor: pointer;
}
.slider-indicator {
	position: absolute;
	background: white;
	width: auto;
	box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);   
}
.slider-indicator-left {
	transition: left 0.3s cubic-bezier(0.51, 0.92, 0.24, 1.15), right 0.3s 0.1s cubic-bezier(0.51, 0.92, 0.24, 1.15);
}
.slider-indicator-right {
	transition: left 0.3s 0.1s cubic-bezier(0.51, 0.92, 0.24, 1.15), right 0.3s cubic-bezier(0.51, 0.92, 0.24, 1.15);
}

.slider {

position: relative;

height: 400px;

margin: 20px 0;

box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);

overflow: hidden;

}

.slider-slides {

position: relative;

height: 100%;

transition: transform 0.3s cubic-bezier(0.51, 0.92, 0.24, 1);

will-change: transform;

}

.slider-slide {

float: left;

height: 100%;

background-position: 50% 50%;

background-size: cover;

}

.slider-dots {

display: flex;

position: absolute;

bottom: 20px;

left: 20px;

width: calc(100% - 40px);

}

.slider-dot,

.slider-indicator {

display: block;

margin: 0 5px;

height: 14px;

background: rgba(255, 255, 255, 0.5);

border-radius: 50px;

cursor: pointer;

}

.slider-indicator {

position: absolute;

background: white;

width: auto;

box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);

}

.slider-indicator-left {

transition: left 0.3s cubic-bezier(0.51, 0.92, 0.24, 1.15), right 0.3s 0.1s cubic-bezier(0.51, 0.92, 0.24, 1.15);

}

.slider-indicator-right {

transition: left 0.3s 0.1s cubic-bezier(0.51, 0.92, 0.24, 1.15), right 0.3s cubic-bezier(0.51, 0.92, 0.24, 1.15);

}

jQuery:

$(function() {
	$('.slider').each(function() {	
		let $th = $(this);
		$th.attr('data-pos', 1);
		let slide = $th.find('.slider-slide');
		let num = $th.find('.slider-slide').length;
		let dots = $th.find('.slider-dots');
		dots.prepend('<span class="slider-indicator"></span>');
		for( let i = 1; i <= num; i++ ){ 
			dots.append('<span style="width:' + 100 / num + '%" class="slider-dot" data-pos="'+ i +'"></span>');	
		}
		$th.find('.slider-slides').css('width', 100 * num + '%');
		slide.css('width', 100 / num + '%');
        $th.find('.slider-dot').on('click', function(){
			let currentPos = $th.attr('data-pos');
			let newPos = $(this).attr('data-pos');
			let newDirection = (newPos > currentPos ? 'right' : 'left');
			let currentDirection = (newPos < currentPos ? 'right' : 'left');
			$th.find('.slider-indicator').removeClass('slider-indicator-' + currentDirection);
			$th.find('.slider-indicator').addClass('slider-indicator-' + newDirection);		
			$th.attr('data-pos', newPos);	
			$th.find('.slider-slides').css('transform', 'translateX(-' + 100 / num * (newPos - 1) + '%)');			
			$th.find('.slider-indicator').css({'left': 100 / num * (newPos - 1) + '%','right':100 - (100 / num) - 100 / num * (newPos - 1) + '%'});
		});		
		$th.find('.slider-indicator').css({'left': 0,'right': 100 - (100 / num) + '%'});
	});
});

$(function() {

$('.slider').each(function() {

let $th = $(this);

$th.attr('data-pos', 1);

let slide = $th.find('.slider-slide');

let num = $th.find('.slider-slide').length;

let dots = $th.find('.slider-dots');

dots.prepend('<span class="slider-indicator"></span>');

for( let i = 1; i <= num; i++ ){

dots.append('<span style="width:' + 100 / num + '%" class="slider-dot" data-pos="'+ i +'"></span>');

}

$th.find('.slider-slides').css('width', 100 * num + '%');

slide.css('width', 100 / num + '%');

$th.find('.slider-dot').on('click', function(){

let currentPos = $th.attr('data-pos');

let newPos = $(this).attr('data-pos');

let newDirection = (newPos > currentPos ? 'right' : 'left');

let currentDirection = (newPos < currentPos ? 'right' : 'left');

$th.find('.slider-indicator').removeClass('slider-indicator-' + currentDirection);

$th.find('.slider-indicator').addClass('slider-indicator-' + newDirection);

$th.attr('data-pos', newPos);

$th.find('.slider-slides').css('transform', 'translateX(-' + 100 / num * (newPos - 1) + '%)');

$th.find('.slider-indicator').css({'left': 100 / num * (newPos - 1) + '%','right':100 - (100 / num) - 100 / num * (newPos - 1) + '%'});

});

$th.find('.slider-indicator').css({'left': 0,'right': 100 - (100 / num) + '%'});

});

Пример слайдера с фото и информацией:

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium quis repellat nesciunt, ex temporibus perspiciatis esse perferendis. Dicta tempore dolore laborum iste rerum quis temporibus voluptate itaque maxime commodi! Maiores.

В этом примере используется сетка Bootstrap, и HTML код слайда выглядит следующим образом:

<div class="slider-slide">
	<div class="row">
		<div class="col-sm-6">
			<img alt="" src="photo.jpg">
		</div>
		<div class="col-sm-6">
			<p>Lorem ipsum ...</p>	
		</div>
	</div>	
</div>

</div>

<p>Lorem ipsum ...</p>

</div>

И в CSS добавили немного стилей:

.slider {
	background: #337AB7;
}
.slider-slide {
	color: #FFF;
	padding: 20px;
	max-height: 340px;
	overflow-x: hidden;
	overflow-y: auto;
}
.slider-slide img {
	box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2); 
	margin-bottom: 20px;
}

.slider {

background: #337AB7;

}

.slider-slide {

color: #FFF;

padding: 20px;

max-height: 340px;

overflow-x: hidden;

overflow-y: auto;

}

.slider-slide img {

box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);

margin-bottom: 20px;

}

Другими словами в центр слайда <div class="slider-slide"></div> можно добавлять и оформлять по своему вкусу любую информацию. Только не стоит забывать о том, что высота слайдера должна быть фиксирована.

Работу этого слайдера также можно посмотреть и попробовать на codepen.io

Артем: 18.01.2024 в 14:30

Добрый день! Подскажите как вставить текст в эти области

Ответить
- Alexander: 21.01.2024 в 08:48
  
  Тут уже придумывать надо
  - ставить в эту полоску текст из атрибута слайда
  - на ксс править этот текст, чтобы его не перекрывал индикатор (активная белая полоска)
  - и самое главное - это мобильный вариант, в котором этот текст точно не уместится
  
  Ответить
  - Артем: 06.04.2024 в 13:43
    
    Подскажите, а можно как то сделать что бы на мобильной версии можно было пальцем листать, а на компьютерной версии сделать стрелочками?
    
    Ответить
    - Alexander: 07.04.2024 в 08:18
      
      Тут нет, да и смысла нет его накручивать и изменять, т.к. есть масса альтернативных решений именно со стрелками и точками и т.д.
      
      Ответить

Пример слайдера с фоновыми изображениями:

HTML:

CSS:

jQuery:

Пример слайдера с фото и информацией:

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

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

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