CSS простой горизонтальный слайдер

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

<div class="slider-items">
<div class="slider-item"></div>
<div class="slider-item">
<p>Lorem ipsum dolor sit amet, 
consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.
Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.</p> </div> <div class="slider-item"></div> <div class="slider-item"></div> <div class="slider-item"></div> </div>
.slider-items {
    width: 100%;
    background-color: gray;
    display: flex;
    flex-direction: row;
    gap: 10px;
    padding: 10px 10px;
    overflow-x: scroll;
    cursor: pointer;
    user-select: none;
    scrollbar-width: none;
}
.slider-items::-webkit-scrollbar {
    display: none;
}
.slider-item {
    width: 220px;
    min-width: 220px;
    height: 180px;
    background-color: black;
    padding: 10px;
    overflow: hidden;
    color: #fff;
}
.slider-item:first-child {
    background-image: url('/files/img/article/css_gorizontalnaya_prokrutka/slide1.png');
    background-size: contain;
}
.slider-item:nth-child(3) {
    background-color: #5820f6;
}
.slider-item:nth-child(4) {
    background-color: #32cb5d;
}
.slider-item:nth-child(5) {
    background-color: #a56ffd;
}
$(document).ready(function(){
	initCustomSlider();
});

function initCustomSlider() {
	const slider = document.querySelector('.slider-items');
	let isDown = false;
	let startX;
	let scrollLeft;

	slider.addEventListener('mousedown', (e) => {
		isDown = true;
		slider.classList.add('active');
		startX = e.pageX - slider.offsetLeft;
		scrollLeft = slider.scrollLeft;
	});
	slider.addEventListener('mouseleave', () => {
		isDown = false;
		slider.classList.remove('active');
	});
	slider.addEventListener('mouseup', () => {
		isDown = false;
		slider.classList.remove('active');
	});
	slider.addEventListener('mousemove', (e) => {
		if (!isDown)
			return;
		e.preventDefault();
		e.stopPropagation();
		const x = e.pageX - slider.offsetLeft;
		const walk = (x - startX) * 2; //Ускорение, чтобы слайдер быстрее пролистывался
		slider.scrollLeft = scrollLeft - walk;
	});
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Еще одним преимуществом данного слайдера является то, что он может показывать не целое число слайдов, например: 2,5 слайда, 3,3 слайда и т.д. Таким образом пользователь сразу видит, что есть еще какая-то информация и можно передвинуть слайдер, чтобы с ней ознакомится.

Рубрики: CSS

Если есть вопросы, что-то в статье не понятно или нашли ошибку, напишите об этом в комментариях, все комментарии читаются и по возможности материал будет доработан.
Популярные статьи

Bitrix сбросить буфер вывода

Функция RestartBuffer() в Bitrix используется для сброса буфера вывода. Она позволяет прервать вывод страницы на определенном этапе выполнения скрипта и начать вывод заново. В статье рассмотрим основные сценарии использования данной функции, рассмотрим пример кода.

Bitrix получить значения списочного поля

В статье приводится пример кода для получения всех вариантов значений пользовательского поля с типом "Список". Так же описано как можно получить конкретный вариант значения поля.

Bitrix запись своих настроек в settings.php

Статья о том как разместить свои настройки не создавая велосипеды и костыли, а используя возможности системы.

Bitrix подключить модуль

Так как bitrix состоит из большого количества различных модулей, знать как их правильно подключать просто необходимо.

Подключить bitrix без подключения шаблона сайта

В статье приводится пример кода подключения bitrix без подключения шаблона сайта. Так же описано когда это может пригодится.

Bitrix выполнить произвольный sql запрос

В статье приведен пример как выполнить произвольный sql запрос используя стандартные средства Bitrix

Комментарии

Admin [25.03.2024]
Добрый день.
Проверили код, всё работает, сделали отдельную страницу с примером https://precord.ru/files/slider.html где кроме слайдера ничего нет.
Возможно у вас возникают конфликты с другими скриптами или библиотеками на странице.
По ссылки не нашли подходящего слайдера, чтобы проверить в чем может быть проблема.
Юрий [10.03.2024]
Здравствуйте. Скрипт не срабатывает. Не хотят имиджи меняться как у Вас на примере.
Вот здесь https://test.getalit.by/
Данный сайт использует файлы cookies. Продолжая просмотр сайта, вы соглашаетесь с использованием файлов cookies.
ОК