Анимация слайдера Swiper | Автозапуск, прогресс разбиения на страницы и эффект отображения текста...
Автор: Ecem Gokdogan
Загружено: 2025-11-26
Просмотров: 429
В этом уроке показано, как создать анимированный слайдер с помощью Swiper JS. Он включает в себя внешний слайдер с автовоспроизведением, полосами прогресса для пагинации, анимацией появления текста и плавными переходами между слайдами, а также внутренний слайдер с креативным эффектом. Два слайдера соединены и двигаются вместе. Вы узнаете, как стилизовать макет, управлять анимацией, разработать полосу прогресса и сделать слайдеры полностью адаптивными для всех размеров экрана.
📂 Swiper JS: https://swiperjs.com/get-started
⭐Списки:
Swiper JS: • Swiper JS
GSAP: • GSAP
Слайдер с ванильным Javascript и CSS: • Slider with Vanilla Javascript & CSS
Фоновая анимация: • Background Animation
CSS-эффект наведения: • CSS Hover Effect
👩💻 Мои профили в соцсетях:
X: https://x.com/ecemgo
Codepen: https://codepen.io/ecemgo
GitHub: https://github.com/ecemgo
TikTok: / ecemgo
Bluesky: https://bsky.app/profile/ecemgo.bsky....
🕔 Временные метки:
0:00 – Вступление
0:40 – HTML
1:50 – CSS: стилизовать ползунки и создать анимацию появления текста
4:18 – JavaScript: настроить и подключить ползунки
5:26 – CSS: стилизовать пагинацию и добавить медиазапросы
6:49 – JavaScript: активировать прогресс пагинации анимация
8:27 – JavaScript: настройка автовоспроизведения
Доступные форматы для скачивания:
Скачать видео mp4
-
Информация по загрузке:
