Как написать обязательный горизонтальный скролл слайдера при вертикальной прокрутке страницы?
Здравствуйте. Нужно реализовать слайдер, который работает таким образом:
Пользователь зашел на страницу и скролит вниз, когда он доходит до слайдера и продолжает скролить, то пролистывается слайдер пока не достигнет последнего айтема, и только после этого идет скролл самой страницы.
Видел, предлагают сделать с помощью библиотеки SCROLLMAGIC, но сам код не нашёл, не представляю, как это сделать
Код слайдера:
HTML
spoiler
<section id="projects" class="projects"> <div class="container-2"> <div class="itcss"> <div class="itcss__wrapper"> <div class="itcss__items"> <div class="itcss__item"> <img src="img/projects.jpg"> </div> <div class="itcss__item"> <img src="img/14_BathCorner_MG_7028.jpg"> </div> </div> </div> <button class="itcss__btn itcss__btn_prev" role="button" data-slide="prev"></button> <button class="itcss__btn itcss__btn_next" role="button" data-slide="next"></button> </div> </div> </section> |
<section id="projects" class="projects"> <div class="container-2"> <div class="itcss"> <div class="itcss__wrapper"> <div class="itcss__items"> <div class="itcss__item"> <img src="img/projects.jpg"> </div> <div class="itcss__item"> <img src="img/14_BathCorner_MG_7028.jpg"> </div> </div> </div> <button class="itcss__btn itcss__btn_prev" role="button" data-slide="prev"></button> <button class="itcss__btn itcss__btn_next" role="button" data-slide="next"></button> </div> </div> </section>
CSS
spoiler
.projects { margin: auto; margin-top: 112px; width: 1200px; min-height: 667px; overflow: hidden; } .itcss { position: relative; max-width: 1200px; } /* стили для wrapper */ .itcss__wrapper { position: relative; overflow: hidden; background-color: white; } /* стили для элемента, в котором непосредственно расположены элементы (слайды) */ .itcss__items { display: flex; transform-style: preserve-3d; backface-visibility: hidden; transition: transform 0.5s ease; will-change: transform; } /* стили для элементов */ .itcss__item { position: relative; flex: 0 0 100%; max-width: 100%; transform-style: preserve-3d; backface-visibility: hidden; will-change: transform; } /* кнопки Prev и Next */ .itcss__btn { position: absolute; top: 50%; display: flex; justify-content: center; align-items: center; width: 3rem; height: 4rem; color: #fff; background: rgb(0 0 0 / 10%); border: none; outline: none; transform: translateY(-50%); cursor: pointer; opacity: 0.5; user-select: none; } .itcss__btn_hide { display: none; } .itcss__btn:hover, .itcss__btn:focus { color: #fff; text-decoration: none; border: none; opacity: 0.7; } .itcss__btn_prev { left: 0; } .itcss__btn_next { right: 0; } .itcss__btn::before { content: ""; display: inline-block; width: 2rem; height: 2rem; background: transparent no-repeat center center; background-size: 100% 100%; } .itcss__btn_prev::before { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e"); } .itcss__btn_next::before { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); } /* класс для отключения transition */ .transition-none { transition: none; } .itcss__items { counter-reset: slide; } .itcss__item { counter-increment: slide; } .itcss__item>div::before { content: counter(slide); position: absolute; top: 10px; right: 20px; color: #fff; font-style: italic; font-size: 32px; font-weight: bold; } .itcss__item img { border: 1px solid var(--main-color); } |
.projects { margin: auto; margin-top: 112px; width: 1200px; min-height: 667px; overflow: hidden; } .itcss { position: relative; max-width: 1200px; } /* стили для wrapper */ .itcss__wrapper { position: relative; overflow: hidden; background-color: white; } /* стили для элемента, в котором непосредственно расположены элементы (слайды) */ .itcss__items { display: flex; transform-style: preserve-3d; backface-visibility: hidden; transition: transform 0.5s ease; will-change: transform; } /* стили для элементов */ .itcss__item { position: relative; flex: 0 0 100%; max-width: 100%; transform-style: preserve-3d; backface-visibility: hidden; will-change: transform; } /* кнопки Prev и Next */ .itcss__btn { position: absolute; top: 50%; display: flex; justify-content: center; align-items: center; width: 3rem; height: 4rem; color: #fff; background: rgb(0 0 0 / 10%); border: none; outline: none; transform: translateY(-50%); cursor: pointer; opacity: 0.5; user-select: none; } .itcss__btn_hide { display: none; } .itcss__btn:hover, .itcss__btn:focus { color: #fff; text-decoration: none; border: none; opacity: 0.7; } .itcss__btn_prev { left: 0; } .itcss__btn_next { right: 0; } .itcss__btn::before { content: ""; display: inline-block; width: 2rem; height: 2rem; background: transparent no-repeat center center; background-size: 100% 100%; } .itcss__btn_prev::before { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e"); } .itcss__btn_next::before { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); } /* класс для отключения transition */ .transition-none { transition: none; } .itcss__items { counter-reset: slide; } .itcss__item { counter-increment: slide; } .itcss__item>div::before { content: counter(slide); position: absolute; top: 10px; right: 20px; color: #fff; font-style: italic; font-size: 32px; font-weight: bold; } .itcss__item img { border: 1px solid var(--main-color); }
JavaScript
https://drive.google.com/file/d/1U4ZKO6aXrTWZwadM3...
Дополнительно:
Ответы:
Делаешь здоровенную по высоте обертку для слайдера, делишь ее высоту на количество слайдов, слушаешь скролл и на каждую долю прокрутки обертки, а точнее страницы пока обертка в области просмотра, листаешь по слайду. Самому слайдеру стики позиционирование чтобы он оставался в экране создавая иллюзию непрокручивания страницы
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для реализации обязательного горизонтального скролла слайдера при вертикальной прокрутке страницы можно воспользоваться следующим подходом:
1. Создайте контейнер для слайдера с фиксированной шириной и высотой, чтобы он оставался видимым при прокрутке страницы. Например:
```html
```
2. С помощью CSS задайте стили для контейнера и слайдов:
```css
.slider-container {
width: 100%;
height: 100vh;
overflow-x: auto;
overflow-y: hidden;
}
.slider {
display: flex;
white-space: nowrap;
}
```
3. Для создания горизонтального слайдера используйте flexbox, чтобы разместить слайды в строку:
```css
.slider {
display: flex;
white-space: nowrap;
}
```
4. Для каждого слайда укажите ширину и высоту, например:
```css
.slide {
width: 100vw; /* ширина слайда равна ширине окна браузера */
height: 100vh; /* высота слайда равна высоте окна браузера */
}
```
5. Наконец, добавьте JavaScript код, чтобы слайдер реагировал на прокрутку страницы и перемещался горизонтально. Для этого можно использовать событие `scroll` и метод `scrollLeft`:
```javascript
window.addEventListener('scroll', function() {
var scrollPosition = window.scrollY || window.pageYOffset;
document.querySelector('.slider-container').scrollLeft = scrollPosition;
});
```
Теперь при прокрутке страницы слайдер будет автоматически перемещаться горизонтально, оставаясь видимым на экране. Вам остается только добавить свои слайды в контейнер `.slider` и стилизовать их по желанию.