Для настройки страницы с бесконечной горизонтальной прокруткой в обе стороны можно использовать CSS свойство `overflow-x: scroll;` и `white-space: nowrap;` для контейнера с содержимым, которое нужно прокручивать горизонтально. Также можно использовать JavaScript для добавления функциональности бесконечной прокрутки в обе стороны.
Для настройки скролла для картинок, чтобы они листались в нужном направлении после прелоадера, можно воспользоваться библиотекой как Owl Carousel, которая предоставляет готовое решение для создания карусели изображений с поддержкой различных настроек, включая настройку направления прокрутки. Для реализации подобного функционала можно использовать следующие шаги:
1. Подключить библиотеку Owl Carousel к вашему проекту, добавив ссылку на CSS и JavaScript файлы.
2. Создать HTML разметку для блока с изображениями, который будет содержать необходимые изображения.
3. Инициализировать Owl Carousel на блоке с изображениями, указав необходимые настройки, включая направление прокрутки (например, `loop: true` для бесконечной прокрутки) и другие опции.
4. Добавить прелоадер для изображений, чтобы они загружались заранее и ускоряли отображение карусели.
Пример исходного кода для создания скролла для изображений с помощью Owl Carousel:
```HTML
<div class="owl-carousel">
<div class="item"><img src="image1.jpg" alt="Image 1"></div>
<div class="item"><img src="image2.jpg" alt="Image 2"></div>
<div class="item"><img src="image3.jpg" alt="Image 3"></div>
<!-- Добавьте другие изображения по аналогии -->
</div>
<script>
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
items: 3, // Количество отображаемых элементов
autoplay:true,
autoplayTimeout:3000, // Время автоматической прокрутки
autoplayHoverPause:true,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:5
}
}
});
});
</script>
```
Пожалуйста, обратите внимание, что для работы примера необходимо убедиться, что подключены все необходимые файлы и настройки.