Слайдер с горизонтальным скроллом на тильде
<h1>|</h1>
<!DOCTYPE html>
<script>...</script>
<body>
/////<h1>Hello word</h1>
</body>
/////<h1>Hello word</h1>
</body>
Здесь показан пример работы модификации, можно потыкать и посмотреть ;)
/
/
<Слайдер с горизонтальным скроллом>
<a href=”Видео-инструкция”></a>
<!-- Контейнер для слайдера -->
<div class="container-for-slider-with-gorizontal-scroll">
<!-- Слайдер -->
<ul class="slider-with-gorizontal-scroll">
</ul>
</div>
<style>
:root {
/* Расстояние между слайдами */
--distance-between-slides: 40px;
/* Отступ слайдера слева и справа */
--distance-left-and-right: 100px;
/* Высота слайда */
--height-slide: 386px;
/* Ширина слайда */
--width-slide: 580px;
/* Округление слайда */
--border-radius-slide: 15px;
/* Плавность анимации зума картинок */
--smooth-zoom: 1s;
/* Величина зума картинок */
--scale-zoom: scale(1.2);
/* Ссылка на первую картинку */
--link-to-image-1: https://static.tildacdn.com/tild3336-6439-4763-b662-613464303765/_5.png;
/* Когда пользователь кликнет по слайду, то перейдёт по этой ссылке */
/* Если нужно, чтобы пользователь не переходил по ссылке, то установите пустое значение переменной */
/* Также можно вставить id модального окна */
--link-after-click-1: https://coolsite-modifications.ru/running-lines;
--link-to-image-2: https://static.tildacdn.com/tild3831-3539-4130-b232-336430646439/_4.png;
--link-after-click-2: https://coolsite-modifications.ru/3d-slider;
--link-to-image-3: https://static.tildacdn.com/tild6566-6462-4635-b339-643030313733/Frame_40.png;
--link-after-click-3: https://coolsite-modifications.ru/running-line;
--link-to-image-4: https://static.tildacdn.com/tild6365-3038-4131-b638-376634323733/_1.png;
--link-after-click-4: https://coolsite-modifications.ru/filter-as-in-madeontilda;
--link-to-image-5: https://static.tildacdn.com/tild3336-6439-4763-b662-613464303765/_5.png;
--link-after-click-5: https://coolsite-modifications.ru/running-lines;
--link-to-image-6: ;
--link-after-click-6: ;
--link-to-image-7: ;
--link-after-click-7: ;
--link-to-image-8: ;
--link-after-click-8: ;
--link-to-image-9: ;
--link-after-click-9: ;
--link-to-image-10: ;
--link-after-click-10: ;
--link-to-image-11: ;
--link-after-click-11: ;
--link-to-image-12: ;
--link-after-click-12: ;
--link-to-image-13: ;
--link-after-click-13: ;
--link-to-image-14: ;
--link-after-click-14: ;
--link-to-image-15: ;
--link-after-click-15: ;
}
.container-for-slider-with-gorizontal-scroll>* {
margin: 0px;
padding: 0px;
}
.container-for-slider-with-gorizontal-scroll {
width: 100%;
overflow-x: scroll;
}
.container-for-slider-with-gorizontal-scroll::-webkit-scrollbar {
width: 0;
}
.slider-with-gorizontal-scroll {
list-style: none;
display: flex;
gap: var(--distance-between-slides);
width: min-content;
padding-left: 0px;
margin: 0 var(--distance-left-and-right);
}
.slider-with-gorizontal-scroll>li {
height: var(--height-slide);
width: var(--width-slide);
position: relative;
overflow: hidden;
border-radius: var(--border-radius-slide);
cursor: pointer;
}
.slider-with-gorizontal-scroll>li>img {
width: 100%;
height: 100%;
transition: var(--smooth-zoom);
}
.slider-with-gorizontal-scroll>li>img:hover {
transform: var(--scale-zoom);
}
/* Адаптив под разрешение от 960px до 1199px */
@media (max-width: 1199px) {
:root {
--distance-between-slides: 40px;
--distance-left-and-right: 100px;
--height-slide: 386px;
--width-slide: 580px;
--border-radius-slide: 15px;
--smooth-zoom: 1s;
--scale-zoom: scale(1.2);
}
}
/* Адаптив под разрешение от 640px до 959px */
@media (max-width: 959px) {
:root {
--distance-between-slides: 40px;
--distance-left-and-right: 100px;
--height-slide: 386px;
--width-slide: 580px;
--border-radius-slide: 15px;
--smooth-zoom: 1s;
--scale-zoom: scale(1.2);
}
}
/* Адаптив под разрешение от 480px до 639px */
@media (max-width: 639px) {
:root {
--distance-between-slides: 40px;
--distance-left-and-right: 100px;
--height-slide: 386px;
--width-slide: 580px;
--border-radius-slide: 15px;
--smooth-zoom: 1s;
--scale-zoom: scale(1.2);
}
}
/* Адаптив под разрешение от 320px до 479px */
@media (max-width: 479px) {
:root {
--distance-between-slides: 40px;
--distance-left-and-right: 100px;
--height-slide: 386px;
--width-slide: 580px;
--border-radius-slide: 15px;
--smooth-zoom: 1s;
--scale-zoom: scale(1.2);
}
}
</style>
<script>
// Вызываем функцию, которая добавляет картинки в слайдер
addImages();
function addImages() {
let body = getComputedStyle(document.body);
let images = [body.getPropertyValue("--link-to-image-1"), body.getPropertyValue("--link-to-image-2"), body.getPropertyValue("--link-to-image-3"), body.getPropertyValue("--link-to-image-4"), body.getPropertyValue("--link-to-image-5"), body.getPropertyValue("--link-to-image-6"), body.getPropertyValue("--link-to-image-7"), body.getPropertyValue("--link-to-image-8"), body.getPropertyValue("--link-to-image-9"), body.getPropertyValue("--link-to-image-10"), body.getPropertyValue("--link-to-image-11"), body.getPropertyValue("--link-to-image-12"), body.getPropertyValue("--link-to-image-13"), body.getPropertyValue("--link-to-image-14"), body.getPropertyValue("--link-to-image-15")];
let links = [body.getPropertyValue("--link-after-click-1"), body.getPropertyValue("--link-after-click-2"), body.getPropertyValue("--link-after-click-3"), body.getPropertyValue("--link-after-click-4"), body.getPropertyValue("--link-after-click-5"), body.getPropertyValue("--link-after-click-6"), body.getPropertyValue("--link-after-click-7"), body.getPropertyValue("--link-after-click-8"), body.getPropertyValue("--link-after-click-9"), body.getPropertyValue("--link-after-click-10"), body.getPropertyValue("--link-after-click-11"), body.getPropertyValue("--link-after-click-12"), body.getPropertyValue("--link-after-click-13"), body.getPropertyValue("--link-after-click-14"), body.getPropertyValue("--link-after-click-15")];
let slider = document.querySelector(".slider-with-gorizontal-scroll");
images.forEach(image => {
if (image) {
let indexImage = images.indexOf(image);
let liTag = document.createElement("li");
let imgTag = document.createElement("img");
imgTag.setAttribute("src", image);
liTag.appendChild(imgTag);
slider.appendChild(liTag);
liTag.addEventListener("click", () => { location.href = links[indexImage] })
}
});
}
</script>Language:HTML, XML