Use saved searches to filter your results more quickly
Cancel Create saved search
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window.
Reload to refresh your session.
Тестовое задание для ВК.
eugpoloz/vk-slider
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Switch branches/tags
Branches Tags
Could not load branches
Nothing to show
Could not load tags
Nothing to show
Name already in use
A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Cancel Create
- Local
- Codespaces
HTTPS GitHub CLI
Use Git or checkout with SVN using the web URL.
Work fast with our official CLI. Learn more about the CLI.
Слайдер SWIPER. Подробный курс. Подключение настройка примеры.
Sign In Required
Please sign in to use Codespaces.
Launching GitHub Desktop
If nothing happens, download GitHub Desktop and try again.
Launching GitHub Desktop
If nothing happens, download GitHub Desktop and try again.
Launching Xcode
If nothing happens, download Xcode and try again.
Launching Visual Studio Code
Your codespace will open once ready.
There was a problem preparing your codespace, please try again.
Latest commit
Git stats
Files
Failed to load latest commit information.
Latest commit message
Commit time
README.md
Слайдер и range-слайдер на базе слайдера для ВК. Демо здесь.
Оба слайдера поддерживают mouse, touch и keyboard-ивенты, а также оформлены в соответствии с релевантной WAI-ARIA.
type SliderProps = < min: number, max: number, step?: number, value?: number, defaultValue?: number, onChange?: Function, disabled?: boolean, ariaLabelledBy?: string >;
Пример использования в функциональном компоненте:
let [value, updateValue] = React.useState(5); return ( max= value= onChange= ariaLabelledBy=»Слайдер» />);
type RangeSliderProps = < min: number, max: number, step?: number, value?: number[], onChange?: Function, disabled?: boolean, ariaLabelledBy?: string >;
Пример использования в функциональном компоненте:
let [value, updateValue] = React.useState([2, 5]); return ( max= step= value= onChange= ariaLabelledBy=»Range-слайдер» />);
Задачи оформить компоненты как отдельный готовый к деплою в NPM пакет не стояло, поэтому я ограничилась приложением-демо.
В дизайне не было :focus и прочих им подобных состояний. Я не стала сильно с ними возиться, но немного поигралась с тенями, чтобы было видно :hover и :focus .
Что можно было бы улучшить при необходимости из того, чего тут нет:
- добавить симпатичных spring-анимаций,
- добавить rtl,
- добавить поддержку вертикального слайдера.
Проект сделан с помощью Create React App.
Работают все его стандартные скрипты:
- yarn start запускает приложение в development mode (можно перейти на http://localhost:3000/vk-slider, чтобы посмотреть в браузере).
- yarn test запускает тест,
- yarn build собирает production билд,
- yarn eject .
Есть также yarn deploy , который собирает production билд и деплоит получившуются /build-папку на github pages.
Реализовать компонент Slider. Дизайн здесь.
- есть возможность указать дискретность шага;
- есть возможность указать диапазон;
- поддерживаются touch и mouse события;
- при ресайзе размера окна компонент продолжает корректно работать;
- у компонента понятный DX. Мы специально не конкретизируем слово “понятный”. Хочется узнать, как вы понимаете этот термин;
- использование TS *
- реализация RangeSlider *
Условия со звездочкой приветствуются, но необязательны)
Результат залить на github, живой пример — на github pages.
Источник: github.com
Подборка слайдеров для сайта на чистом CSS
Пример 1: Маленький слайдер с автоматической прокруткой фото
Это самый простой слайдер без возможности самостоятельного скроллинга фотографий. Рекомендуемый размер изображений 500x300px.
HTML разметка
CSS оформление
Пример 2: Слайдер, стилизованный под рамку картины
Рекомендуемый размер изображений 400x300px. Слайдер отображается ровно по центру страницы. Адаптива под мобильные устрайства — нет. Если вы новичок в веб, то корректно установить данный слайдер себе на сайт будет проблематично из-за абсолютного позиционирования. Используются тени (box-shadow). Есть возможность самостоятельно скроллить фото.
Radio кнопки для прокрутки изображений появляются при наведении мышки. Скачать пример 2
HTML разметка
CSS оформление
.slider_picture{background-color:#fff;box-shadow:inset 0 0 2px hsla(0,0%,0%,.2),0 3px 1px hsla(0,0%,100%,.75),0 -1px 1px 2px hsla(0,0%,0%,.1);height:18.75em;left:50%;margin:-9.875em -13em;padding:.5em;position:absolute;top:50%;width:25em} .slider_picture:before{background-color:#22130c;bottom:-2.5em;box-shadow:inset 0 1px 1px 1px hsla(0,0%,100%,.2),inset 0 -2px 1px hsla(0,0%,0%,.4),0 5px 50px hsla(0,0%,0%,.25),0 20px 20px -15px hsla(0,0%,0%,.2),0 30px 20px -15px hsla(0,0%,0%,.15),0 40px 20px -15px hsla(0,0%,0%,.1);content:»;left:-2.5em;position:absolute;right:-2.5em;top:-2.5em;z-index:-1} .slider_picture:after{background-color:#fff5e5;bottom:-1.5em;box-shadow:0 2px 1px hsla(0,0%,100%,.2),0 -1px 1px 1px hsla(0,0%,0%,.4),inset 0 2px 3px 1px hsla(0,0%,0%,.2),inset 0 4px 3px 1px hsla(0,0%,0%,.2),inset 0 6px 3px 1px hsla(0,0%,0%,.1);content:»;left:-1.5em;position:absolute;right:-1.5em;top:-1.5em;z-index:-1} .slider_picture li{box-shadow:0 -1px 0 2px hsla(0,0%,0%,.03);list-style:none;position:absolute} .slider_picture input{display:none} .slider_picture label{background-color:#111;background-image:linear-gradient(transparent,hsla(0,0%,0%,.25));border:.2em solid transparent;bottom:.5em;border-radius:100%;cursor:pointer;display:block;height:.5em;left:24em;opacity:0;position:absolute;transition:.25s;width:.5em;visibility:hidden;z-index:10} .slider_picture label:after{border-radius:100%;bottom:-.2em;box-shadow:inset 0 0 0 .2em #111,inset 0 2px 2px #000,0 1px 1px hsla(0,0%,100%,.25);content:»;left:-.2em;position:absolute;right:-.2em;top:-.2em} .slider_picture:hover label{opacity:1;visibility:visible} .slider_picture input:checked + label{background-color:#fff} .slider_picture:hover li:nth-child(1) label{left:.5em} .slider_picture:hover li:nth-child(2) label{left:2em} .slider_picture:hover li:nth-child(3) label{left:3.5em} .slider_picture:hover li:nth-child(4) label{left:5em} .slider_picture img{height:18.75em;opacity:0;transition:.25s;width:25em;vertical-align:top;visibility:hidden} .slider_picture li input:checked ~ img{opacity:1;visibility:visible;z-index:10}
Пример 3: Обычный слайдер со стрелками — вперед и назад
Рекомендуемый размер изображений 960x640px. Слайдер полностью адаптирован под мобильные устройства. Есть возможность подписывать названия слайдов. Для отображения стрелочек — вперед и назад, — используется стандартный набор иконок font-awesome. На мой взгляд этот слайдер самый оптимальный.
Источник: obninsksite.ru
17 плагинов для создания слайдера на WordPress. Бонус: слайдер из колонок Elementor.
Слайдер — один из самых противоречивых элементов сайта. С одной стороны многие считают, что на сайте не должно быть слайдеров — они могут путать пользователей, ухудшать UX, влияя на скорость загрузки страницы и даже оказывать негативное влияние на SEO.
Обратная сторона медали заключается в том, что у слайдера есть не только недостатки:
- Слайдер может организовать и точно настроить вашу маркетинговую цель;
- Слайдер отвечает за общую визуальную привлекательность сайта;
- Слайдер делает то, чего по сути не могут сделать другие элементы сайта — оживляет его;
- Может и улучшишь UX, потому что в слайдерах обычно содержится целый пласт полезной информации для посетителей сайта.
Решать за вас установить слайдер на сайт, или нет, я не могу. Но если вы решите что слайдер вам нужен, то ниже в этой статье вы можете найти 17 лучших плагинов WordPress для создания такого функционала. Я добавлю пару строк описания про особенно интересные решения, но не буду цитировать заезженную и избитую информацию из других источников. Цель этой статьи — познакомить вас с качественными и рабочими вариантами для вашего сайта.
Содержание
- Вне рейтинга – Steroids for Elementor
- 1. Slider Revolution
- 2. MetaSlider
- 3. Smart Slider
- 4. Master Slider
- 5. Soliloquy
- 6. RoyalSlider
- 7. Slider by 10Web
- 8. Crelly Slider
- 9. Slide Anything
- 10. Prime Slider
- 11. Transition Slider
- 12. WOW Slider
- 13. Social Slider Widget
- 14. Hero Slider
- 15. SlideDeck
- 16. Wonder Slider Lite
- 17. Slider by Supsystic
Вне рейтинга – Steroids for Elementor
У меня недавно вышло видео с обзором этого плагина и его особенностей. Это даже не совсем слайдер в прямом смысле слова, а дополнение для конструктора страниц Elementor, позволяющее вам сделать в том числе и слайдер. Все работает достаточно просто, видео-инструкция находится ниже:
Крутейшая особенность этого плагина заключается в том, что вы можете создать слайдер из колонок Elementor. Что в этом крутого? По сути вы можете вставить в слайдер любые элементы этого конструктора — от заголовка, до анимации.
Из того что я забыл упомянуть в своем видео, данный плагин, как это ни странно, не сильно замедляет ваш сайт (почти нет разницы). Те кто работает с Elementor и другими контакторами должны были понять на сколько это важно.
1. Slider Revolution
Один из самых крутых слайдеров на WP для первого экрана. Он особенно хорош с точки его зрения модернизации (кастомизации) и наличия широкого функционала: бесконечные блоки, крутые анимации, внутренние CSS настройки и многое другое. Есть платная и бесплатная версия. Плюсы:
- Продажи: 387 093+
- Рейтинги: 5 звезд – 9664
- Простота установки, использования и настройки
2. MetaSlider
Smart Slider 3 — один из самых мощных и интуитивно понятных плагинов WordPress для создания слайдеров. Полностью адаптивный, SEO-оптимизированный и работает с любой темой WordPress. Плюсы:
- Активные установки: 600 000+
- Рейтинги: 5 звезд – 804
- Уникальные макеты со слоями
- Простота установки, использования и настройки
3. Smart Slider
Еще один неплохой слайдер, который просто выполняет свои немногочисленные задачи. Регулярно обновляется и наполняется новыми функциями. Плюсы плагина:
- Активные установки: 80 000+
- Рейтинги: 5 звезд – 792
- Отзывчивый, оптимизированный для SEO и оптимизированный для скорости
- Простота установки, использования и настройки
4. Master Slider
Зачем в очередной раз рассказывать про слайдер и его плюсы, если все можно увидеть на видео?
5. Soliloquy
Хороший слайдер, который я лично протестировал, перед тем как включить его в эту статью. Не могу сказать, что он чем-то сильно лучше предыдущих, но все же у него есть свои особенности, с которыми можно ознакомится на видео: