Комментарии:

• Руслан: 01.06.2026 в 18:18

  Как добавить автоматическое проигрывание слайдов? С учетом интервала времени...

  Ответить
  • Alexander: 02.06.2026 в 05:55

    Замените JS на этот:

    [code]$(function() {
    $('.slider').each(function() {
    let $th = $(this);
    let autoPlayInterval;
    let intervalTime = 3000; // Интервал в миллисекундах (3 секунды)

    $th.attr('data-pos', 1);
    let slide = $th.find('.slider-slide');
    let num = $th.find('.slider-slide').length;
    let dots = $th.find('.slider-dots');

    dots.prepend('<span class="slider-indicator"></span>');
    for( let i = 1; i <= num; i++ ){
    dots.append('<span style="width:' + 100 / num + '%" class="slider-dot" data-pos="'+ i +'"></span>');
    }

    $th.find('.slider-slides').css('width', 100 * num + '%');
    slide.css('width', 100 / num + '%');

    // Функция переключения на следующий слайд
    function nextSlide() {
    let currentPos = parseInt($th.attr('data-pos'));
    let newPos = currentPos < num ? currentPos + 1 : 1;
    switchToSlide(newPos, 'right');
    }

    // Функция переключения на предыдущий слайд
    function prevSlide() {
    let currentPos = parseInt($th.attr('data-pos'));
    let newPos = currentPos > 1 ? currentPos - 1 : num;
    switchToSlide(newPos, 'left');
    }

    // Общая функция переключения на слайд
    function switchToSlide(newPos, direction) {
    let currentPos = parseInt($th.attr('data-pos'));
    let newDirection = direction;
    let currentDirection = (newPos < currentPos ? 'right' : 'left');

    $th.find('.slider-indicator').removeClass('slider-indicator-' + currentDirection);
    $th.find('.slider-indicator').addClass('slider-indicator-' + newDirection);
    $th.attr('data-pos', newPos);
    $th.find('.slider-slides').css('transform', 'translateX(-' + 100 / num * (newPos - 1) + '%)');
    $th.find('.slider-indicator').css({
    'left': 100 / num * (newPos - 1) + '%',
    'right': 100 - (100 / num) - 100 / num * (newPos - 1) + '%'
    });
    }

    // Функция запуска авто-проигрывания
    function startAutoPlay() {
    stopAutoPlay();
    autoPlayInterval = setInterval(function() {
    nextSlide();
    }, intervalTime);
    }

    // Функция остановки авто-проигрывания
    function stopAutoPlay() {
    if (autoPlayInterval) {
    clearInterval(autoPlayInterval);
    autoPlayInterval = null;
    }
    }

    // Функция перезапуска авто-проигрывания (сброс таймера)
    function restartAutoPlay() {
    stopAutoPlay();
    startAutoPlay();
    }

    // Обработчик клика по точкам
    $th.find('.slider-dot').on('click', function(){
    let currentPos = parseInt($th.attr('data-pos'));
    let newPos = parseInt($(this).attr('data-pos'));
    let newDirection = (newPos > currentPos ? 'right' : 'left');
    switchToSlide(newPos, newDirection);
    restartAutoPlay(); // Перезапускаем автовоспроизведение при клике
    });

    // Запускаем авто-проигрывание
    startAutoPlay();

    // Опционально: остановка автопроигрывания при наведении мыши
    $th.hover(
    function() {
    stopAutoPlay();
    },
    function() {
    startAutoPlay();
    }
    );

    // Инициализация индикатора
    $th.find('.slider-indicator').css({
    'left': 0,
    'right': 100 - (100 / num) + '%'
    });

    });
    });[/code]

    Ответить
• Артем: 18.01.2024 в 14:30

  Добрый день! Подскажите как вставить текст в эти области
  [img]https://new.sushi007.ru/wp-content/uploads/2024/01/Screenshot_47.png[/img]

  Ответить
  • Alexander: 21.01.2024 в 08:48

    Тут уже придумывать надо
    - ставить в эту полоску текст из атрибута слайда
    - на ксс править этот текст, чтобы его не перекрывал индикатор (активная белая полоска)
    - и самое главное - это мобильный вариант, в котором этот текст точно не уместится

    Ответить
    • Артем: 06.04.2024 в 13:43

      Подскажите, а можно как то сделать что бы на мобильной версии можно было пальцем листать, а на компьютерной версии сделать стрелочками?

      Ответить
      • Alexander: 07.04.2024 в 08:18

        Тут нет, да и смысла нет его накручивать и изменять, т.к. есть масса альтернативных решений именно со стрелками и точками и т.д.

        Ответить
      • Наталья: 06.08.2026 в 12:40

        Подключить [code]"< script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.19/jquery.touchSwipe.min.js'>< /script>[/code]
        И добавить в $('.slider').each(function() следующее:
        [code]$th.swipe({
        swipeStatus: function (event, phase, direction, distance, duration, fingerCount, fingerData) {
        // Запрещаем FlexSlider реагировать на движение пальца внутри этого элемента
        event.stopPropagation();
        },

        // Срабатывает при свайпе вправо
        swipeRight: function (event, direction, distance, duration, fingerCount) {
        event.stopPropagation();

        let newPos = $(this).attr('data-pos') - 1;
        SliderImgMove($th, num, 0);
        },

        // Срабатывает при свайпе влево
        swipeLeft: function (event, direction, distance, duration, fingerCount) {
        event.stopPropagation();

        let newPos = $(this).attr('data-pos') + 1;
        SliderImgMove($th, num, 0);

        },

        threshold: 10,
        preventDefaultEvents: false // Позволяет странице скроллиться вертикально
        });[/code]
        У меня внутри FlexSlider-а этот блок, который тоже при свайпе перелистывает, поэтому тут учтён этот конфликт и FlexSlider не перелистывает на этом блоке.

        Ответить