Как называется ползунок справа в браузере
Обновлено: 21.11.2024
DigitalOcean объединяет усилия с CSS-Tricks! Специальное приветственное предложение: получите бесплатный кредит в размере 100 долларов США.
Ползунок – набор полей, расположенных в ряд, между которыми можно перемещаться. Вы знаете, что такое слайдер. В слайдере есть множество функций, которые могут вам понадобиться. Например, вы можете захотеть, чтобы ползунок прокручивался или прокручивался. Или, возможно, вы не хотите этого и хотите, чтобы ползунок реагировал только на нажатия или нажимаемые кнопки для перехода к слайдам. Или вы можете хотеть и то, и другое. Или вы можете объединить все это с автовоспроизведением.
Я собираюсь пойти дальше и сказать, что ползунки — это достаточно сложный компонент пользовательского интерфейса, который использует территорию JavaScript. Flickity - прекрасный пример. Я бы также сказал, что вы можете продвинуться довольно далеко с красивым функциональным слайдером только с HTML и CSS. Такой подход упрощает JavaScript и, осмелюсь сказать, является достойным примером прогрессивного улучшения.
Давайте сначала рассмотрим семантическую разметку.
Набор коробок, вероятно, так же прост, как:
С помощью нескольких строк CSS мы можем расположить их рядом друг с другом и позволить им прокручиваться.
Можно также сделать так, чтобы он плавно прокручивался в мобильных браузерах на основе WebKit.
Мы можем сделать еще лучше!
Давайте закрепим каждый слайд с помощью точек привязки.
Это немного изменилось с момента первоначальной публикации! Я обновляю блоки кода ниже.
Посмотрите, насколько стало лучше:
Слайдер, вероятно, имеет небольшой пользовательский интерфейс для перехода к определенному слайду, поэтому давайте сделаем это и семантически, с якорными ссылками, которые переходят на нужный слайд:
Якорные ссылки, которые на самом деле ведут себя как ссылки на похожий контент, семантические и доступные, чтобы не было проблем (поправьте меня, если я ошибаюсь).
Давайте немного изменим стиль... и у нас есть несколько кнопок, которые выполняют свою работу:
Как на ПК, так и на мобильных устройствах мы по-прежнему можем обеспечить плавное скольжение!
Может быть, мы будем отображать кнопки только в ситуациях, когда не нужно быстро проводить пальцем по экрану?
Если браузер поддерживает тип scroll-snap, он обеспечивает быстрое смахивание. Мы могли бы просто скрыть кнопки, если бы захотели:
Нужно сделать что-то особенное с «активным» слайдом?
Существует способ создать этот слайд с помощью хака с флажками, а также "активный слайд" с помощью :checked , но вы можете возразить, что это немного менее семантично и доступно.
Вот где мы на данный момент.
Здесь все немного ломается.
Использование :target — изящный трюк, но он не работает, например, когда страница загружается без хэша. Или если пользователь прокручивает или листает самостоятельно, не используя кнопки. Я не думаю, что есть какой-то способ обойти это с помощью только HTML и CSS, и я не думаю, что это полностью провал HTML и CSS. JavaScript как раз для этого и предназначен.
JavaScript может определить, какой слайд является активным. JavaScript может установить активный слайд. Вероятно, стоит изучить Intersection Observer API.
Какие еще ограничения?
Мы почти исчерпали возможности одних только HTML и CSS.
- Хотите иметь возможность щелкать мышью? Это не поведение мыши, поэтому вам нужно будет делать все это с событиями DOM. Любое экзотическое интерактивное поведение (например, физика) потребует JavaScript. Хотя есть странный трюк для переключения вертикальной прокрутки на горизонтальную.
- Хотите знать, когда меняется слайд? Как обратный звонок? Это территория JavaScript.
- Нужен автовоспроизведение? Возможно, вы сможете сделать что-то элементарное с помощью флажка :checked и управления состоянием воспроизведения анимации @keyframes, но это будет казаться ограниченным и дерганым.
- Хотите, чтобы он бесконечно прокручивался в одном направлении, повторяясь по мере необходимости? Это потребует клонирования и перемещения вещей в DOM. Или, возможно, грубое неправильное использование .
Я оставлю вас с ними. Я хочу сказать только то, что вы можете многое сделать до того, как вам понадобится JavaScript. Если вы начнете с такой сильной базы, это может стать хорошим выходом из ситуации, независимо от того, что вы будете делать вдобавок к этому.
Маленький слайдер для любых целей, вдохновленный Owl Carousel.
Внимание: tiny-slider работает со статическим контентом и работает только в браузере. Если HTML загружается динамически, обязательно вызовите tns() после его загрузки.
Содержание
Что нового
- Использование % вместо px (больше не нужно пересчитывать ширину каждого слайда при изменении размера окна)
- Использование медиазапросов CSS, если они поддерживаются
- Сохраните значения возможностей браузера в localStorage, чтобы они не проверялись повторно, пока браузер не будет обновлен или пользователь не очистит localStorage вручную.
- Для адаптивного . (Начиная с версии 2.1.0, выпуск 53)
- Вставить элементы управления и перемещаться перед ползунком, а не после (проблема 4)
- Переместите кнопку автовоспроизведения из контейнера навигации. (Начиная с версии 2.1.0)
- Некоторые изменения селектора в файле tiny-slider.scss
Переход на версию 2
- Обновлять элементы управления и/или стили навигации в зависимости от изменения их положения.
- Обновите селекторы ползунков соответствующим образом, если они используются в вашем CSS или JS.
- Обновите стили, связанные с кнопкой автовоспроизведения.
Возможности
| Карусель * | Галерея | ||||
|---|---|---|---|---|---|
| Горизонтальная * | По вертикали | ||||
| Ширина в процентах * | Фиксированная ширина | Автоматическая ширина | |||
| Цикл | ✓ | ✓ | ✓ | ✓ | ✓ |
| Перемотка назад | ✓ | ✓ | ✓< /td> | ✓ | |
| Пролистывание | ✓ | ✓ | ✓ | ✓ | |
| Желоб | ✓ | ✓ | ✓ | ✓ | ✓ |
| Отступы по краям | ✓ | ✓ | ✓ | ✓ | |
| Центр (v2.9.2+) | ✓ | ✓ | < td>✓|||
| Отзывчивый | ✓ | ✓ | ✓ | ✓ | ✓ |
| Отложенная загрузка | ✓ | ✓ | ✓ | ✓ | ✓ |
| Автозапуск | ✓ | ✓ | ✓ | ✓ | ✓ |
| Автоматическая высота | ✓ | ✓ <тд>✓ | ✓ | ✓ | |
| Нажмите/перетащите | ✓ | ✓ | ✓ | ✓ | ✓ |
| клавиши со стрелками | ✓ | < td>✓✓ | ✓ | ✓ | |
| Настроить элементы управления/навигацию | < td>✓✓ | ✓ | ✓ | ✓ | |
| Доступность | ✓ | ✓ | ✓ | ✓ | ✓ |
| Реагировать на изменения видимости DOM | ✓ | ✓ | ✓ | ✓ | ✓< /td> |
| Пользовательские события | ✓ | ✓ | ✓ | ✓ | ✓ |
| Вложенные | ✓ | ✓ | ✓ | ✓ | ✓ |
Установить
bower установить крошечный слайдер или установить крошечный ползунок npm
Использование
1. Добавьте CSS (и полифиллы IE8, если нужно)
2. Добавить разметку
3. Вызов tns()
Вариант А. Добавьте файл tiny-slider.js на свою страницу:
Вариант Б. Импортируйте tns через веб-пакет или накопительный пакет:
Вариант C: Импорт tns напрямую начинается с версии 2.8.2
Параметры
| Опция | Тип | Описание |
|---|---|---|
| контейнер | Узел | Строка | По умолчанию: '.slider' . Элемент-контейнер слайдера или селектор. |
| mode | "carousel" | «галерея» | По умолчанию: «карусель». Управляет поведением анимации. В карусели все сдвигается в сторону, а в галерее используется анимация затухания и смена всех слайдов сразу. |
| ось | «горизонтальная» | «вертикальный» | По умолчанию: «горизонтальный». Ось ползунка. |
| элементы | положительное число | По умолчанию: 1. Число слайдов, отображаемых в окне просмотра. Если слайды меньше или равны элементам , слайдер не будет инициализирован. |
| gutter | целое положительное число | По умолчанию: 0. Отступ между слайдами (в «px»). |
| edgePadding | целое положительное число | По умолчанию: 0. Отступ снаружи (в «px»). |
| fixedWidth | целое положительное | false | По умолчанию: false. Управляет атрибутом ширины слайдов. |
| autoWidth | Boolean | По умолчанию: false. Если задано значение true , ширина каждого слайда будет равна его естественной ширине в виде блока встроенного блока. |
| viewportMax (было fixedWidthViewportWidth ) | положительное целое | false | По умолчанию: false. Максимальная ширина области просмотра для fixedWidth / autoWidth . |
| slideBy | положительное число | «страница» | По умолчанию: 1. Количество слайдов, открываемых одним кликом. |
| center (v2.9.2+)< /td> | Boolean | По умолчанию: false. Центрировать активный слайд в области просмотра. |
| элементы управления | Boolean | По умолчанию: true. Управляет отображением и функциями элементов управления (кнопки «предыдущий/следующий»). Если true , отобразите элементы управления и добавьте все функции. Для лучшей доступности, когда кнопка «предыдущая/следующая» сфокусирована, пользователь сможет управлять ползунком с помощью клавиш со стрелками влево/вправо. |
| controlsPosition | «верхний» | «нижний» | По умолчанию: «верхний». Элементы управления управляют позицией. |
| controlsText | (Text | Markup) Array | По умолчанию: ["prev", "следующий"]. Текст или разметка в кнопках «предыдущий/следующий». |
| controlsContainer | Узел | Строка | false | По умолчанию: false. Элемент-контейнер/селектор вокруг кнопок «предыдущий/следующий». controlsContainer должен иметь как минимум 2 дочерних элемента. |
| prevButton | Node | Строка | false | По умолчанию: false. Настроенные предыдущие кнопки. Эта опция будет проигнорирована, если controlContainer является элементом узла или селектором CSS. |
| nextButton | Node | Строка | false | По умолчанию: false. Настраиваемые следующие кнопки. Эта опция будет проигнорирована, если controlContainer является элементом узла или селектором CSS. |
| nav | Boolean | По умолчанию: правда. Управляет отображением и функциями компонентов навигации (точки). Если true , отобразить навигацию и добавить все функции. |
| navPosition | «top» | «нижний» | По умолчанию: «верхний». Управляет положением навигации. |
| navContainer | Node | Строка | false | По умолчанию: false. Элемент-контейнер/селектор вокруг точек. navContainer должен иметь не меньше дочерних элементов, чем слайды. |
| navAsThumbnails | Boolean | По умолчанию: false . Укажите, являются ли точки миниатюрами. Если true , они всегда будут видны, даже если в окне просмотра отображается более 1 слайда. |
| клавиши со стрелками | Boolean | По умолчанию : ложный. Позволяет использовать клавиши со стрелками для переключения слайдов. |
| скорость | целое положительное число | По умолчанию: 300. Скорость слайд-анимации (в «мс»). |
| autoplay | Boolean | По умолчанию: false. Включает автоматическую смену слайдов. |
| autoplayPosition | “top” | «нижний» | По умолчанию: «верхний». Управляет позицией автовоспроизведения. |
| autoplayTimeout | целое положительное число | По умолчанию: 5000. Время между 2 автоматическое воспроизведение слайдов (в «мс»). |
| autoplayDirection | «forward» | «назад» | По умолчанию: «вперед». Направление движения слайда (по возрастанию/убыванию индекса слайда). |
| autoplayText | Массив (Текст | Разметка) | < td>По умолчанию: ["старт", "стоп"].|
| autoplayHoverPause | Boolean | По умолчанию: false. Прекращает скольжение при наведении курсора. |
| autoplayButton | Node | Строка | false | По умолчанию: false. Настраиваемая кнопка запуска/остановки автовоспроизведения или селектор. |
| autoplayButtonOutput | Boolean | По умолчанию: true. Выводить разметку autoplayButton, когда autoplay имеет значение true, но не указан настраиваемый autoplayButton. |
| autoplayResetOnVisibility | Boolean | По умолчанию : истинный. Приостанавливает скольжение, когда страница становится невидимой, и возобновляет его, когда страница снова становится видимой. (API видимости страницы) |
| animateIn | String | По умолчанию: «tns-fadeIn». Имя класса анимации вступления. |
| animateOut | String | По умолчанию: «tns-fadeOut». Имя класса анимации аутро. |
| animateNormal | String | По умолчанию: «tns-normal». Имя класса анимации по умолчанию. |
| animateDelay | целое положительное | false | По умолчанию: false. Время между каждой анимацией галереи (в «мс»). |
| loop | Boolean | По умолчанию: true. Перемещается по всем слайдам плавно. |
| перемотка назад | Boolean | По умолчанию: false. Перемещается к противоположному краю при достижении первого или последнего слайда. |
| autoHeight | Boolean | По умолчанию: false . Высота контейнера ползунка изменяется в соответствии с высотой каждого слайда. |
| отзывчивый | Объект: < точка останова: < ключ: значение > > | false | По умолчанию: false. Точка останова: целое число. Определяет параметры для различной ширины области просмотра (см. Параметры адаптации). |
| lazyload | Boolean | По умолчанию: false. Включает отложенную загрузку изображений, которые в данный момент не просматриваются, тем самым экономя трафик (см. демонстрацию). ПРИМЕЧАНИЕ: + Класс .tns-lazy-img должен быть установлен для каждого изображения, которое вы хотите отложенно загрузить, если опция lazyloadSelector не указана; + обязателен атрибут data-src со значением реального src изображения; + атрибут ширины для каждого изображения требуется для ползунка autoWidth. |
| lazyloadSelector (v2.9.1+) | String | < td> По умолчанию: '.tns-lazy-img'.|
| touch | Boolean | По умолчанию: true. Активирует обнаружение ввода для сенсорных устройств. |
| mouseDrag | Boolean | По умолчанию: false. Смена слайдов путем их перетаскивания. |
| swipeAngle | целое положительное | Булево значение | По умолчанию: 15. Пролистывание или перетаскивание не будут срабатывать, если установленный угол не находится внутри установленного диапазона. |
| preventActionWhenRunning ( v2.9.1+) | Boolean | По умолчанию: false. Запретить следующий переход во время преобразования ползунка. |
| preventScrollOnTouch (v2.9.1+) | “auto” | «сила» | false | По умолчанию: false. Запретить прокрутку страницы при касании . Если установлено значение «авто», ползунок сначала проверит, соответствует ли направление касания оси ползунка, а затем решит, следует ли предотвратить прокрутку страницы или нет. Если установлено значение «force», ползунок всегда будет препятствовать прокрутке страницы. |
| nested | «inner» | «внешний» | false | По умолчанию: false. Определите взаимосвязь между вложенными ползунками. (см. демонстрацию) Убедитесь, что вы сначала запустили внутренний слайдер, иначе высота контейнера внутреннего слайдера будет неправильной. |
| freezable | Boolean | По умолчанию: true. Укажите, будет ли слайдер заморожен (перестанут работать элементы управления, навигация, автовоспроизведение и другие функции), когда все слайды могут отображаться на одной странице. |
| disable< /td> | Boolean | По умолчанию: false. Отключить ползунок. |
| startIndex | целое положительное число | По умолчанию: 0. Начальный индекс ползунок. |
| onInit | Функция | false | По умолчанию: false. Обратный вызов выполняется при инициализации. |
| useLocalStorage | Boolean | По умолчанию: true. Сохранять переменные возможностей браузера в localStorage и не обнаруживать их при каждом запуске ползунка, если установлено значение true . |
| nonce | String / false | По умолчанию: false. Необязательный атрибут Nonce для встроенного тега стиля, чтобы разрешить использование ползунка без `unsafe-inline Content Security Policy source. |
ПРИМЕЧАНИЕ. До версии 2.0.2 параметры «container», «controlsContainer», «navContainer» и «autoplayButton» по-прежнему должны быть элементами DOM. Например. контейнер: document.querySelector(‘.my-slider’)
Отзывчивые варианты
В адаптивном поле можно переопределить следующие параметры: startIndex , items , slideBy , speed , autoHeight , fixedWidth , edgePadding , gutter , center ,controls ,controlsText ,nav ,autoplay ,autoplayHoverPause ,autoplayResetOnVisibility ,autoplayText ,autoplayTimeout ,touch ,mouseDrag , клавиши со стрелками, отключить
- Точки останова ведут себя как (min-width: точка останова) в CSS, поэтому неопределенный параметр будет унаследован от предыдущих небольших точек останова.
- fixedWidth можно изменить только на другие положительные целые числа. Его нельзя изменить на отрицательное целое число, 0 или другой тип данных. вверх↑
Методы
Ползунок возвращает объект слайдера с некоторыми свойствами и методами после инициализации:
Чтобы получить информацию о ползунке, вы можете использовать метод getInfo() или подписаться на событие. Оба возвращают объект:
Если вместо ползунка вы видите пустое место, велика вероятность того, что на вашем сайте есть ошибки JavaScript. Вы можете проверить ошибки, используя инструменты разработчика вашего браузера. В этом уроке я буду использовать браузер Chrome.
1 Нажмите F12 на странице, где вы можете увидеть свою ошибку. 2 Щелкните вкладку Консоль и обновите страницу. 3
Он выпишет ошибку и путь или код, который вы можете подсказать, что вызывает ее, и вы сможете удалить это расширение/плагин со своего веб-сайта.
Пример ошибки JavaScript. Часть (index):13 указывает на файл и строку, в которой произошла ошибка, что может помочь вам выяснить, что ее вызвало.
💡 Совет. Вы можете щелкнуть правой кнопкой мыши имя файла и скопировать путь к файлу. Это также может дать подсказку о связанном плагине/расширении, вызывающем проблему.
Начинайте исправлять ошибки сверху вниз, потому что одна ошибка может испортить все остальное. Если у вас есть плагины или расширения для минимизации/оптимизации, отключите их, так как они могут быть причиной этих проблем.
Если вы не знаете, что делать с ошибками, и вы являетесь пользователем WordPress, запустите тест на конфликт между плагином и темой. Это укажет вам на подключаемый модуль, который вызывает проблему, и вы сможете обратиться к его разработчикам за решением.
Какой код создает определенную часть веб-сайта?
Эта документация в основном была создана для того, чтобы найти место, куда вы могли бы поместить свой слайдер, если ваш шаблон/тема этого не предлагает, но если вы проверите его, вы сможете понять, как посмотреть код вашего сайт, который может пригодиться и по другим причинам.
Щелкните правой кнопкой мыши часть, где вы хотите разместить ползунок, и выберите «Проверить».Откроется веб-инспектор, где вы увидите HTML-код вашего веб-сайта.
Если вы наведете курсор на код, вы увидите элементы, выделенные в вашем браузере в частях, на которые наведен курсор. Вы должны открыть код и найти ту часть, которая находится над той позицией, где вы хотели бы иметь свой ползунок.
Ваш браузер не поддерживает тег видео.
Чтобы упростить поиск, вы можете просто выбрать часть страницы. Для этого сначала нужно нажать кнопку Выбрать элемент.
Ваш браузер не поддерживает тег видео.
В моем случае я хочу, чтобы ползунок располагался над содержимым страницы, заключенным в этот контейнер:
Теперь вы должны загрузить файлы вашего шаблона или темы с вашего веб-сайта, используя FTP. Не знаете, какие у вас учетные данные FTP? Свяжитесь с хозяином!
Вы сможете найти файлы темы или шаблона по адресу:
WordPress wp-content/themes/[название вашей темы] Joomla templates/[имя вашего шаблона]
Поиск в файлах
Самый простой способ найти содержимое файлов — использовать программу, например Total Commander. Перейдите в папку, где находятся файлы загружаемой темы, и нажмите Alt + F7. Проверьте «Найти текст» и введите код, который вы ищете. Нажмите «Начать поиск», чтобы начать поиск.
Если вы его найдете, код может немного отличаться от того, что вы видели в фактическом html-коде. Вот почему вы не должны искать всю строку, а только классы или id-ы, так как в коде могут использоваться переменные. Найдите открывающий ( 1 ) и закрывающий ( 2 ) теги кода, который вы искали.
Чтобы опубликовать Smart Slider 3 под контентом, добавьте его перед отметкой 1. Узнайте, как это сделать, из документации по публикации PHP для WordPress и Joomla.
Узнайте, какой код CSS изменяет слайдер
Иногда темы и шаблоны закодированы неправильно, возможно, на ползунок влияет неправильный пользовательский код CSS, из-за чего он выглядит иначе, чем вы его настроили. Не так сложно выяснить, откуда берется код, если вы знаете, как его проверить. Во время обучения я использую браузер Chrome.
Правильный вид слайдера (слева) и измененный вид (справа).
Щелкните правой кнопкой мыши на проблемной части и выберите "Проверить элемент".
Откроется консоль браузера, в которой будет выделена выбранная вами часть кода
Код в консоли браузера может сначала не перейти к этому элементу. Например, если над ним есть что-то невидимое, или вы немного щелкнули за его пределами. В этом случае открывайте код, пока не дойдете до того текста/изображения или любого элемента, который вы ищете.
Если вы ищете текст, вы можете найти его, нажав CTRL+F в Windows и CMD+F на Mac. Если вы знаете название изображения, которое хотите найти, вы можете найти его, и браузер выберет этот элемент за вас.
Ваш браузер не поддерживает тег видео.
В правой части консоли браузера вы увидите все коды CSS, примененные к элементу. Отсюда есть два распространенных метода продвижения вперед:
- Снимайте все флажки, пока не найдете тот, который вызывает проблему.
- Поиск имени свойства CSS, которое может изменить внешний вид. Для этого метода вам понадобятся базовые знания CSS. Хотя общеупотребительные английские слова, такие как "фон" или "цвет", дадут довольно точный результат.
Ваш браузер не поддерживает тег видео.
Скопируйте найденные коды в простой текстовый редактор. Затем взгляните на правую сторону, где написано имя файла CSS. Щелкните его правой кнопкой мыши и выберите Копировать адрес ссылки .
Если вы не можете или не хотите редактировать файл, попробуйте написать более надежный код CSS, чтобы переопределить его.
Как усилить код CSS?
Если вы используете больше элементов HTML или кнопок, убедитесь, что у них разные классы, и не только на одном слайде, но и на других. Потому что если они этого не сделают, то первое правило CSS будет применяться к каждому из них из-за одинакового приоритета с точки зрения браузера.
Приоритетный пример
Код будет таким:
Вот список более сильных приоритетов, начиная с самого низкого:
Как сделать так, чтобы мой код CSS применялся только к определенному месту?
Бывают случаи, когда люди хотят что-то перезаписать на веб-сайтах, но знают только о самом сильном методе перезаписи (используя !important;), который также перезаписывает все остальное на веб-сайте. Здесь вы увидите пример того, как вы можете сделать так, чтобы ваш код применялся только к той части, где вы действительно хотите, чтобы ваш код был. Сначала вам нужно знать, как вы можете использовать веб-инспекторы, чтобы выяснить, как проверить код вашего сайта. После того, как вы это поняли, вот пример структуры html:
Допустим, вы хотите изменить цвет "Текст". Исходный код, задающий цвет этому тексту, будет таким:
Теперь, если бы вы использовали этот код, чтобы перезаписать его:
Это перезапишет каждый текст, а также "Внутренний текст", "Другой текст" и "Второй текст". Все внутри "основного" класса.
Тогда вы можете попробовать углубиться в занятия:
что было бы немного лучше, но все же вы бы перезаписали и "Второй текст", так как он относится к тому же классу. Что вам нужно сделать, чтобы ваш код применялся только к определенным местам, так это то, что вы должны записать всю структуру, чтобы убедиться, что то, что вы пишете, уникально, например:
Как видно из классов "mydiv", только "текст" имеет "контейнер" в качестве родителя, поэтому с помощью этого кода вы указываете только туда, куда хотите.
Следующая важная вещь заключается в том, что вы не должны использовать !important, если можете этого избежать. Например, в этом случае вам не нужно будет добавлять его в свой код, потому что на этот раз ваш «mydiv» является более близким классом к вашему тексту, чем исходный «основной» класс, а это означает, что он сильнее. Кроме того, если бы у вас были те же селекторы уровня, этот код был бы еще сильнее, потому что вы указываете два родительских класса. Подробнее о приоритетах можно прочитать здесь. Так что в целом этого будет достаточно:
И это поможет вам избежать «конфликтов», например, если вы поместите наш ползунок внутри «mydiv», рядом с «Текстом», мы и, вероятно, все плагины используем идентификаторы для идентификации своих кодов. Это может помочь нам создавать более сильные CSS-коды, потому что один ID-код все еще сильнее, так как этот двухуровневый (или может быть больше) селектор классов уровня.
Спасибо за отзыв. Не удалось отправить отзыв. Повторите попытку позже.
Вкладка «Общие» находится на странице настроек слайдера.
Опубликовать
Существует множество вариантов публикации слайдера, и вы можете найти большинство из них здесь. Подробнее о публикации слайдера.
Общие
☝️ Примечание. Тип вашего ползунка указан рядом с меткой «Общие». Например. если вы используете ползунок "Витрина", раздел будет помечен как "Общие - Ползунок витрины".
Название слайдера. Важно давать уникальные имена, потому что наверняка вы создадите много ползунков, и через какое-то время будет не так просто найти, какой какой.
Эскиз
Эскиз ползунка, который отображается на панели инструментов. Больше нигде не используется.
Ярлык ARIA
Атрибут aria-label используется для определения строки, помечающей текущий элемент.
Псевдоним
Псевдоним
Псевдоним слайдера, который вы можете использовать в WordPress для шорткода/кода PHP для публикации слайдера.
Использовать в качестве привязки
В вашем собственном HTML:
В Smart Slider по любой ссылке:
Если вы используете тему Divi, прочтите этот документ, так как по умолчанию наш код не совместим с Divi.
Плавная прокрутка
По умолчанию браузеры просто переходят к якорям. С помощью этой опции вы можете плавно прокручивать слайдер. Он добавляет поведение прокрутки: smooth; в тег HTML вашей страницы.
Переключить слайд
Пролистайте до слайда
Вы можете прокручивать страницу до ползунка, используя параметр «Переключить слайд».
Дизайн слайдера
Фоновое изображение слайдера Pro
Эта опция позволяет установить фоновое изображение для слайдера, которое будет позади всех слайдов. Это означает, что фон слайдера виден только в том случае, если у ваших слайдов нет фона.
Исправлено Pro
Включает эффект параллакса на фоне слайдера.
☝️ Примечание. Этот параметр отображается, только если установлено фоновое изображение!
Фиксированный фон не работает на ползунках, где включена принудительная полная ширина из-за ограничений браузера!
Размер Pro
Устанавливает размер фона слайдера.
☝️ Примечание. Этот параметр отображается только в том случае, если установлено фоновое изображение!
Цвет фона Pro
Эта опция позволяет вам установить цвет фона для ползунка, который будет позади всех слайдов.
☝️ Примечание. Этот параметр отображается только в том случае, если установлено фоновое изображение!
Фоновое видео Pro
Вы можете установить фоновое видео для всего слайдера, которое будет позади всех слайдов.
Приглушено Pro
Вы можете отключить видео.
Петля Pro
Повторяет видео навсегда.
Режим заполнения Pro
Регулирует, как видео заполняет ползунок.
- Заполнить: видео заполняет ползунок, и если есть разница в размере, видео обрезается.
- По размеру: видео помещается в слайдер без обрезки.
- По центру: видео находится в середине ползунка без изменения размера.
Выровнять
Возможно, вы не хотите, чтобы наш ползунок имел ширину 100% для заполнения своего контейнера, и в этом случае вы можете поместить ползунок в левое, центральное или правое положение. Это работает только в том случае, если вы используете макет в штучной упаковке с отключенным масштабированием.
☝️ Примечание. Место, куда вы поместите ползунок, по-прежнему будет занимать все 100% пространства, только ползунок будет выравниваться внутри этого 100% пространства. Если вы хотите выровнять его рядом с вашими текстами, вы должны сделать это в HTML-коде своей страницы/записи или статьи!
Пример:
Отступ
Вы можете установить фиксированное поле вокруг ползунка. Это не зависит от устройства, поэтому старайтесь не использовать большие значения.
Подкладка Pro
Вы можете поместить исправление вокруг ползунка. Это не зависит от устройства, поэтому старайтесь не использовать большие значения.
Перспектива Про
Когда анимация слоев происходит в 3D и показывается с расстояния, которое является точкой перспективы. Лучший способ представить это, как в реальной жизни, если вы смотрите что-то с расстояния 1 см, это будет выглядеть иначе, чем то, что вы видите с расстояния 1 метр.
Ширина границы Pro
Вы можете поместить границу вокруг ползунка.
Цвет границы Pro
Вы можете поместить границу вокруг ползунка.
Радиус границы Pro
Вы можете закруглить угол ползунка.
Предустановка CSS Slider Pro
Вы можете выбрать слайдер из списка предустановленных кодов CSS.
Слайдер CSS Pro
Вы можете написать здесь свой собственный код CSS (без селекторов!) для дальнейшего оформления слайдера.
Спасибо за отзыв. Не удалось отправить отзыв. Повторите попытку позже.
Читайте также: