LIFEHACKOV.RU

Tilda Publishing

Автоматический скролл слайдер в Tilda. Улучшение пользовательского опыта на вашем веб-сайте

Введение

В современную цифровую эпоху наличие привлекательного онлайн-присутствия является неотъемлемым элементом как для бизнеса, так и для частных лиц. Веб-сайты играют ключевую роль в передаче информации, продвижении товаров или услуг и взаимодействии с посетителями. Один из эффективных способов сделать ваш веб-сайт более привлекательным и удобным для пользователей — это внедрить автоматический скролл слайдер в Tilda. В этой статье мы рассмотрим, что представляет собой автоматический скроллинг слайдера, почему он ценен для вашего веб-сайта и как его легко использовать на вашем тильда сайте.

Понимание автоматического скроллинга слайдера

Автоматический скроллинг слайдера — это динамический элемент веб-сайта, который позволяет автоматически прокручивать контент вашего сайта, такой как изображения, текст или видео, из одной секции в другую, создавая привлекательный визуальный эффект. Он заменяет необходимость пользователям вручную взаимодействовать с вашим контентом, предлагая плавный и увлекательный опыт просмотра.

Для чего нужен автоматический скролл слайдер в Tilda

  1. Повышенное вовлечение пользователей: Автоматические скроллинги слайдеров привлекают внимание посетителей, побуждая их оставаться на вашем сайте дольше.
  2. Визуальное повествование: Они позволяют рассказать визуальную историю, направляя пользователей через ваш контент шаг за шагом.
  3. Выделение ключевой информации: Вы можете использовать слайдер для выделения важной информации или продуктов.

Как создать автоматический скролл слайдер в Tilda

Автоматический скролл слайдер в Tida мы будем создавать, используя два нулевых блока (zero block) и html блок Т123. Далее мы приводим пошаговый план действий:

  1. Создайте zero block
  2. Внутри блока нажмите кнопку «Редактировать блок»
  3. Уберите лишнее наполнение блока
  4. В настройках блока найдите пункт «POSITION AND OVERFLOW»
  5. В пункте «OVERFLOW» выберите «auto»
  6. Добавьте в этот блок элементы, которые будут служить в качестве слайдов
  7. Каждый слайд расположите после предыдущего
  8. Первый слайд должен располагаться в начале блока, а последний – выходить за пределы блока.
  9. Адаптируйте слайды для всех возможных размеров экранов в zero block
  10. Сохраните и закройте zero block

Мы создали зеро блок, который является основой нашего слайдера, и добавили в него слайды.

Теперь создадим основу для кнопок управления слайдером в тильда и добавим в сами кнопки.

Для этого:

  1. Создайте еще один zero block
  2. Зайдите в редактор и очистите содержимое
  3. Сделайте высоту блока максимально маленькой
  4. Используйте в качестве кнопок картинки, текст, стандартные кнопки тильды, shape и т.д.
  5. Расположите кнопки в удобном для вас месте
  6. Нажмите правой кнопкой мыши на левую кнопку управления слайдом и выберите пункт «Add css class name»
  7. В появившемся поле введите класс «btn__left»
  8. Нажмите правой кнопкой мыши на правую кнопку управления слайдом и выберите пункт «Add css class name»
  9. В появившемся поле введите класс «btn__right»
  10. Сохраните изменения и закройте нулевой блок тильды с кнопками
skillbox

Мы подготовили два блока: сам автоматический скролл слайдер в tilda и блок с кнопками для этого сайта. Настало время объединить два этих блока с помощью кода. Для этого:

  1. Создайте HTML блок «Т123»
  2. Нажмите на копку «Контент»
  3. Скопируйте и вставьте в «Контент» следующий код:
<style>
    .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%;
    }
    
    .btn__left, .btn__right {
        cursor: pointer;
        user-select: none;
    }
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<script src="https://unpkg.com/scrollbooster@3/dist/scrollbooster.min.js" defer></script>

<script>
$(function() {
    // Укажите ID Zero блока с лайдами
    let blockScrollId = '#rec638041671';

    // Укажите ID Zero блока с стрелками
    let blockArrowsId = '#rec638042866';

    let shiftSize;
    $(window).on('load resize', function(){
        
        if (window.matchMedia('(max-width: 480px)').matches) {
            // Укажи величину сдвига при клике на стрелку для разрешения 320-480px
            shiftSize = '320px';
        }
        else if (window.matchMedia('(max-width: 640px)').matches) {
            // Укажи величину сдвига при клике на стрелку для разрешения 481-640px
            shiftSize = '320px';
        }
        else if (window.matchMedia('(max-width: 960px)').matches) {
            // Укажи величину сдвига при клике на стрелку для разрешения 641-960px
            shiftSize = '320px';
        }
        else if (window.matchMedia('(max-width: 1200px)').matches) {
            // Укажи величину сдвига при клике на стрелку для разрешения 961-1200px
            shiftSize = '320px';
        }
        else {
            // Укажи величину сдвига при клике на стрелку для разрешения больше 1200px
            shiftSize = '320px';
        }

    });

    // Функция для автоматического перелистывания слайдов с анимацией
    function autoSlide() {
        let $artboard = $(blockScrollId + ' .t396__artboard');
        let currentScrollLeft = $artboard.scrollLeft();
        let scrollWidth = $artboard.get(0).scrollWidth;

        if (currentScrollLeft >= scrollWidth - $artboard.width()) {
            // Если достигнут конец, переключаемся в обратную сторону с анимацией easeInOutSine
            $artboard.animate({ scrollLeft: 0 }, 300, 'easeInOutSine');
        } else {
            $artboard.animate({ scrollLeft: '+=' + shiftSize }, 300, 'easeInOutSine');
        }
    }

    // Запустить автоматическое перелистывание каждые 5 секунд (или другой интервал, который вам нужен)
    let intervalId = setInterval(autoSlide, 500); // 5000 миллисекунд = 5 секунд

    // Приостановить автоматическое перелистывание при наведении мыши
    $(blockScrollId + ', ' + blockArrowsId).on('mouseenter', function() {
    clearInterval(intervalId); // Остановить интервал
    });
    

    // Возобновить автоматическое перелистывание при уходе мыши
    $(blockScrollId + ', ' + blockArrowsId).on('mouseleave', function() {
        intervalId = setInterval(autoSlide, 500); // Запустить интервал снова
    });
   

    // Ваш код для ScrollBooster и кнопок переключения слайдов
    $(blockScrollId + ' .t396__artboard').addClass('scrollbooster-viewport').wrapInner('<div class="scrollbooster-content"></div>');
    $(blockScrollId + ' .t396').css('overflow','hidden');

    new ScrollBooster({
        viewport: $(blockScrollId + ' .scrollbooster-viewport')[0],
        content:  $(blockScrollId + ' .scrollbooster-content')[0],
        scrollMode: 'native',
        pointerMode: 'mouse',
        bounce: false,
        onPointerDown: function() { $(blockScrollId + ' *:focus').blur() }
    });

    $(blockArrowsId + ' .btn__left').on('click', function(e) {
        e.preventDefault();
        let $artboard = $(blockScrollId + ' .t396__artboard');
        let currentScrollLeft = $artboard.scrollLeft();
        if (currentScrollLeft === 0) {
            $artboard.animate({ scrollLeft: $artboard.width() }, 300, 'easeInOutSine'); // Перейти в конец с анимацией easeInOutSine
        } else {
            $artboard.animate( { scrollLeft: '-=' + shiftSize }, 300, 'easeInOutSine');
        }
    });

    $(blockArrowsId + ' .btn__right').on('click', function(e) {
        e.preventDefault();
        let $artboard = $(blockScrollId + ' .t396__artboard');
        let currentScrollLeft = $artboard.scrollLeft();
        let scrollWidth = $artboard.get(0).scrollWidth;
        if (currentScrollLeft >= scrollWidth - $artboard.width()) {
            $artboard.animate({ scrollLeft: 0 }, 300, 'easeInOutSine'); // Перейти в начало с анимацией easeInOutSine
        } else {
            $artboard.animate( { scrollLeft: '+=' + shiftSize }, 300, 'easeInOutSine');
        }
    });

});
</script>
  1. Cохраните изменения и закройте блок с кодом
  2. Зайдите в настройки блока со слайдером и скопируйте его ID
  3. Зайдите в «Контент» блока «Т123» и вставьте скопированный ID в качестве значения для переменной «let blockScrollId»
  4. Зайдите в настройки блока с кнопками и скопируйте его ID
  5. Зайдите в «Контент» блока «Т123» и вставьте скопированный ID в качестве значения для переменной «let blockArrowsId»
  6. Сохраните изменения и опубликуйте страницу

Заключение

Внедрение автоматического скроллинга слайдера в Tilda может значительно улучшить пользовательский опыт вашего веб-сайта. Это визуально привлекательный способ взаимодействия с вашей аудиторией, рассказа истории и выделения важной информации. Следуя описанным в этой статье шагам и учитывая предоставленные советы, вы можете легко интегрировать эту функцию на вашем сайте Tilda.

Смотрите обучающие видео уроки по Тильде тут

Читайте также: Эффект наложения блоков при скролле

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Сайт функционирует за счет рекламы

Пожалуйста, выключи блокировщик рекламы, чтобы продолжить пользоваться сайтом