Zero block11
Click „Block Editor” to enter the edit mode. Use layers, shapes and customize adaptability. Everything is in your hands.
Tilda Publishing
create your own block from scratch
Zero block21
Click „Block Editor” to enter the edit mode. Use layers, shapes and customize adaptability. Everything is in your hands.
Tilda Publishing
create your own block from scratch
Zero block22
Click „Block Editor” to enter the edit mode. Use layers, shapes and customize adaptability. Everything is in your hands.
Tilda Publishing
create your own block from scratch
Zero block31
Click „Block Editor” to enter the edit mode. Use layers, shapes and customize adaptability. Everything is in your hands.
Tilda Publishing
create your own block from scratch
Смешанный скролл если горизонтального скролла НЕТ на первом или последнем экране.

1) Создаем блоки, которые мы будем отображать.

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

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

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

3.2) И id всех блоков, которые нужны для горизонтальный секций. Обратите внимание, если у вас одна горизонтальная секция, тогда вам нужно просто написать в таком формате "#rec109090579, #rec109090580, #rec109090581". Если же у вас несколько горизонтальных секций, тогда вам нужно указывать как в первом варианте, но через запятую. В примере ниже показан вариант с двумя горизонтальными секциями.
var sliders = ["#rec109090579, #rec109090580", "#rec109090579, #rec109090580"];

4) В части 2 можно указать дополнительные настройки:
// Скорость скролла
scrollingSpeed: 600,
// Анимация
// Можно заменить "easeInOutCubic" на любую другую анимацию. Список анимаций вы можете найти тут:
// https://easings.net/ru
easing: "easeInOutCubic",
// Управление клавиатурой
keyboardScrolling: true,
// Стрекли управления на горизонтальном скролле
controlArrows: true,
// Скролл с последнего экрана переводит на первый экран
loopBottom: true,
// Скролл с последнего экрана переводит на первый экран
loopTop: 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 src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/vendors/scrolloverflow.min.js"></script> -->
<script>
function check_direction(index, nextIndex, direction) {
	var length = $($(".section").get(index-1)).find(".fp-slide").length;
	var active = -1;
	if (length) {
		$($(".section").get(index-1)).find(".fp-slide").each(function(i, item) {
			if ($(item).hasClass("active")) {
				active = i + 1;
			}
		})
		if (direction == "down" && active < length) {
			$.fn.fullpage.moveSlideRight();
			return false;
		}
		if (direction == "up" && active > 1) {
			$.fn.fullpage.moveSlideLeft();
			return false;
		}
	}
	// if (direction == "up" && $($(".section").get(index-1)).prev().find(".t-rec").attr("id") == $(".section").first().find(".t-rec").attr("id")) {
	// 	return false;
	// }
	// if (direction == "down" && $($(".section").get(index-1)).next().find(".t-rec").attr("id") == $(".section:not(.label)").last().find(".t-rec").attr("id")) {
	// 	return false;
	// }
}


$(document).ready(function() {
	/*************************************************/
	/*******************Часть 1***********************/
	/*************************************************/
	// Указываем простые секции
	var sections = $("#rec109985950, #rec109985954");
	// Указываем группы слайдов
	var sliders = ["#rec109985952, #rec109985953"];


	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>");


	// setTimeout(function(){
	// 	if ($("div").last().parent().parent().parent().attr("id").length == 9) {
	// 		$("div").last().parent().parent().parent().wrap("<div class='section fp-section label'></div>").parent().appendTo("#fullpage").addClass("section")
	// 	}
	// }, 3000)

	// $($(".section").get(1)).addClass("active");
	window.page = $('#fullpage').fullpage({
		/*************************************************/
		/*******************Часть 2***********************/
		/*************************************************/
		// Скорость скролла
		scrollingSpeed: 300,
		// easing
		// https://easings.net/ru
		easing: "easeInOutCubic",
		// Стрекли управления на горизонтальном скролле
		controlArrows: false,
		// Управление клавиатурой
		keyboardScrolling: true,

		// scrollOverflow: true,
		// Не трогать
		scrollHorizontally: true,
		loopHorizontal: false,
		loopBottom: false,
		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