CSS3 istifadə edərək cavab verən kaydırıcı. Cavab verən slayderlər seçimi Çarpaz brauzer sürüşdürməsi

4 noyabr 2019-cu il Post yeniləndi

Yuri Nemets

Təmiz CSS sürgüləri + bonus kaydırıcısı

CSS slayderlərinin Javascript sürgüləri ilə müqayisədə bəzi üstünlükləri var. Bu üstünlüklərdən biri yükləmə sürətidir. Böyük ölçülərdə (müxtəlif ekranlar üçün optimallaşdırma olmadıqda) yalnız sürgülər üçün şəkillər istifadə edilmir, həm də skriptlərin yüklənməsinə müəyyən vaxt sərf olunur. Ancaq məqalədə yalnız təmiz CSS istifadə edən sürgüləri görəcəksiniz.

Kaydırıcılar haqqında bir veb saytında tapdıqlarım budur:

1. CSS3 şəkil slayderi

Slaydlarda naviqasiya etmək üçün radio düymələrindən istifadə edən CSS slayderi. Bu radio düymələri sürgülərin altında yerləşir. Həmçinin, radio düymələrinə əlavə olaraq, naviqasiya sol və sağdakı oxlardan istifadə etməklə həyata keçirilir. Hazırda hansı şəklin göstərildiyini izləmək üçün :checked psevdo-siniflərindən istifadə olunur.

2. Miniatürləri olan CSS3 şəkil slayderi

Əvvəlki CSS slayderindən fərqli olaraq, burada aşağıdakı radio düymələri əvəzinə bütün şəkillərin kiçik şəkilləri var ki, bu da şəkil qalereyası yaratarkən rahatdır. Şəkillər özünəməxsus effektlə dəyişir: böyüdüldükdə rəvan şəkildə yox olur.

3. CSS ilə qalereya

Lakin bu CSS slayderi satış səhifələri üçün mükəmməldir. Bir qayda olaraq, açılış səhifələrini hazırlayarkən (səhifələri satarkən) bir çox veb tərtibatçıları ilk ekranda (sürüşmədən) ziyarətçinin bu səhifədə onun üçün mövcud olan bütün üstünlükləri dərhal görməsi üçün ən başlanğıcda bir kaydırıcıyı yerləşdirir. Hər şeyə əlavə olaraq, bu kaydırıcı adaptivdir, bu da gözəldir.

4. Əlaqələri olmayan CSS slayderi

Dərhal qeyd etmək istərdim ki, bu sürgü keçidlərdən istifadə etmir! Varsayılan olaraq, əsas təsvirə (slayd) əlavə olaraq daha 2 slayd görünür. Onlar əsasın arxasında yerləşirlər. Slaydların dəyişdirilməsi gözəl rejimdə baş verir: əvvəlcə iki slayd bir-birindən ayrılır və sonra əsas olacaq slayd mərkəzləşir. Sonra slayd böyüdülür və digərlərinin qarşısına qoyulur.

5. Cavab verən CSS3 Slider

İdarəetməsi radio düymələrinə əsaslanan başqa bir adaptiv sürüşdürmə. Bu kaydırıcının necə görünəcəyini görmək üçün müxtəlif cihazlar ah - Siz ya brauzer pəncərəsini özünüz dəyişə bilərsiniz, ya da kaydırıcının olduğu səhifədə müxtəlif qurğular üçün xüsusi nişanlar var, onların üzərinə klikləməklə, slayderin kompüter, planşet və ya smartfonda necə görünəcəyini görəcəksiniz.

***BONUS SAYDER***

Yuxarıda təqdim olunan bütün sürgülərə əlavə olaraq, sizi daha biri ilə sevindirmək istəyirəm. Bu slayder şəkil qalereyası yaratmaq üçün mükəmməldir. Onun nə etdiyini sözlə izah edə bilməzsiniz, buna görə videoda hər şeyi izləmək daha yaxşıdır:

Nəticə

Sürgülərdən istifadə edərək, şəkil qalereyalarını gözəl şəkildə tərtib edə, onları daha yığcam yerləşdirə, ziyarətçiyə əldə edəcəyi əsas üstünlükləri dərhal göstərmək üçün satış səhifəsinin birinci ekranına (səhifənin sürüşmədən görünən hissəsi) bir slayder daxil edə bilərsiniz. . Siz hələ də sürgüləri harada və necə istifadə edə biləcəyiniz bir çox yol tapa bilərsiniz, lakin bir şey aydındır - onlar düzgün istifadə edildikdə faydalıdır.

Məqalədə müzakirə olunan məqamlar.

Hal-hazırda, bir kaydırıcı - karusel - sadəcə bir iş saytında, portfel veb saytında və ya hər hansı digər resursda olması lazım olan bir funksionallıqdır. Tam ekran şəkil sürgüləri ilə yanaşı, üfüqi karusel sürgüləri istənilən veb dizayna yaxşı uyğun gəlir.

Bəzən kaydırıcı sayt səhifəsinin üçdə birini tutmalıdır. Burada karusel kaydırıcısı keçid effektləri və həssas planlarla istifadə olunur. Elektron ticarət saytları fərdi yazılarda və ya səhifələrdə birdən çox fotoşəkil göstərmək üçün karusel kaydırıcısından istifadə edir. Slayder kodu ehtiyaclarınıza uyğun olaraq sərbəst istifadə edilə və dəyişdirilə bilər.

İstifadə JQuery birlikdə HTML5 Və CSS3, siz səhifələrinizi unikal effektlərlə təmin etməklə daha maraqlı edə və ziyarətçilərin diqqətini saytın müəyyən sahəsinə cəlb edə bilərsiniz.

Slick – müasir karusel kaydırıcı plagini

Səliqəli sərbəst paylanmış jQuery plaginidir, onun tərtibatçıları onların həllinin bütün sürüşmə tələblərinizi ödəyəcəyini iddia edirlər. Adaptiv sürüşmə - karusel "də işləyə bilər plitələr"mobil cihazlar üçün və " işarələ və Yerləşdir"Masa üstü versiyası üçün.

Keçid effekti ehtiva edir" zəifləmə», maraqlı fürsət « mərkəz rejimi", avtomatik sürüşdürmə ilə şəkillərin tənbəl yüklənməsi. Yenilənmiş funksionallığa slaydlar və slayd filtri əlavə etmək daxildir. Hamısı tələblərinizə uyğun olaraq plagini konfiqurasiya etməyinizi təmin etmək üçün.

Owl Carousel 2.0 – jQuery – toxunma cihazlarında istifadə üçün plagin

Bu plagin həm yeni başlayanlar, həm də təcrübəli tərtibatçılar üçün uyğun olan çoxlu funksiyalara malikdir. Bu, karusel sürgüsünün yenilənmiş versiyasıdır. Onun sələfi də eyni adda idi.

Slayderdə ümumi funksionallığı yaxşılaşdırmaq üçün bəzi daxili plaginlər var. Animasiya, video oynatma, slayderin avtomatik oynatılması, tənbəl yükləmə, avtomatik hündürlüyün tənzimlənməsi - əsas xüsusiyyətlər.

Xüsusiyyət dəstəyi işarələ və Yerləşdir plaqinin daha rahat istifadəsi üçün daxil edilmişdir mobil cihazlar.
Plugin hətta mobil cihazların kiçik ekranlarında böyük şəkilləri göstərmək üçün mükəmməldir.

Səhifədə kaydırıcıyı yerləşdirməyə imkan verən kifayət qədər kiçik, lakin funksional cəhətdən zəngin jquery plagini - kiçik bir nüvəyə malik olan və çoxlu sayt resurslarını istehlak etməyən karusel. Plugin animasiya ilə şaquli və üfüqi kaydırıcıları göstərmək və qalereyadan şəkillər dəstlərini yaratmaq üçün istifadə edilə bilər.

AnoSlide – Ultra yığcam cavab verən jQuery slayderi

Ultra kompakt jQuery slayderi– funksionallığı adi sürgüdən daha böyük olan karusel. O daxildir önizləmə başlıqlara əsaslanan karusel və slayder şəklində çoxlu şəkilləri göstərən bir şəkil.

Owl Carousel – JQuery slayder – karusel

– dəstəyi olan sürüşmə toxunma ekranları və texnologiya işarələ və Yerləşdir, asanlıqla inteqrasiya olunur HTML- kod. Plugin, xüsusi hazırlanmış işarələmə olmadan gözəl karusellər yaratmağa imkan verən ən yaxşı sürgülərdən biridir.

3D qalereya - karusel

İstifadə edir 3D- əsaslanan keçidlər CSS– üslublar və bir az Javascript kod.

Möhtəşəm 3D karusel. Deyəsən, bu hələ beta versiyadır, çünki indi onunla bağlı bir neçə problem aşkar etdim. Öz sürgülərinizi sınamaq və yaratmaqla maraqlanırsınızsa, bu karusel çox kömək edəcəkdir.

Bootstrap istifadə edərək karusel

Responsive Slider – Yeni veb saytınız üçün uyğun texnologiyadan istifadə edən karusel.

Bootstrap çərçivəsinə əsaslanan Moving Box karusel kaydırıcısı

Portfel və biznes saytlarında ən populyardır. Bu tip kaydırıcı - karusel - tez-tez istənilən növ veb saytlarda tapılır.

Bu kiçik ölçülü slayder istənilən ekran qətnaməsi olan cihazlarda işləməyə hazırdır. Sürgü həm dairəvi, həm də karusel rejimlərində işləyə bilər. Kiçik dairə bu tip digər sürgülərə alternativ kimi təqdim olunur. Quraşdırılmış dəstək mövcuddur əməliyyat sistemləri iOS Və Android.

Dairəvi rejimdə kaydırıcı olduqca maraqlı görünür. Əla metod dəstəyi işarələ və Yerləşdir və avtomatik sürüşmə sistemi.

Güclü, adaptiv, karusel sürgü müasir veb sayt üçün mükəmməldir. İstənilən cihazda düzgün işləyir. Üfüqi və şaquli rejimləri var. Onun ölçüsü cəmi 1 KB-a endirilib. Ultra kompakt plagin də əla hamar keçidlərə malikdir.

Vay - sürüşdürmə - karusel

Veb saytınız üçün orijinal slayder yaratmağınıza kömək edə biləcək 50-dən çox effekt ehtiva edir.

Slayderin necə uyğunlaşdığını görmək üçün brauzerinizin pəncərəsinin ölçüsünü dəyişdirin. Bxslider 50-dən çox fərdiləşdirmə variantları ilə gəlir və müxtəlif keçid effektləri ilə xüsusiyyətlərini nümayiş etdirir.

jCarousel - jQueryşəkillərinizə baxmağı təşkil etməyə kömək edəcək bir plagin. Nümunədə göstərilən bazadan asanlıqla fərdi şəkil karuselləri yarada bilərsiniz. Slayder adaptivdir və mobil platformalarda işləmək üçün optimallaşdırılıb.

Scrollbox – jQuery plagini

Sürüşmə qutusu kaydırıcıyı yaratmaq üçün kompakt plagin - karusel və ya mətn işarəsi. Əsas xüsusiyyətlərə siçan üzərində fasilə ilə şaquli və üfüqi sürüşmə effektləri daxildir.

Sadə bir karusel kaydırıcısı. Sürətli bir plaginə ehtiyacınız varsa, bu 100% uyğundur. Slayderin işləməsi üçün tələb olunan yalnız əsas xüsusiyyətlərlə təmin edilir.

Flexisel: Cavab verən JQuery Carousel Slider Plugin

Yaradıcılar köhnə məktəb plaginindən ilhamlanaraq, onun surətini hədəfə almışdı düzgün əməliyyat mobil və planşet cihazlarda sürüşdürmə.

Mobil cihazlarda işləyərkən cavab verən tərtibat brauzer pəncərəsinin ölçüsünə yönəlmiş tərtibatdan fərqlidir. həm aşağı, həm də yüksək qətnamə ilə ekranlarda işləmək üçün mükəmməl uyğunlaşdırılmışdır.

Elastislide - adaptiv sürüşmə - karusel

Cihaz ekranının ölçüsünə mükəmməl uyğunlaşır. Müəyyən bir qətnamədə nümayiş etdirmək üçün minimum şəkillər sayını təyin edə bilərsiniz. Şaquli sürüşdürmə effekti ilə birlikdə sabit sarğıdan istifadə edərək, şəkil qalereyaları ilə karusel sürüşdürməsi kimi yaxşı işləyir.

Sərbəst mövcud olan slayder Woothemes. Haqlı olaraq ən yaxşılardan biri hesab olunur adaptiv sürgülər. Plugin bir neçə şablondan ibarətdir və həm təcrübəsiz istifadəçilər, həm də mütəxəssislər üçün faydalı olacaq.

Möhtəşəm Karusel

Möhtəşəm Karusel– adaptiv şəkil slayderi aktivdir jQuery. kimi bir çox məzmun idarəetmə sistemini dəstəkləyir WordPress, Drupal Və Joomla. Həmçinin dəstəkləyir Android Və iOS və heç bir uyğunluq problemi olmayan əməliyyat sistemlərinin masaüstü versiyaları. Quraşdırılmış heyrətamiz karusel şablonları kaydırıcıyı şaquli, üfüqi və dairəvi rejimlərdə istifadə etməyə imkan verir.

Pulsuz kolleksiya HTML və CSS slayder kod nümunələri: kart, müqayisə, tam ekran, cavab verən, sadə və s. İyun 2018 kolleksiyasının yenilənməsi. 7 yeni əşya.

Mündəricat

Əlaqədar Məqalələr

Kod haqqında

HTML/CSS/JS-də əlavə ekranlar dəsti. PNG nişanları, CSS3 keçidləri və flexbox laylarla şəxsi təcrübə.

HTML, CSS və JavaScript məlumat kartı kaydırıcısı.
Andy Tran tərəfindən hazırlanmışdır
23 noyabr 2015-ci il

Masaüstü və mobil brauzerlərdə işləyən foto slayder.
Taron tərəfindən hazırlanmışdır
29 sentyabr 2014-cü il

Müqayisə (əvvəl/sonra) sürgüləri

Kod haqqında

CSS və jQuery ilə hazırlanmış sadə və təmiz görüntü müqayisəsi slayderi, tam cavabdeh və toxunuşa hazırdır.

Kod haqqında

Yalnız html və css ilə əvvəl və sonra slayder.

Kod haqqında

Şəkil slayderindən əvvəl/sonra iki qatımdan istifadə edərək yeni ideya ilə oynamaq. Minimal saxlamaq. Vanil saxlamaq. Faydalıdırsa bəyənin :)

Vanilla JS, minimal, gözəl görünmək.
Huw tərəfindən hazırlanmışdır
3 iyul 2017-ci il

Kod haqqında

JavaScript ilə "bölünmüş ekran" kaydırıcı elementi.

Bir SVG daxilində əvvəl və sonra sürüşdürmə üçün kiçik bir təcrübə. Maskalama işi olduqca sadə edir. Hamısı SVG olduğundan, şəkillər və başlıqlar birlikdə gözəl ölçülür. Sürgü idarəetməsi üçün GreenSock-un Draggable və ThrowProps plaginlərindən istifadə edilmişdir.
Craig Roblewsky tərəfindən hazırlanmışdır
17 aprel 2017-ci il

Slayder üçün fərdiləşdirilmiş diapazon girişindən istifadə edir.
Dudley Storey tərəfindən hazırlanmışdır
14 oktyabr 2016-cı il

HTML, CSS və JavaScript ilə cavab verən görüntü müqayisəsi slayderi.
Ege Görgülü tərəfindən hazırlanmışdır
3 avqust 2016-cı il

HTML5, CSS3 və JavaScript video əvvəl və sonra müqayisə slayder.
Dudley Storey tərəfindən hazırlanmışdır
24 aprel 2016-cı il

CSS3 və jQuery ilə təchiz edilmiş 2 şəkli tez müqayisə etmək üçün lazımlı sürüklənə bilən sürüşdürmə.
CodyHouse tərəfindən hazırlanmışdır
15 sentyabr 2014-cü il

Tam ekran sürgüləri

Kod haqqında

Radio girişlərinə əsaslanan sadə sürüşdürmə. 100% təmiz HTML + CSS. Ox düymələri ilə də işləyir.

Cavab verən: bəli

Asılılıqlar: -

Kod haqqında

Tam ekran slayderi üçün gözəl keçid effekti.

Kod haqqında

Swiper.js ilə üfüqi paralaks sürüşmə slayderi.

Kod haqqında

Siçan hərəkətində həssas hamar 3D perspektivli sürüşdürmə.

HTML, CSS və JavaScript ilə tam ekran qəhrəman təsviri slayderi (panelləri sürüşdürün).
Tobias Bogliolo tərəfindən hazırlanmışdır
25 iyun 2017-ci il

Animasiyanı təkmilləşdirmək üçün Sürət və Sürət effektlərindən (UI Paketi) istifadə edən slayderlə qarşılıqlı əlaqə. Animasiya ox düymələri, naviqasiya klikləri və ya sürüşdürmə yuvası vasitəsilə işə salınır. Bu versiyaya qarşılıqlı əlaqənin bir hissəsi kimi sərhədlər daxildir.
Stephen Scaff tərəfindən hazırlanmışdır
11 may 2017-ci il

Şəkilləri göstərmək üçün minimal üslubda sadə slayder. Şəklin bir hissəsi hər slaydda açılır.
Nathan Taylor tərəfindən hazırlanmışdır
22 yanvar 2017-ci il

Şey olduqca asan özelleştirilebilir. BacararsanŞrifti, şriftin ölçüsünü, şriftin rəngini, animasiya sürətini təhlükəsiz dəyişdirin. JS-də massivdəki yeni sətirin ilk hərfi yeni slaydda görünəcək. Yeni slaydı yaratmaq (və ya silmək) asan: 1. JS-də massivdə yeni şəhər əlavə edin. 2. Slayd dəyişəninin sayını dəyişdirin və CSS-də scss siyahısına yeni bir şəkil qoyun.
Ruslan Pivovarov tərəfindən hazırlanmışdır
8 oktyabr 2016-cı il

1. Şəklin maskalanması üçün düzbucaqlı haşiyə üçün klip yolu (yalnız veb dəst).
2. Bu maska ​​üçün qarışdırma rejimi.
3. Ağıllı rəng sistemi, sadəcə olaraq rəng adınızı və dəyərinizi sass xəritəsinə daxil edin və sonra elementlərə bu rəng adı ilə uyğun sinif əlavə edin və hər şey işləyəcək!
4. Sərin kreditlər yan menyusu (demonun mərkəzindəki kiçik düyməni klikləyin).
5. Vanilla js sadəcə ilə< 200 lines of code (basically it’s just adds/removes classes).

Təmiz JS və CSS (kitabxanalar olmadan) əsasında sürüşmə ilə bu əyri sürüşdürmə.
Viktor Belozyorov tərəfindən hazırlanmışdır
3 sentyabr 2016-cı il

Pokemon dizaynı ilə sürüşmə animasiyası.
Pham Mikun tərəfindən hazırlanmışdır
18 avqust 2016-cı il

Mürəkkəb animasiya və yarı rəngli bucaqlı mətn ilə HTML, CSS və JavaScritp slayderi.
Ruslan Pivovarov tərəfindən hazırlanmışdır
13 iyul 2016-cı il

HTML, CSS və JavaScript ilə kaydırıcı paralaks effekti.
Manuel Madeyra tərəfindən hazırlanmışdır
28 iyun 2016-cı il

Dalğalanma effektli HTML, CSS və JavaScript slayderi.
Pedro Kastro tərəfindən hazırlanmışdır
21 may 2016-cı il

HTML, CSS və JavaScript ilə Clip-Path aşkarlayan slayder.
Nikolay Talanov tərəfindən hazırlanmışdır
16 may 2016-cı il

GSAP + Əvvəlki/növbəti slaydlara baxış olan Slick slayder.
Karlo Videk tərəfindən hazırlanmışdır
27 aprel 2016-cı il

HTML, CSS və JavaScript tam səhifə slayderi.
Joseph Martucci tərəfindən hazırlanmışdır
28 fevral 2016-cı il

HTML, CSS və JavaScript ilə tam sürüşmə prototipi.
Gluber Sampaio tərəfindən hazırlanmışdır
6 yanvar 2016-cı il

Greensocks TweenLite/Tweenmax ilə animasiya edilmiş tam ekran, cavab verən, slayd şousu.
Arden tərəfindən hazırlanmışdır
12 dekabr 2015-ci il

Tam Ekran slayderi (GSAP Timeline) #1 HTML, CSS və JavaScript ilə.
Diaco M.Lotfollahi tərəfindən hazırlanmışdır
23 noyabr 2015-ci il

Xüsusi effektləri olan HTML və CSS slayderi.
Nikolay Talanov tərəfindən hazırlanmışdır
12 noyabr 2015-ci il

HTML, CSS və JavaScript ilə paralaks ilə tam ekran sürüşdürmə slayderi.
Nikolay Talanov tərəfindən hazırlanmışdır
12 noyabr 2015-ci il

Konseptin sübutu fırlanan sürüşdürmə. Klip yolundan və çoxlu riyaziyyatdan istifadə edir.
Tayler Johnson tərəfindən hazırlanmışdır
16 aprel 2015-ci il

Sadə tam ekran CSS & jQuery slayderi translateX və translate3d hamarlığından istifadə edin!
Yusif tərəfindən hazırlanmışdır
19 avqust 2014-cü il

Cavab verən Sürgülər

Kod haqqında

Şəkillər Opacity Slider

HTML və CSS-də şəkillərin qeyri-şəffaflıq slayderi.

Uyğun brauzerlər: Chrome, Edge, Firefox, Opera, Safari

Cavab verən: bəli

Asılılıqlar: -

Kod haqqında

Yığılmış Çevik Slayd Düzeni

Bu nümunə bir-birinin üzərinə yığılmış slaydların tərtibatını necə yaratmağı təsvir edir (xüsusilə solğun daxil/çıxış keçidləri üçün faydalıdır). Bu, hündürlüyünü təyin etmədən və mövqedən yayınmadan əldə edilir: mütləq; buna görə də onlar tam çevikdir və normal səhifə axınında saxlamaq asandır.

Uyğun brauzerlər: Chrome, Edge, Firefox, Opera, Safari

Cavab verən: bəli

Asılılıqlar: -

Kod haqqında

Cavab verən Slayder

HTML, CSS və JavaScript-də animasiya edilmiş cavab verən slayder.

Uyğun brauzerlər: Chrome, Edge, Firefox, Opera, Safari

Cavab verən: bəli

Asılılıqlar: animate.css

Kod haqqında

Maskalı Mətn ilə Slayder

Yalnız maskalı mətnli CSS slayderi.

Uyğun brauzerlər: Chrome, Edge (qismən), Firefox, Opera, Safari

Cavab verən: bəli

Asılılıqlar: -

Kod haqqında

Paralaks effektli şəkil və məzmun.

Kod haqqında

Yalnız CSS slayd qalereyası.

Uyğun brauzerlər: Chrome, Edge, Firefox, Opera, Safari

Cavab verən: bəli

Asılılıqlar: -

Kod haqqında

Təmiz HTML/CSS Kaydırıcısı

Dairəvi SVG tərəqqi çubuğu ilə təmiz HTML/CSS kaydırıcısı.

Uyğun brauzerlər: Chrome, Edge (qismən), Firefox (qismən), Opera, Safari

Cavab verən: bəli

Asılılıqlar: font-awesome.css

Kod haqqında

Yalnız CSS-dən istifadə edərək və şəkillərin aspekt nisbətini saxlayaraq, miniatürlərlə tamamilə cavab verən şaquli slayder yaratmaq üçün sınaq.

Kod haqqında

Vanil JavaScript ilə hazırlanmış sadə Flexbox şəkil sürgü/karusel.

Kod haqqında

Bu, slayd hər dəfə dəyişdirildikdə hərəkət bulanıqlığı effektini simulyasiya edən təcrübədir. O, SVG Gaussian Blur filtrindən və bəzi CSS açar kadrlarının animasiyasından istifadə edir. Effekt düzgün işləmək üçün heç bir Javascript tələb etməsə də, bu nümunədə Javascript yalnız kaydırıcının funksionallığı üçün istifadə olunur.

Kod haqqında

JS ilə sərin animatsiya slayderi.

Kod haqqında

Bu, SVG naxışlarının yalnız CSS-li şəkil slayderi üçün maskalı şəkillər yaratmağa necə kömək edə biləcəyinə dair sınaqdır.

Bəzi sürüşmə keçidləri araşdırılır. Paralaks seçimi ilə sürüşdürmə sürüşdürməsi aktivləşdirildi. Əsasən burada CSS filtrləri ilə oynayır.
Mirko Zorić tərəfindən hazırlanmışdır
12 iyun 2017-ci il

Bəzi incə ara animasiyaları olan sadə GSAP slayderi.
Goran Vrban tərəfindən hazırlanmışdır
9 iyun 2017-ci il

HTML, CSS və JavaScript ilə Slider UI.
Mergim Ujkani tərəfindən hazırlanmışdır
6 iyun 2017-ci il

Slider GSAP versiyası 2.
Em An tərəfindən hazırlanmışdır
4 may 2017-ci il

Sadə əlavə sinif razılaşmasından istifadə edərək bir az slicey keçid kaydırıcısı. Vaxtı bir az yumşaltmalı və mobil üçün ən yaxşı yanaşmaya qərar verməlisiniz (sadəcə yığın, toxunma hadisələri əlavə edin, şəkilləri tam görünüş pəncərəsi edin və s. Sürüşdürmə çarxını (sürüşdürmə), naviqasiya düymələrini və ox düymələrini dəstəkləyir. Həmçinin məzmun sarğısını artıra bilər. şəkillərin görünüş pəncərəsini canlandırmayan vəziyyətdə doldurmaq üçün, bu da çox gözəldir.
Stephen Scaff tərəfindən hazırlanmışdır
3 yanvar 2017-ci il

Slayder animasiya effekti yaratmaq üçün CSS sərhəd-şəkil və klip yolundan istifadə edilmişdir.
Emily Hayman tərəfindən hazırlanmışdır
31 dekabr 2016-cı il

Flexbox ilə qurulmuş kiçik sürüşdürmə. Bir qədər həssasdır və sürüşmə sahəsinin yanında sabit elementlərə malik ola bilər.
Robert tərəfindən hazırlanmışdır
28 noyabr 2016-cı il

HTML, CSS kətan slayderi.
Nvagelis tərəfindən hazırlanmışdır
29 oktyabr 2016-cı il

HTML, CSS və JavaScript 3D hamar kaydırıcı.
Eduardo Allegrini tərəfindən hazırlanmışdır
19 oktyabr 2016-cı il

Sprinkles ilə HTML və CSS cupcake slayder!
Jamie Coulter tərəfindən hazırlanmışdır
14 oktyabr 2016-cı il

mario s maselli tərəfindən hazırlanmışdır
12 oktyabr 2016-cı il

HTML, CSS və JavaScript ilə UI animasiya #2 araşdırılır.
mario s maselli tərəfindən hazırlanmışdır
22 sentyabr 2016-cı il

HTML, CSS və JavaScript ilə UI animasiya #3 tədqiqi.
mario s maselli tərəfindən hazırlanmışdır
22 sentyabr 2016-cı il

HTML, CSS və JavaScript ilə E-ticarət Slider v2.0.
Pedro Kastro tərəfindən hazırlanmışdır
17 sentyabr 2016-cı il

HTML, CSS və JavaScript əyri fon ilə təmiz sürüşdürmə.
Ruslan Pivovarov tərəfindən hazırlanmışdır
13 sentyabr 2016-cı il

HTML, CSS və JavaScript ilə UI animasiya №1 araşdırılır.
mario s maselli tərəfindən hazırlanmışdır
8 sentyabr 2016-cı il

CSS-in gücündən həzz alın: Yuxarı və aşağı hər orta şəkil və işıq qutusu ilə səhifələnmiş slayder.
Kseso tərəfindən hazırlanmışdır
15 avqust 2016-cı il

Cüt ekspozisiya 2 fərqli təsviri bir şəkildə birləşdirən fotoqrafik texnikadır.
Misaki Nakano tərəfindən hazırlanmışdır
3 avqust 2016-cı il

CSS3 xüsusiyyət klipindən istifadə edən sürüşdürmə.
Pedro Kastro tərəfindən hazırlanmışdır
1 may 2016-cı il

Cavab verən CSS kaydırıcısı.
Geekwen tərəfindən hazırlanmışdır
19 aprel 2016-cı il

Bu, birbaşa tərcümə edilə bilməyən gözəl mənaları olan sözləri göstərən sadə sürüşmə təcrübəsidir. Fokus: zərif tipoqrafiya və sadə, lakin cəlbedici keçidlər.
Joe Harry tərəfindən hazırlanmışdır
5 aprel 2016-cı il

Animasiya ideyası CSS klip yolunun dəyərini dəyişdirmək və bununla da maskalama effekti yaratmaqdır.
Bhakti Al Akbar tərəfindən hazırlanmışdır
31 mart 2016-cı il

HTML, CSS və JavaScript ilə dot slayder.
Derek Nguyen tərəfindən hazırlanmışdır
16 mart 2016-cı il

HTML, CSS və JavaScript ilə prizma effektli slayder.
Victor tərəfindən hazırlanmışdır
12 mart 2016-cı il

HTML, CSS və JavaScript ilə sürüşən fon qalereyası.
Ron Gierlach tərəfindən hazırlanmışdır
30 noyabr 2015-ci il

HTML, CSS və JavaScript slider həlli.
Jurgen Genser tərəfindən hazırlanmışdır
30 sentyabr 2015-ci il

Sequence.js tərəfindən dəstəklənən məhsul slayderi. Sequence.js - Unikal sürgülər, təqdimatlar, bannerlər və digər addım-əsaslı proqramlar yaratmaq üçün cavab verən CSS animasiya çərçivəsi.
Ian Lunn tərəfindən hazırlanmışdır
15 sentyabr 2015-ci il

Kiçik dairə xüsusi kaydırıcı.
Bram de Haan tərəfindən hazırlanmışdır
11 avqust 2015-ci il

HTML, CSS və JavaScript ilə cavab verən GTA V slayderi.
Eduard Mayer tərəfindən hazırlanmışdır
24 yanvar 2014-cü il

Bu, sürgü kimidir, lakin naməlum səbəblərdən kub şəklində fırlanır.
Eric Brewer tərəfindən hazırlanmışdır
4 dekabr 2013-cü il

Hugo DarbyBrown tərəfindən hazırlanmışdır
28 avqust 2013-cü il

Sadə Sürgülər

HTML, CSS və vanil JavaScript ilə şəkil üst-üstə düşmə slayderi.
Yugam tərəfindən hazırlanmışdır
7 iyun 2017-ci il

HTML və CSS xüsusiyyətli şəkil slayderi.
Joshua Hibbert tərəfindən hazırlanmışdır
16 iyun 2016-cı il

Çox Oxlu Şəkil Kaydırıcısı

HTML, CSS və JavaScript ilə çox oxlu şəkil slayderi.
Burak Can tərəfindən hazırlanmışdır
22 iyul 2013-cü il

Cube slider, HTML5/CSS3 3d çevirmələri ilə kiçik təcrübə.
İlya K. tərəfindən hazırlanmışdır.
26 iyun 2013-cü il

Zaman bir yerdə dayanmır və onunla birlikdə irəliləyir. Bu, internetə də təsir etdi. Bunun necə dəyişdiyini artıq görə bilərsiniz görünüş saytları xüsusilə məşhurdur adaptiv dizayn. Və bu baxımdan kifayət qədər yeniləri meydana çıxdı adaptiv jquery sürgüləri , qalereyalar, karusellər və ya oxşar plaginlər.
1. Cavab verən Horizontal Posts Slayder

İlə uyğunlaşan üfüqi karusel ətraflı təlimatlar quraşdırma üzrə. Sadə üslubda hazırlanır, ancaq özünüzə uyğun üslubda tərtib edə bilərsiniz.

2. Glide.js-də sürüşdürmə

Bu slayder istənilən veb sayt üçün uyğundur. O, açıq mənbəli Glide.js-dən istifadə edir. Sürgü rəngləri asanlıqla dəyişdirilə bilər.

3. Eğilmiş Məzmun Slayd Şousu

Cavab verən məzmun slayderi. Bu sürüşdürmənin əsas məqamı şəkillərin 3D effekti, eləcə də təsadüfi görünüşün müxtəlif animasiyalarıdır.

4. HTML5 kətan istifadə edən sürüşdürmə

İnteraktiv hissəcikləri olan çox gözəl və təsirli sürüşmə. HTML5 kətan istifadə edərək hazırlanmışdır,

5. Şəkillərin dəyişdirilməsi kaydırıcısı

Morfinq effekti olan kaydırıcı (bir obyektdən digərinə hamar çevrilmə). IN bu misalda Slayder veb tərtibatçısı və ya portfel şəklində veb studiyasının portfeli üçün yaxşı uyğun gəlir.

6. Dairəvi sürüşdürmə

Şəkli çevirmək effekti ilə dairə şəklində sürüşdürmə.

7. Bulanıq fonu olan slayder

Kommutasiya və fon bulanıqlığı ilə adaptiv sürüşdürmə.

8. Cavab verən moda slayderi

Sadə, yüngül və həssas veb sayt kaydırıcısı.

9. Slicebox - jQuery 3D şəkil slayderi(YENİLƏNİB)

Düzəlişlər və yeni funksiyalar ilə Slicebox slayderinin yenilənmiş versiyası.

10.Pulsuz Animasiyalı Cavab Şəkil Şəbəkəsi

Müxtəlif animasiyalar və vaxtlardan istifadə edərək çəkilişləri dəyişdirəcək çevik şəkil şəbəkəsi yaratmaq üçün JQuery plagini. Bu, vebsaytda fon və ya dekorativ element kimi yaxşı görünə bilər, çünki biz seçmə şəkildə yeni şəkillər və onların keçidlərini göstərə bilərik. Plugin bir neçə versiyada təqdim olunur.

11.Flex sürgü

Veb saytınız üçün universal pulsuz plagin. Bu plagin bir neçə sürüşmə və karusel seçimlərində gəlir.

12. Foto çərçivə

Fotorama universal plagindir. Onun bir çox parametrləri var, hər şey tez və asanlıqla işləyir və siz slaydlara tam ekranda baxa bilərsiniz. Slayder həm sabit ölçüdə, həm də adaptiv, kiçik şəkillərlə və ya olmadan, dairəvi sürüşdürmə ilə və ya olmadan və daha çox istifadə edilə bilər.

P.S.Slayderi bir neçə dəfə quraşdırdım və hesab edirəm ki, bu, ən yaxşılarından biridir

13. Miniatürlərlə pulsuz və adaptiv 3D slayder qalereyası.

Eksperimental qalereya slayderi 3DPanelLayout grid və maraqlı animasiya effektləri ilə.

14. Css3-də slayder

Uyğunlaşan slayder məzmunun hamar görünüşü və yüngül animasiya ilə css3 istifadə edərək hazırlanır.

15. WOW Kaydırıcısı

WOW Slayder heyrətamiz vizual effektləri olan bir şəkil slayderidir.

17. Elastik

Tam həssaslıq və slayd miniatürləri ilə elastik sürüşdürmə.

18. Yarıq

Bu css3 animasiyasından istifadə edən tam ekran cavab verən slayderdir. Sürgü iki versiyada hazırlanır. Animasiya olduqca qeyri-adi və gözəl hazırlanmışdır.

19. Adaptiv foto qalereya plus

Sadə pulsuz slayder-şəkil yüklənməsi ilə qalereya.

20. WordPress üçün Responsive Slider

WP üçün adaptiv pulsuz sürüşdürmə.

21. Paralaks Məzmun Slayderi

Paralaks effektli sürüşdürmə və CSS3 istifadə edərək hər bir elementə nəzarət.

22. Musiqi keçidi olan slayder

JPlayer açıq mənbə kodundan istifadə edən sürüşdürmə. Bu slayder musiqili təqdimata bənzəyir.

23. jmpress.js ilə sürüşdürmə

Cavab verən slayder jmpress.js-ə əsaslanır və buna görə də slaydlarınıza maraqlı 3D effektlər əlavə etməyə imkan verəcək.

24. Sürətli hover slayd şousu

Sürətli slayd keçidi ilə slayd şousu. Slaydlar hoverə keçir.

25. CSS3 ilə Şəkil Akkordeon

Şəkil akkordeon css3 istifadə edərək.

26. Touch Optimized Gallery Plugin

Bu toxunma cihazları üçün optimallaşdırılmış həssas qalereyadır.

27. 3D Qalereya

3D Divar Qalereyası- 3D effektinin görünəcəyi Safari brauzeri üçün yaradılmışdır. Başqa brauzerdə baxsanız, funksionallıq yaxşı olacaq, lakin 3D effekti görünməyəcək.

28. Səhifələmə ilə slayder

JQuery UI slayderindən istifadə edərək səhifələşdirmə ilə cavab verən kaydırıcı. İdeya sadə naviqasiya konsepsiyasından istifadə etməkdir. Bütün şəkilləri geri çəkmək və ya slayd-slayd keçidi mümkündür.

29. jQuery ilə Şəkil Montajı

Ekranın enindən asılı olaraq şəkilləri avtomatik təşkil edin. Portfel veb saytı hazırlayarkən çox faydalı bir şey.

30. 3D Qalereya

Css3 və jQuery istifadə edərək sadə 3D dairəvi kaydırıcı.

31. Css3 və jQuery istifadə edərək 3D effektli tam ekran rejimi

Gözəl bir keçid ilə tam ekran şəkillərinə baxmaq imkanı olan kaydırıcı.

haqqında kitab üzərində işləyir jquery, bir çox abunəçimin jquery-də slider skriptini necə yazacağımı söyləməyimi xahiş etməsi ilə qarşılaşdım. Üzr istəyirik, əziz dostlar! Bu, 21-ci əsrdir və xoşbəxtlikdən bizim üçün CSS3-ün bütün ləzzətləri bizim üçün əlçatandır və belə şeyləri bir xətt olmadan həyata keçirməyə imkan verir. javascript.

1-ci hissə.

Başlamaq üçün, sürüşmənin nə olduğunu bilməyənlərə izah edəcəyəm. Sürgü- bu, veb-səhifənin bir hissəsini və ya bütövlükdə yerini tutan müəyyən genişlikdə blokdur. Onun əsas xüsusiyyəti avtomatik və ya dəyişməsidir əl rejimi məzmun. Məzmun ola bilər: qrafik şəkillər, və bəzi mətn.

Əlbəttə ki, təəccüblənə bilərsiniz: javascript-də çoxlu sürüşmə tətbiqləri varsa, niyə təkəri yenidən icad etməlisiniz? Budur mənim arqumentlərim:

1. CSS effektləri daha sürətli olur. Bu, mobil cihazlarda aydın görünür.
2. Slayder yaratmaq üçün heç bir proqramlaşdırma bacarığı tələb olunmur.

Beləliklə, bizim nümunəmiz üçün dörd şəkilə ehtiyacınız var, baxmayaraq ki, layihənizdə istədiyiniz qədər çox şəkil ilə bir zolaq düzəldə bilərsiniz. Yeganə şərt bütün şəkillərin eyni ölçüdə olmasıdır. Ayrıca, sizə deməyi unutdum, bizim slayder adaptiv olacaq (bəli, Adaptiv düzən , siz bunu düzgün oxuyursunuz) və siz onu istənilən cihaz üçün layihələrinizdə istifadə edə bilərsiniz. Ancaq kifayət qədər danışıq, mən artıq meqa-kod yazmağa qaşınıram. HTML ilə başlayaq:

Yerə qənaət etmək üçün alt atributunu boş buraxdım, lakin siz onu SEO sorğularınıza əsasən özünüz doldura və brauzerlərində şəkillərin göstərilməsini söndürən istifadəçilərə məlumat verə bilərsiniz. Onu da diqqətinizə çatdırmaq istəyirəm ki, birinci şəkil ( alladin.jpg) zolağın sonunda da olacaq ki, bu da sürüşdürmə sürüşməmizə əyilmədən tsiklik sürüşməyə imkan verəcəkdir.

Rahatlıq üçün eni pəncərənin 80%-ni təşkil edir, maksimum eni isə hər bir fərdi fotonun ölçüsüdür (bizim nümunəmizdə 1000px), çünki şəklin uzanmasını istəmirik:

Slayder (en: 80%; maksimum en: 1000px; )

CSS kodumuzda rəqəmin eni onun yerləşdiyi div-in faizi kimi ifadə edilir. Yəni, əgər şəkil zolağında beş fotoşəkil varsa və div yalnız birini yaradırsa, rəqəmin eni beş dəfə artırılır ki, bu da div konteynerinin eninin 500%-ni təşkil edir:

Şrift ölçüsü: 0 parametri fiqurun bütün havasını sorur, şəkillərin ətrafında və arasında istənilən ağ boşluğu aradan qaldırır. mövqe: nisbi animasiya zamanı fiquru asanlıqla hərəkət etdirməyə imkan verir.

Şəkil zolağı daxilində fotoşəkilləri bərabər şəkildə bölmək lazımdır. Formula çox sadədir: fiqurun eninin 100% olduğunu fərz etsək, hər bir şəkil üfüqi məkanın 1/5 hissəsini tutmalıdır:

Aşağıdakı CSS qaydalarından istifadə etmək lazımdır:

Şəkil zolağı img (en: 20%; hündürlük: avtomatik; )

İndi div üçün daşqın xassəsini dəyişdirək:

Slayder (en: 80%; maksimum en: 1000px; daşqın: gizli)

Nəhayət, şəkil zolağının soldan sağa hərəkət etməsini təmin etməliyik. Konteynerin div eni 100% olarsa, şəkil zolağının sola hər hərəkəti həmin məsafənin faizi kimi ölçüləcək:

@keyframes slidy ( 20% ( sol: 0%; ) 25% ( sol: -100%; ) 45% ( sol: -100%; ) 50% ( sol: -200%; ) 70% ( sol: -200 %; ) 75% ( sol: -300%; ) 95% ( sol: -300%; ) 100% ( sol: -400%; ) )

Slayderdəki hər bir şəkil div ilə əhatə olunacaq və 5% hərəkət edəcək.

Slayder fiquru (mövqe: nisbi; en: 500%; animasiya: 30s slidy sonsuz; şrift ölçüsü: 0; doldurma: 0; kənar: 0; sol: 0; )

2-ci hissə.

Biz onu mega cool etdik javascript olmadan slayder. Nəticələrimizə arxalanmadan əvvəl ona nəzarət düymələrini əlavə edək. Daha doğrusu, buna deyil (onsuz da onunla işləmək üçün çox tənbəliyəm), amma yenisini yaradaq.

Beləliklə, HTML kodumuz:

İndi slaydlarımızı canlandırmaqla məşğul olaq. Təəssüf ki, müxtəlif sayda slaydlar üçün fərqli olacaq:

/* iki slayddan ibarət slayder üçün */ @keyframes slider__item-autoplay_count_2 ( 0%(şəffaflıq:0;) 20%(şəffaflıq:1;) 50%(şəffaflıq:1;) 70%(şəffaflıq:0;) 100% ( qeyri-şəffaflıq:0;) ) /* üç slayddan ibarət slayder üçün */ @keyframes slider__item-autoplay_count_3 ( 0%(şəffaflıq:0;) 10%(şəffaflıq:1;) 33% (şəffaflıq:1;) 43% ( qeyri-şəffaflıq: 0;) 100%(şəffaflıq:0;) ) /* dörd slaydlı slayder üçün */ @keyframes slider__item-autoplay_count_4 ( 0%(şəffaflıq:0;) 8% (şəffaflıq:1;) 25% (şəffaflıq) :1; ) 33% (şəffaflıq:0;) 100%(şəffaflıq:0;) ) /* beş slayddan ibarət slayder üçün */ @keyframes slider__item-autoplay_count_5 ( 0%(şəffaflıq:0;) 7% (şəffaflıq: 1;) 20 %(şəffaflıq:1;) 27% (şəffaflıq:0;) 100%(şəffaflıq:0;) )

Kədərli, elə deyilmi? Bundan əlavə, Opera, Chrome, IE və Mozilla üçün hər şeyi eyni, lakin müvafiq prefikslə yazmağınız lazım olduğunu unutmayın. İndi slaydlarımızı canlandırmaq üçün kodu yazaq (bundan sonra üç slayd üçün kod göstəriləcək. Daha çox saytın kodunu nümunə kodda görə bilərsiniz):

Slider_count_3 .item ( -moz-animasiya: slider__item-autoplay_count_3 15s sonsuz; -webkit-animasiya: slider__item-autoplay_count_3 15s sonsuz; -o-animasiya: slider__item-autoplay_count_count_auder;-animation15splay_count_au3 _3 15s sonsuz; ) .maddə :n-ci -of-növ(2) ( -moz-animasiya-gecikmə:5s; -webkit-animasiya-gecikmə:5s; -o-animasiya-gecikmə:5s; animasiya-gecikmə:5s; ) .element:n-növ növü (3) ( -moz-animasiya-gecikmə:10s; -webkit-animasiya-gecikmə:10s; -o-animasiya-gecikmə:10s; animasiya gecikməsi:10s; )

Gördüyünüz kimi, birinci cüt üçün sıfır ofset dəyişmir. Bundan əlavə, ofset slaydların sayından asılı deyil, ona görə də slaydların maksimum sayı üçün bir dəfə təsvir edilə bilər. İndi gəlin əmin edək ki, istifadəçi siyirtmənin üzərinə sürüşdürdükdə slaydlar dəyişməz:

Slider:hover .element ( -moz-animation-play-state: pauzed; -webkit-animation-play-state: pauzed; -o-animation-play-state: pauzed; animation-play-state: pauzed; )

Nəhayət, slaydlarımızı dəyişdirməliyik. Bildiyiniz kimi, bir elementin xüsusiyyətlərini dəyişdirməyə imkan verən bir sıra hadisələr var CSS yardımı. Siçan ilə klik üçün səhifə elementlərindən birində psevdo-sinflər :focus, :target və ya :checked bizə kömək edə bilər. Pseudo-class :focus hər səhifədə yalnız bir elementə malik ola bilər, :target brauzer tarixçəsini bağlayır və etiketin olmasını tələb edir; Pseudo-class:checked səhifəni tərk etməzdən əvvəl vəziyyəti xatırlayır və radio düymələri vəziyyətində qrupda yalnız bir elementdə seçilə bilər. Gəlin bundan yararlanaq. Əvvəl daxil edin