Пример подойдёт в случае если нужно сделать простой горизонтальный слайдер без подключения сторонних библиотек. Приведенный код можно взять за основу и доработать под требования конкретной задачи например добавить кнопки навигации, увеличение изображения при клике на слайд и т.д.
<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; //scroll-fast
slider.scrollLeft = scrollLeft - walk;
});
}
Рубрики:
CSS
В статье приводится пример того как можно подключить только компонент битрикс без подключения его шаблона, чтобы можно было вызвать его метод или получить значения свойств
В статье приводится пример кода для создания простого горизонтального слайдера с использованием CSS и небольшим количеством JS кода. Для реализации потребуется всего около 60 строк стилей и js кода.
grep - удобная и быстрая команда, здесь приведены примеры как произвести рекурсивный поиск в каталоге, поиск среди запущенных процессов и другие.
В статье приводится пример кода подключения bitrix без подключения шаблона сайта. Так же описано когда это может пригодится.
В статье приводится пример регистрации собственного события в bitrix и добавления на него обработчика.
В статье приводится пример кода для получения ID текущего покупателя в bitrix.