Тёмный

Responsive Slider | HTML CSS Swiper JS 

Ecem Gokdogan
Подписаться 530
Просмотров 3,6 тыс.
50% 1

This video includes a responsive slider by Swiper JS. Each slider item has a linear gradient color and its layout is formed by a CSS grid. Also, while hovering over the control buttons, their color moves.
Note: This project is licensed under the Creative Commons Attribution-NonCommercial 4.0 International License. You may use, share, and adapt this work for non-commercial purposes, provided you give appropriate credit. For more details, visit creativecommons.org/licenses/....
Copyright (c) 2023 by Ecem Gokdogan
⭐ All Swiper JS Contents: • Swiper JS
⭐ All Form Contents: • Login Form
⭐ All CSS Animation Contents: • CSS Animation
👩‍💻 My Social Profiles:
Twitter: / ecemgo
Codepen: codepen.io/ecemgo
Github: github.com/ecemgo
🎵 Music Credit:
Sparks by Chaël:
chael-music.com/
/ chaelmusic
/ chael_music
/ chaelmusicofficial
/ @chaelofficial
Music promoted by www.chosic.com/free-music/all/
0:00 Intro
0:18 Adding Swiper JS, Google Fonts and ionicons
0:59 HTML
4:09 CSS
13:42 Javascript

Опубликовано:

 

4 июл 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 7   
@norah8201
@norah8201 4 месяца назад
Love your projects 😍👏🏻👏🏻
@ecemgokdogan
@ecemgokdogan 4 месяца назад
Thanks a lot, Norah! 🙏
@ahmetsoner9106
@ahmetsoner9106 6 месяцев назад
Emeğine sağlık ❤
@RustemmKh
@RustemmKh 2 месяца назад
All Pictures have the same height, but different widths. I can't get the images to be the same height inside the slider. Swiper latest version.
@ecemgokdogan
@ecemgokdogan 2 месяца назад
I used the "width: 100%; aspect-ratio: 3/2; object-fit: cover;" for the images in this slider. "object-fit" helps to resize to fit its container. Instead of using "aspect-ratio", you can give max-width and height to the images but they are responsive if you use "aspect-ratio".
@RustemmKh
@RustemmKh 2 месяца назад
@@ecemgokdogan Reassigned the default width like this: .swiper-slide { width: unset !important; } And everything works!
@ecemgokdogan
@ecemgokdogan 2 месяца назад
Thank you for sharing your solution!🌟
Далее
Become A Master Grid CSS In 13 Minutes
13:46
Просмотров 16 тыс.
Top 10 CSS One Liners That Will Blow Your Mind
13:34
Просмотров 916 тыс.
How to use Swiper JS in Webflow for beginners?
19:19
Просмотров 1,1 тыс.
Every CSS Animation property
9:26
Просмотров 58 тыс.
My Favorite Carousel Library | Swiper.js
5:23
Просмотров 13 тыс.
Position absolute and responsive layouts
27:38
Просмотров 90 тыс.
CSS Tips And Tricks I Wish I Knew Before
12:12
Просмотров 439 тыс.
Real-time Weather App Using Vanilla JavaScript and API
3:10:30