DEMO
Горизонтальный скролл
1) Создаем два зеро блока. Один будет в начале страницы, второй в конце. Они нужны исключительно в технических целях. Контент на этих экранах быть не должен и лучше поставить им задний фон как на остальном сайте.

2) Создаем блоки, которые мы будем использовать.

3) Добавляем в конце страницы блок Другое -> T123 HTML-код и вставляем в него код, который находится ниже.

4) В коде есть несколько отметок, где нужно ввести данные своих блоков или настройки для скролла. Они выглядят вот так:
/*************************************************/
/********************Часть 1*********************/
/*************************************************/

4.1) В части 1 нам нужно указать id первого и последнего блока, которые мы создавали в первом шаге.
var sections = $("#rec109090577, #rec109090584");

4.2) А так-же, id всех блоков, которые будут отображаться.
var sliders = ["#rec109090579, #rec109090580", "#rec109090581 ,#rec109090582"];

5) В части 2 можно указать дополнительные настройки:

// Скорость скролла
scrollingSpeed: 600,

// Анимация
// Можно заменить "easeInOutCubic" на любую другую анимацию. Список анимаций вы можете найти тут:
// https://easings.net/ru
easing: "easeInOutCubic",

// Управление клавиатурой
keyboardScrolling: true,

// Стрекли управления на горизонтальном скролле
controlArrows: true,

// Скролл с последнего экрана переводит на первый экран
loopBottom: true,

// Якорные ссылки на страницу.
// Вы можете на любом экоране добавить кнопку, с ссылкой #nav/2, при нажатии на неё пользователь попадет на третий экран.
// Так-же, можно скопировать ссылку mysite.com/#nav/2 и при переходе на неё, пользователь попадет сразу на третий экран.
// Почему на четвертый экран?
// У первого экрана будет ссылка mysite.com/#nav
// У второго экрана будет ссылка mysite.com/#nav/1
// У третьего экрана будет ссылка mysite.com/#nav/2
// Так-же, вместо nav вы можете написать что-нибудь другое.
anchors:['', 'nav'],
<!-- Тильдошная горизонтальный скролл для Тильды -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/jquery.fullpage.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/vendors/jquery.easings.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/jquery.fullpage.extensions.min.js"></script>
<script>
function check_direction(t,e,i){var n=$($(".section").get(t-1)).find(".fp-slide").length,f=-1;if(n){if($($(".section").get(t-1)).find(".fp-slide").each(function(t,e){$(e).hasClass("active")&&(f=t+1)}),"down"==i&&f<n)return $.fn.fullpage.moveSlideRight(),!1;if("up"==i&&1<f)return $.fn.fullpage.moveSlideLeft(),!1}return("up"!=i||$($(".section").get(t-1)).prev().find(".t-rec").attr("id")!=$(".section").first().find(".t-rec").attr("id"))&&(("down"!=i||$($(".section").get(t-1)).next().find(".t-rec").attr("id")!=$(".section:not(.label)").last().find(".t-rec").attr("id"))&&void 0)}

$(document).ready(function() {
	/*************************************************/ 
	/********************Часть 1**********************/ 
	/*************************************************/
	// Указываем технические блоки
	var sections = $("#rec113654996, #rec113655002");
	// Указываем отображаемые слайды
	var sliders = ["#rec113654997, #rec113654998, #rec113654999, #rec113655000, #rec113655001"];

	sections.wrap("<div class='section'></div>");
	sliders.forEach(function(s){
		let parents = $(s).wrap("<div class='slide'></div>");
		parents.parent().wrapAll("<div class='section'></div>");
	})
	$(".section").wrapAll("<div id='fullpage'></div>");


	$($(".section").get(1)).addClass("active");
	window.page = $('#fullpage').fullpage({
		/*********************************************/	
		/*****************ЧАСТЬ 2*********************/
		/*********************************************/
		scrollingSpeed: 600, 

		// Эту часть не трогаем
		css3: true,
		scrollBar: true,
		onLeave: function(index, nextIndex, direction) {
			if (check_direction(index, nextIndex, direction) == false) {
				return false;
			}
			return true;
		},
	});
});
</script>

<style>
	body {
		overflow: hidden !important;
	}
</style>
Made on
Tilda