Как в Тильде сделать горизонтальную прокрутку / горизонтальный скролл?
Вы можете реализовать горизонтальный скролл при помощи пошаговой анимации в Нулевом блоке.
Похожие вопросы
- Можно ли давать отдельный доступ пользователям к проектам?
- Наблюдаются ли у вашего сервиса проблемы из-за блокировок Роскомнадзором?
- Как сделать бэкап проекта на Тильде?
- Выписался счёт для тарифа Бизнес на 15000 рублей без скидки. Почему?
- Где находится Ваш ЦОД?
Этот ответ был вам полезен?
Просмотры: 30588
Сообщить о нарушении прав
Если вы считаете, что пользователь Tilda Publishing нарушает ваши права, отправьте нам сообщение через форму
Как связаться с поддержкой
Для консультаций по функциям платформы используйте форму обратной связи в вашем личном кабинете или напишите на team@tilda.cc
Как сделать горизонтальный скролл в тильде
1) Создаем два зеро блока. Один будет в начале страницы, второй в конце. Они нужны исключительно в технических целях. Контент на этих экранах быть не должен и лучше поставить им задний фон как на остальном сайте.
2) Создаем блоки, которые мы будем использовать.
3) Добавляем в конце страницы блок Другое -> T123 HTML-код и вставляем в него код, который находится ниже.
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’],
Как сделать горизонтальный скролл со стрелками на Zero Block?
С помощью этой модификации можно сделать горизонтальную прокрутку Zero Block при помощи стрелок навигации или курсора мыши
Генератор кода
id Zero block с контентом
id блока со стрелками
Показывать курсор(Grab) в блоке скрола?
Скролл курсором
Возврат скрола при финише
Настройки дистанции скрола на различных экранах
Дистанция (экран 1200+)
Дистанция(экран до 1200)
Дистанция (экран до 960)
Дистанция (экран до 640)
Дистанция (экран до 480)
Войдите в аккаунт чтобы получить доступ к генератору кода
Этот генератор кода доступен только тем кто оплатил подписку
КОПИРОВАТЬ КОД
- Инструкция
- Пример
1. Создаем Zero Block и в настройках блока выставляем параметр Owerflow в режим Auto
2. Размещаем в блоке весь необходимый контент(все что выходит горизонтально за пределы сетки тильда будет скролиться). Важно чтобы контент не выходил вертикально за пределы блока иначе включиться вертикальный скролл от Тильда.
3. Создаем второй Zero Block в котором размещаем две кнопки со стрелками(это может быть кнопка, текст, шейп или изображение). Стрелкам назначаем классы ti-arrow-left (для прокрутки влево) и ti-arrow-right (для прокрутки вправо)
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка «Add CSS Class Name» и далее, справа в настройках указываем класс
4. Копируем id Zero Block скрола и id блока со стрелками и вставляем их в генератор кода
5. При необходимости указываем в генераторе дополнительные настройки:
Показывать курсор(Grab) в блоке скрола? — возможность включить курсор в виде ладошки при наведении на блок скролла. Можно выбрать экраны на которых показывать курсор;
Скролл курсором — можно включить или выключить прокрутку блока курсором;
Возврат скрола при финише — при включённой опции будет возвращать блок в самое начало если тот был уже доскролен.
6. Копируем готовый код и вставляем его в HTML блок T123
Примечание: Добавьте в самый конец скролла небольшой невидимый шейп шириной 40px. Это нужно чтобы при скролле справа был небольшой отступ
Горизонтальный скролл со стрелками в zero block
Модификация добавляет горизонтальному скроллу управление при помощи стрелок. Еще элементы могут скроллиться с помощью прокрутки и удержания кнопкой мыши. Решение скрывает горизонтальный скроллбар. Демо решения.
Как сделать
- Создай отдельно zero block с элементами, которые нужно скроллить. В настройках поставь overflow: auto.
- Создай отдельно zero block со стрелками. Каждая стрелка — это шейп. Для шейпа со стрелкой налево укажи класс arrow-left, для шейпа со стрелкой направо укажи класс arrow-right. Инструкция по добавлению своего класса элементу.
- Укажи настройках ниже id блока с элементами, id блока со стрелками и величину сдвига при клике на стрелку.
- Скопируй сгенерированный код и вставь на свой сайт. Памятка по вставке кода.
.scrollbooster-viewport < cursor: -webkit-grab; cursor: grab; padding-bottom: 30px; margin-bottom: -30px; >.scrollbooster-viewport:active < cursor: -webkit-grabbing; cursor: grabbing; >.scrollbooster-content < position: absolute; width: 100%; height: 100%; >.arrow-left, .arrow-right