Простой слайдер изображений для Blogspot и других CMS

В мире, где внимание пользователя стоит дорого, нужно максимально быстро и эффектно донести самую важную информацию. Статичная страница может выглядеть скучно, а слайдер изображений - это эффективное и в то же время простое решение.

Слайдер — это не просто красивый элемент декора. При правильной реализации, он становится мощным инструментом для улучшения пользовательского опыта и, соответственно, SEO-продвижения вашего сайта. В этой статье вы найдете исходный код слайдера написанного на jQuery. Его легко интегрировать в любой web-проект практически на любой платформе (CMS).

Как добавить слайдер изображений?

Если у вас сайт на Blogspot, для добавления слайдера в публикации нужно изменить HTML в настройках темы вашего блога. А если вы используете другую CMS, например WordPress, нужно просто подключить библиотеку jQuery. Откройте свою HTML разметку, нажмите комбинацию клавиш ctr+f (поиск на странице) и найдите закрывающий тег <⁄head>. Перед ним добавьте следующую строку (импорт библиотеки Google):

 <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>

Далее прописываем стили для стрелок "влево" и "вправо", а также для точек навигации (кружочки под слайдером), включая картинки и описание к ним.

<style>
.slider-widget {
	width: 100%;
	margin: 0 auto;
}
.slider {
	overflow: hidden;
	position: relative;
}
.slides-wrapper {
	display: flex;
	transition: transform 0.5s ease-in-out;
  	align-items: flex-start;
}
.slide {
	min-width: 100%;
	box-sizing: border-box;
	position: relative;
	transition: height 0.5s ease-in-out;
}
.slide img {
	width: 100%;
	display: block;
}
.slide-description {
	position: relative;
	bottom: 0;
	left: 0;
	right: 0;
	color: #8b8b8b;
	padding: 3px;
	font-size: 10pt;
	font-family: inherit;
	text-align: center;
}
.slider-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background-color: rgb(145 145 145);
	border: 2px solid grey;
	padding: 0px 14px;
	font-size: 24px;
	font-weight: bold;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.3s;
	z-index: 10;
	opacity: 0;
	transition: background-color 0.3s, opacity 0.3s ease-out;
}
.slider:hover .slider-btn {opacity: 1;}
.slider-btn:hover {background-color: rgba(255, 255, 255, 1);}
.prev-btn {left: 10px;}
.next-btn {right: 10px;}
.slider-nav {
	text-align: right;
	padding-top: 0px;
}
.nav-dot {
    height: 11px;
    width: 11px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    margin: 0px 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}
.nav-dot:hover {background-color: #777;}
.nav-dot.active {background-color: #333;}
</style>

Закончили настройки HTML и переходим к добавлению слайдера на страницы вашего сайта или блога. Это делается в режиме HTML при добавлении нового сообщения или страницы. Там, где вам нужен слайдер, просто добавьте эту разметку:

<div class="slider-widget">
<div class="slider-nav"></div>
<div class="slider">
	<div class="slides-wrapper">
	<div class="slide">
	<img alt="Описание к изображению 1" src="https://blogger.googleusercontent.com/...."/>
	<div class="slide-description">Описание к изображению 1 </div>
</div>
<div class="slide">
	<a href="https://blogger.googleusercontent.com/....">
	<img alt="Описание к изображению 2" src="https://blogger.googleusercontent.com/...."/></a>
	<div class="slide-description">Описание к изображению 2 </div>
	</div>
</div>
<button class="slider-btn prev-btn">❮</button>
<button class="slider-btn next-btn">❯</button>
</div>
</div>

Поменяйте ссылки и описание к изображениям на свои. В системе Blogspot получить ссылку можно при вставке изображения с помощью стандартных кнопок, расположенных под названием создаваемой публикации. В настройках Blogger есть также функция - показ изображений в оверлее, что позволяет не только листать слайды влево - вправо, но и просматривать их отдельно, обернув изображение в тег <a>. Этот параметр должен быть включен.

Если ваш сайт или блог использует другую CMS, то оборачивать img в тег "а" нет смысла. Слайдер будет работать, но просмотр изображений в оверлее - нет.

Осталось совсем чуть-чуть! Установка слайдера изображений — это быстрый и эффективный шаг к созданию более профессионального и привлекательного блога. Используя этот исходный код и следуя простым правилам SEO оптимизации изображений, вы не только порадуете своих читателей, но и дадите толчок позициям вашего сайта в поисковой выдаче.

Добавьте следующий скрипт в конец страницы вашего сайта или в конце текста вашей публикации на Blogspot:

<script>
$('.slider-widget').each(function() {
const $widget = $(this);
let currentIndex = 0;
const totalSlides = $widget.find('.slide').length;
if (totalSlides === 0) 
	return;
function createNavDots() {
	for (let i = 0; i < totalSlides; i++) {
		const $dot = $('<span></span>')
			.addClass('nav-dot')
			.attr('data-index', i)
			.on('click', () => {
				showSlide(i);
		});
	$widget
		.find('.slider-nav')
		.append($dot);
		}
	}
function updateNav() {
$widget.find('.slider-nav').find('.nav-dot').removeClass('active');
$widget.find('.slider-nav').find('.nav-dot').eq(currentIndex).addClass('active');
}
function showSlide(index) {
if (index >= totalSlides)
	currentIndex = 0;
else if (index < 0)
	currentIndex = totalSlides - 1;
else
	currentIndex = index;
$widget.data('currentIndex', currentIndex);
const $activeSlide = $widget.find('.slide').eq(currentIndex);
const $activeImage = $activeSlide.find('img');
const setSliderHeight = () => {
	const slideHeight = $activeSlide.outerHeight();
	$widget.find('.slider').css('height', slideHeight + 'px');
};
const rawImage = $activeImage.get(0);
if (rawImage && rawImage.complete)
	setSliderHeight();
else if (rawImage) 
	$activeImage.one('load', setSliderHeight);
const offset = -currentIndex * 100;
$widget.find('.slides-wrapper').css('transform', `translateX(${offset}%)`);
updateNav();
}
$widget.find('.next-btn').on('click', () => {
	showSlide(currentIndex + 1);
});
$widget.find('.prev-btn').on('click', () => {
	showSlide(currentIndex - 1);
});
createNavDots();
showSlide(currentIndex);
});
function debounce(func, wait) {
	let timeout;
	return function executedFunction(...args) {
		const later = () => {
		clearTimeout(timeout);
		func.apply(this, args);
		};
	clearTimeout(timeout);
	timeout = setTimeout(later, wait);
	};
}
function updateAllSliderHeights() {
	$('.slider-widget').each(function() {
		const $widget = $(this);
		const $slider = $widget.find('.slider');
		const $slides = $widget.find('.slide');
		const currentIndex = $widget.data('currentIndex') || 0;
		const $activeSlide = $slides.eq(currentIndex);
		if ($activeSlide.length) {
			const slideHeight = $activeSlide.outerHeight();
			$slider.css('height', slideHeight + 'px');
			}
		});
	}
const debouncedResizeHandler = debounce(updateAllSliderHeights, 250); 
$(window).on('resize load', debouncedResizeHandler);
</script>

Всё! Если вы всё правильно сделали, сладйер изображений готов к работе. В одном слайдере можно показывать любое количество фото, просто добавляя html блоки <div class="slide"> внутри "slider-widget"; так же можно менять позицию точек навигации.

Простой слайдер изображений html/CSS/jQuery

Слайд 2

Этот код оптимизирован под разные устройства с разным размером экрана, что позволяет корректно отображать изображения на ПК, планшетах и телефонах. Cлайдер можно использовать множество раз на одной странице, вставляя блоки "slider-widget" там, где вам это нужно и таким образом создавая разные динамические галереи.

научно-популярный блог P🅾︎int-sci