Сайт

Скрипт слайдера для сайта html: Слайдер для сайта на чистом CSS и JavaScript

17.08.2023

Как изменить интервал переключения слайдов в слайдере? — Вопрос от Максим Юрченко

  • Вопросы
  • Горячие
  • Пользователи
  • Вход/Регистрация
>

Категории вопросов

Задать вопрос +

Основное

  • Вопросы новичков (16701)
  • Платные услуги (2173)
  • Вопросы по uKit (83)

Контент-модули

  • Интернет-магазин (1448)
  • Редактор страниц (237)
  • Новости сайта (501)
  • Каталоги (809)
  • Блог (дневник) (115)
  • Объявления (296)
  • Фотоальбомы (434)
  • Видео (258)
  • Тесты (60)
  • Форум (581)

Продвижение сайта

  • Монетизация сайта (222)
  • Раскрутка сайта (2467)

Управление сайтом

  • Работа с аккаунтом (5369)
  • Поиск по сайту (428)
  • Меню сайта (1771)
  • Домен для сайта (1550)
  • Дизайн сайта (13523)
  • Безопасность сайта (1493)
  • Доп. функции (1312)

Доп. модули

  • SEO-модуль (226)
  • Опросы (63)
  • Гостевая книга (99)
  • Пользователи (435)
  • Почтовые формы (321)
  • Статистика сайта (199)
  • Соц. постинг (214)
  • Мини-чат (91)

Вебмастеру

  • JavaScript и пр. (645)
  • PHP и API на uCoz (236)
  • SMS сервисы (10)
  • Вопросы по Narod.
    ru (435)
  • Софт для вебмастера (39)
  • Вопросы
  • Дизайн сайта
  • Как изменить интервал…

Добрый день имеется сайт , к коде css и html не могу наити строчку в которой меняется интервал смены слаидера! где и как поменять интервал?

  • сайт
  • слайдер
| Автор: Максим Юрченко | Категория: Дизайн сайта
Изменение категории | | Автор: webanet

…

HTML-слайдер-ответ — jsPsych

Текущая версия: 1.1.2. Смотрите историю версий.

Этот подключаемый модуль отображает HTML-контент и позволяет участнику отвечать, перетаскивая ползунок.

Параметры

В дополнение к параметрам, доступным во всех плагинах, этот плагин принимает следующие параметры. Необходимо указать параметры со значением по умолчанию undefined . Другие параметры можно не указывать, если допустимо значение по умолчанию.

Параметр Тип Значение по умолчанию Описание
стимул Строка HTML не определено Отображаемая строка
этикетки массив строк [] Ярлыки отображаются на равном расстоянии друг от друга на ползунке. Например, две метки будут размещены на концах ползунка. Три этикетки размещают две на концах и одну посередине. Четыре поместят два на концах, а два других будут на 33% и 67% ширины ползунка.
метка_кнопки строка «Продолжить» Метка кнопки завершения пробного периода.
мин целое число 0 Устанавливает минимальное значение ползунка.
макс. целое число 100 Устанавливает максимальное значение ползунка.
слайдер_старт целое число 50 Устанавливает начальное значение ползунка
шаг целое число 1 Устанавливает шаг ползунка. Это наименьшая величина, на которую может измениться ползунок.
слайдер_ширина целое число ноль Установите ширину ползунка в пикселях. Если оставить null, то ширина будет равна самому широкому элементу на дисплее.
требование_движения логическое значение ложь Если это правда, участник должен переместить ползунок, прежде чем нажимать кнопку «Продолжить».
подсказка строка ноль Эта строка может содержать разметку HTML. Любой контент здесь будет отображаться под стимулом. Намерение состоит в том, что его можно использовать для напоминания о действии, которое должен предпринять участник (например, какую клавишу нажать).
stimulus_duration числовой ноль Как долго отображать стимул в миллисекундах. Свойство CSS видимости стимула будет установлено на скрыто по истечении этого времени. Если это значение равно нулю, то стимул останется видимым до окончания испытания.
пробная_продолжительность числовой ноль Время ожидания ответа участника перед завершением испытания в миллисекундах. Если участник не ответит до того, как истечет этот таймер, ответ участника будет записан как нулевой для испытания, и испытание закончится. Если значение этого параметра равно null, то пробная версия будет ждать ответа неопределенно долго.
response_ends_trial логическое значение правда Если true, то испытание будет завершено всякий раз, когда участник ответит (при условии, что он ответит до истечения срока, указанного параметром trip_duration). Если false, пробная версия будет продолжаться до тех пор, пока не будет достигнуто значение для trip_duration . Вы можете установить для этого параметра значение false , чтобы заставить участника просматривать стимул в течение фиксированного периода времени, даже если он ответит до истечения времени.

Сгенерированные данные

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

Имя Тип Значение
ответ числовой Числовое значение ползунка.
рт числовой Время в миллисекундах, необходимое участнику для ответа. Время измеряется с момента первого появления стимула на экране до ответа участника.
стимул строка HTML-контент, отображаемый на экране.
слайдер_старт числовой Начальное значение ползунка.

Установить

Использование файла JavaScript, размещенного на CDN:

Использование файла JavaScript, загруженного из дистрибутива выпуска GitHub:

Использование NPM:

 npm установить @jspsych/plugin-html-slider-response
 
 импортировать htmlSliderResponse из '@jspsych/plugin-html-slider-response';

Примеры

Отображение вопроса до тех пор, пока участник не переместит ползунок

CodeDemo

 var пробная версия = {
    тип: jsPsychHtmlSliderResponse,
    стимул: `

        
Насколько вероятно, что команда А выиграет этот матч?

        <дел>
            
КОМАНДА А

            
10 побед, 5 поражений, 6 ничьих

        

        <дел>
            
КОМАНДА Б

            
6 побед, 4 поражения, 11 ничьих
`, require_movement: правда, метки: ['100% шанс', '50% шанс', '0% шанс'] };

Открыть демо в новой вкладке

Документация | Кин-слайдер

Полная документация по установке и использованию Keen-Slider. Для просмотра документации по старой версии щелкните здесь. Для получения документации о том, как использовать его в React Native , щелкните здесь.

Начало работы

Использование этой библиотеки очень просто и объясняется во многих примерах кода. Вы можете добавить его в любой проект JavaScript или Typescript, над которым вы работаете, несколькими способами.

Установка

Установите Keen-слайдер из npm.

Использование

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

или, поскольку он также поставляется в виде пакета UMD, вы можете вставить его прямо в свой HTML.

После того, как вы импортировали библиотеку, вы можете запустить ее. KeenSlider нуждается в контейнере в качестве первого аргумента, который может быть строкой селектора CSS , HTMLElement или функция , которая возвращает элемент HTML или строку выбора CSS. При желании вы можете передать Options и Event hooks в качестве второго аргумента. Плагины могут быть переданы в качестве третьего аргумента. KeenSlider возвращает некоторые свойства для дальнейших действий.

Использование в React

В библиотеке есть хук для реакции. Поэтому использование немного отличается. Как и любой хук реакции, useKeenSlider должен вызываться на верхнем уровне вашего компонента. По желанию можно пройти Опции и Перехватывает события в качестве первого аргумента. Плагины могут быть переданы в качестве второго аргумента. Хук возвращает массив с двумя элементами. Первый элемент — это функция обратного вызова, которую необходимо использовать в качестве ссылки для контейнера вашего ползунка. Второй элемент содержит экземпляр ползунка, а точнее Свойства .

Использование в Vue 3

Библиотека поставляется с функцией, которая использует составной API Vue 3. Поэтому использование немного отличается. При желании вы можете передать Опции и Перехватывает события в качестве первого аргумента. Плагины могут быть переданы в качестве второго аргумента. Хук возвращает массив с двумя элементами. Первый элемент — это ref() , который должен использоваться в качестве ссылки для контейнера вашего ползунка. Второй элемент содержит ref() , который содержит экземпляр ползунка или, скорее, Свойства .

Использование в React Native

Для документации по использованию в React Native нажмите здесь.

Опции

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

точки останова : объект

Изменяет параметры или обработчики событий для заданной точки останова, переопределяя параметры на корневом уровне. Каждая 9Ключ 0136 должен быть допустимой строкой медиа-запроса, например. (ориентация: книжная) и (минимальная ширина: 500 пикселей) . Каждое значение должно быть объектом с параметрами и/или обработчиками событий. Примечание. Если совпадают несколько медиа-запросов, применяется последний из них. См. пример ниже:

defaultAnimation : объект

Устанавливает анимацию по умолчанию для функций moveToIdx , next и prev .

  • продолжительность : число — Продолжительность анимации в миллисекундах.
  • easing : функция — Ослабление анимации как ( время : число ) => число .

отключено : логическое значение

Если для этого параметра установлено значение true , ползунок отключен. Стили и события применяться не будут. По умолчанию false .

драга : логическое значение

Включает или отключает мышь и сенсорное управление. По умолчанию истина

dragSpeed ​​ : номер | функция

Установите скорость, которая применяется к ползунку при его перетаскивании. Число может быть передано как значение или функция. Минусовые значения инвертируют направление смахивания. По умолчанию 1

начальный : номер

Устанавливает индекс изначально видимого слайда. По умолчанию 1 .

цикл : логический | объект

Включает или отключает функции карусели/петли ползунка. Эта опция также может быть объектом, в котором вы можете установить min и/или max индекс карусели.

По умолчанию ложь .

режим : ‘привязка’ | ‘бесплатно’ | ‘свободная защелка’

Задает анимацию, которая применяется после окончания перетаскивания. По умолчанию ‘привязка’ .

диапазон : объект

Независимо от номера слайда, вы можете определить диапазон доступных слайдов.

  • мин : номер — устанавливает минимальный доступный индекс
  • max : номер — устанавливает максимально доступный индекс
  • align : boolean — выравнивает максимальное положение до конца последнего слайда

режим рендеринга : «точность» | ‘производительность’ | «на заказ»

Возможно, производительность рендеринга браузера замедляется, если у вас есть слайды с некоторой сложностью разметки и CSS. Чтобы противодействовать этой проблеме, вы можете установить для этого параметра значение «производительность» . Если вы хотите создать свой собственный рендерер, вы можете установить для этого параметра значение ‘custom’ . По умолчанию ‘точность’ .

rtl : логический

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

резинка : логическое значение

Включает или отключает поведение резиновой ленты для перетаскивания и анимации после перетаскивания. По умолчанию true .

селектор : строка | HTMLЭлемент[] | Список узлов | функция | ноль

Указывает способ получения слайдов из DOM. Это может быть строка селектора css , массив HTMLElement или функция , которая получает контейнер и возвращает массив из HTMLElement , NodeList , HTMLCollection , строка или null . Если вы не хотите, чтобы ползунок позиционировал или масштабировал слайды, установите для этого параметра значение null . По умолчанию ‘.keen-slider__slide’ .

слайдов : объект | номер | функция | ноль

Задает конфигурацию слайдов. Каждый раз, когда происходит обновление, изменение размера или изменение параметров, конфигурация слайда обновляется. Поэтому все функции вызываются снова. По умолчанию ноль .

  • число — Устанавливает количество слайдов на указанное число.

  • объект — указывает конфигурацию слайдов с объектом дополнительных свойств.

    • происхождение : ‘авто’ | ‘центр’ | число — Устанавливает происхождение слайдов. ‘авто’ — настраивает исходное положение всех слайдов таким образом, чтобы первый слайд выравнивался по левому краю, а последний — по правому. ‘center’ — Центрирует слайды. номер — Относительно окна просмотра. По умолчанию ‘авто’ .
    • номер : номер | функция | null — ведет себя аналогично слайдам , если значением является число или null . Также может быть функцией, которая возвращает число или null . По умолчанию null .
    • perView : номер | функция | ‘auto’ — определяет размер слайдов по отношению к области просмотра/контейнеру. Если установлено auto размер слайда определяется на основе размера соответствующего элемента HTML. Следовательно, селектор -options не должен быть null . Также может быть функцией, которая возвращает номер или «авто». По умолчанию 1 .
    • интервал : номер | функция — определяет расстояние между слайдами в пикселях. Может быть функцией, возвращающей число. По умолчанию 0 .

  • 9Функция 0245 — задает конфигурацию слайдов с помощью функции, которая возвращает массив конфигураций слайдов. Конфигурация слайда имеет следующие необязательные свойства:

    • origin : число — Определяет, где находится начало слайда в окне просмотра. По умолчанию 0 .
    • size : number — Определяет относительный размер слайда по отношению к области просмотра. По умолчанию 1 .
    • интервал : число — определяет расстояние до следующего слайда по отношению к области просмотра. По умолчанию 0 .

    Функция получает в качестве первого аргумента размер контейнера и слайды в виде массива HTML-элементов в качестве второго аргумента.

  • null — слайды будут определяться количеством слайдов, полученных селектором -option.

вертикально : логическое значение

Изменяет направление ползунка с горизонтального на вертикальное. (Примечание: высота контейнера должна быть определена, если значение vertical равно true) Значение по умолчанию: false .

Перехватчики событий

Перехватчики событий — это функции, которые ползунок вызывает в течение своего жизненного цикла. Функции, получающие Properties в качестве единственного аргумента. Перехватчики событий являются частью Options и могут быть указаны таким же образом.

Ниже приведены обработчики событий и время их срабатывания:

animationStarted — Анимация запущена. Анимация выполняется после окончания перетаскивания или при вызове moveToIdx() или animator.start() .

animationStopped — Анимация остановлена.

animationEnded — Анимация завершена.

создано — Слайдер создан.

уничтожено — Слайдер уничтожен.

деталиИзменено — детали -свойство изменилось. При каждом перемещении, после изменения параметра и при каждой инициализации или изменении размера.

перетащили — Ползунок перетащили.

dragStarted — Перетаскивание началось.

dragChecked — Направление перетаскивания проверено и является допустимым.

dragEnded — Перетаскивание завершено.

beforeOptionsChanged — Параметры будут изменены.

вариантовИзменено — Изменились параметры, например. из-за обновления, изменения размера (при изменении количества слайдов) или изменения точки останова.

slideChanged — Изменился активный или самый видимый слайд.

обновлено — функция обновления была вызвана из-за изменения размера или другого триггера

Методы и свойства

Независимо от того, реализован ли слайдер с помощью хука реакции или простого javascript, он возвращает экземпляр или объект свойств для дальнейших действий. Эти свойства описаны ниже:

аниматор : объект

Аниматор — модуль, отвечающий за анимацию движения трека. Он имеет следующие свойства:

  • active : boolean — Указывает, активна ли анимация.

  • start : function — Запускает новую анимацию. Требуется массив из ключевых кадров. Ключевые кадры обрабатываются последовательно.

    Ключевой кадр : Объект имеет следующие свойства:

    • расстояние : число — Расстояние, сдвинутое в анимации.
    • продолжительность : число — продолжительность анимации в миллисекундах.
    • EarlyExit : номер — Опционально устанавливает более раннее завершение ключевого кадра.
    • смягчение : функция — смягчение анимации как ( время : номер ) => номер .

  • стоп : функция — Останавливает текущую активную анимацию, если она есть.

  • targetIdx : номер | null — содержит индекс, который будет активен в конце анимации.

контейнер : HTMLElement

HTML-элемент, определяемый как контейнер/область просмотра для слайдов.

уничтожить : функция

Функция, уничтожающая ползунок при вызове. Все события и примененные стили будут удалены.

излучают : функция

Генерирует событие при вызове. Требуется eventName : строка в качестве аргумента.

moveToIdx : функция

При вызове изменяет активный слайд с анимацией.

  • индекс : число — Указывает индекс, который должен быть активным.
  • absolute : boolean — определяет, является ли индекс абсолютным. По умолчанию false .
  • анимация : объект — Изменяет анимацию по умолчанию. Объект может иметь следующие свойства:
    • продолжительность : число — Устанавливает продолжительность анимации в миллисекундах. По умолчанию 500 .
    • смягчение : функция — Устанавливает функцию смягчения. По умолчанию t => 1 + —t * t * t * t * t .

следующий : функция

При вызове меняет текущий активный слайд на следующий. Если существует.

на : функция

Регистрирует обработчик событий при вызове.

  • eventName : строка — указывает имя события.
  • обратный вызов : функция — Функция, которая будет вызываться при этом событии.
  • удалить : логическое значение — Должна ли функция быть установлена ​​или удалена. По умолчанию false .

опции : объект

Используемые в настоящее время параметры и Перехватчики событий в отношении активной точки останова.

предыд. : функция

При вызове меняет текущий активный слайд на предыдущий. Если существует.

размер : номер

Размер контейнера/окна просмотра, ширина или высота, в зависимости от вертикального варианта.

слайдов : HTMLElement[]

Слайды как массив элементов HTML.

дорожка : объект

  • absToRel : функция — Преобразует абсолютный индекс в соответствующий относительный индекс.

  • добавить : функция — Добавляет переданное значение к позиции дорожки.

  • детали : объект | null — Текущие детали трека. Положение, длина, размеры и расстояния зависят от размера контейнера/окна просмотра. Устанавливается в null , если ползунок отключен или не готов.

    • абс : число — Абсолютный индекс текущего активного слайда.
    • длина : число — Длина дорожки по отношению к размеру области просмотра.
    • мин : число — минимальное положение в соответствии с достижимым слайдом
    • max : номер — максимальное положение в соответствии с достижимым слайдом
    • minIdx : номер — минимальный индекс в соответствии с достижимым слайдом
    • maxIdx : номер — максимальный индекс в соответствии с достижимым слайдом
    • position : number — Текущая позиция трека по отношению к размеру области просмотра.
    • прогресс : номер — Относительное положение пути по отношению к длине.
    • rel : число — Относительный индекс текущего активного слайда.
    • слайдов : массив — Детали каждого слайда в виде массива объектов . Каждый объект имеет следующие свойства.
      • абс : число — Абсолютный индекс этого слайда. Надежно, только если часть > 0
      • расстояние : число — Расстояние от слайда до начала окна просмотра.
      • часть : число — Указывает, какая часть слайда видна в окне просмотра.
      • размер : число — Размер слайда по отношению к размеру области просмотра.
    • slidesLength : число — Длина слайдов и расстояние между ними.

  • distToIdx : функция — Преобразует пройденное расстояние в соответствующий индекс.

  • idxToDist : функция — Возвращает расстояние до переданного индекса. Второй аргумент является необязательным и имеет логическое значение, указывающее, является ли переданный индекс абсолютным. Третий аргумент является необязательным и указывает позицию ссылки.

  • init : функция — Переинициализирует дорожку. При желании можно передать новый активный индекс.

  • до : функция — Устанавливает переданное значение в качестве позиции дорожки.

  • скорость : функция — Возвращает текущую скорость трека как расстояние по отношению к области просмотра в миллисекунду.

обновление : функция

Обновляет ползунок при его вызове. Если изменение размера не было вызвано или параметры необходимо изменить.

Атрибуты

  • data-keen-slider-clickable — Установите этот атрибут для каждого элемента, который должен предотвращать события касания/щелчка на ползунке.