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.addEventListener('DOMContentLoaded', 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

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

CSS залить фон двумя цветами

В статье приводится пример того как можно с помощью CSS залить фон двумя цветами

Форматирование чисел на javascript

Форматирование чисел на javascript

В статье приводится пример кода для форматирования чисел на javascript с различными наборами параметров форматирования.

Bitrix: проверка авторизации пользователя

Bitrix: проверка авторизации пользователя

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

Пример использования chatGpt в работе: flex order

Пример использования chatGpt в работе: flex order

В этой статье мы рассмотрим реальный пример использования ИИ (chatGpt, gigachat,YandexGPT) в работе для решения вопрос по верстке (css)

Ведьмак 3 - игра, которая заслуживает внимания

Ведьмак 3 - игра, которая заслуживает внимания

Ведьмак 3 - легендарная игра в которую до сих пор интересно играть. В этой статье хочется поделится своим мнением о...

Bitrix удалить директорию

Bitrix удалить директорию

В статье даны примеры использования метода \Bitrix\Main\IO\Directory::deleteDirectory() для удобного удаления директории.

Комментарии

Юрий [10.03.2024]
Здравствуйте. Скрипт не срабатывает. Не хотят имиджи меняться как у Вас на примере.
Вот здесь https://test.getalit.by/
Admin [25.03.2024]
Добрый день.
Проверили код, всё работает, сделали отдельную страницу с примером https://precord.ru/files/slider.html где кроме слайдера ничего нет.
Возможно у вас возникают конфликты с другими скриптами или библиотеками на странице.
По ссылки не нашли подходящего слайдера, чтобы проверить в чем может быть проблема.
Юра [07.05.2024]
Ну как же без сторонних библиотек? jquery-2.2.4.min.js?
Admin [23.05.2024]
Юрий, спасибо за ценное замечание!
Доработали код так, чтобы jquery так же не требовался для работы.
Хотя заметим, что jquery сложно назвать сторонней библиотекой из-за своего широкого распространения, наличия на большинстве сайтов и входящей в состав различных фреймворков.
Марк [22.08.2024]
Спасибо за это прекрасное решение. Это то, что мне нужно было! Процветания вашему сайту :)
Марк [23.08.2024]
Понравилась ваша функция "Поделиться" на этой странице. Скажите, есть ли у вас статья про то, как реализовать такую функцию пересылки в Телеграм, ВКонтакте и Ватсап на сайте?
Admin [26.08.2024]
Марк, добрый день. Спасибо за обратную связь :)
Для блока "Поделится" используется библиотека от яндекса. У них в инструкции все довольно подробно описано: https://yandex.ru/dev/dev/share/doc/dg/add.html
Данный сайт использует файлы cookies. Продолжая просмотр сайта, вы соглашаетесь с использованием файлов cookies.
ОК