Veb-saytingiz uchun 19 ta slayder yoki karusel CSS va HTML

bepul slayderlar

Ega bo'lish orqali ekranning butun kengligini egallaydigan veb-saytlarBiz ba'zi elementlarni birlashtirilishi mumkinligini aniqladik, ular sotish uchun mo'ljallangan mahsulotlarning butun namunasini yoki yozda taqdim etilishi mumkin bo'lgan sayohatlarni namoyish qilish uchun foydali bo'lishi mumkin. Karusellar yoki slayderlar - bu bizning mahsulotimizni ingl. Ko'zga tashlanadigan tarzda namoyish etishimizga imkon beradigan veb-elementlardan biridir.

The CSS-da bepul slayderlar, skrollerlar yoki karusellar Quyida topishingiz mumkin, ular mijozga bizning byudjetimizni qabul qilishdan oldin ko'rsatadigan barcha maqsadlar uchun yaxshi repertuarni tashkil qiladi. Bu gorizontal va vertikal formatda biroz JavaScript-ni o'z ichiga olgan HTML va CSS-dagi slayderlar to'plami. Keling, ularni tezda amalga oshirish uchun kodga kirishingiz uchun buni qilamiz.

Landshaft karusellar

javob

Ushbu karusel a dan iborat juda chiroyli animatsiya go'yo biz parda chizayotganimiz kabi, ushbu slayderda o'rnatmoqchi bo'lgan profillarning fotosuratlari va piktogrammalarini kattalashtirish uchun. Bu vebda sotadigan mahsulotlarimizdan juda mamnun bo'lgan foydalanuvchilarning ko'rsatmalari uchun mukammal karuseldir.

Tegishli maqola:
Veb-saytingizga maxsus teginish uchun 27 ta HTML va CSS slayderlari

Javob beradigan cheksiz karusel

O'z-o'zini ko'paytirish

Ushbu slayder ba'zan ko'rish mumkin bo'lgan reklama kabi ikki tomonidagi futbol maydonlarida va gorizontal ravishda aylanadigan turli xil reklamalarni namoyish etish. Tovar sheriklarini va boshqa turdagi logotiplarni ko'rsatishi kerak bo'lgan sahifalarni ochish uchun juda mos keladi.

Karuselga munosabat bildiring

3D karusel

Ushbu varaq uning React.js bilan ajralib turadi. biz doimiy ravishda animatsiyada bir rasmdan ikkinchisiga o'tishimiz bilan mutanosib o'lchamdagi rasmlarni namoyish etishga imkon beradi. Ushbu juda oddiy CSS haqida ko'proq gapirish kerak emas, lekin agar biz uni Internetda qanday qilib to'g'ri joylashtirishni bilsak juda katta samara beradi.

Smooth 3D Slider

3D karusel

HTML, CSS va JavaScript-lardan tashkil topgan ushbu 3D karusel o'zining silliqligi va ajralib turishi bilan ajralib turadi ajoyib vizual effektga ega pog'onali animatsiya. Har bir kartani aniqlaydigan bir qator elementlar bilan, uni veb-saytingizga qo'shish uchun ish va ko'zni qamashtiradigan karusel.

Tegishli maqola:
46 Javascript Slider va Scrollers

Avtomatik cheksiz karusel

Cheksiz karusel

O'z nomi bilan ogohlantirgan slayder avtomatik ravishda ko'rsatiladi foydalanuvchi bilan aloqa o'rnatmasdan qisqa vaqt ichida u bilan. Ushbu ajoyib karuselni tashkil etadigan turli xil tasvirlar sehrli ravishda pasayib ketishi tufayli paydo bo'ladi.

Karuselni olib boring

Karuselni olib boring

Hover elementi bilan slayder chapdan o'ngga siljiydi, yoki aksincha, sichqoncha ko'rsatgichini uning ustiga qo'yganimizda. Ushbu rasm slayderini yaratishi mumkin bo'lgan turli xil fotosuratlar o'rtasida harakatlanish uchun silliq o'tish.

Mobil karusel

Mobil karusel

Bundan tashqari "Carousel Material Design" deb nomlanganva barcha turdagi kartalar bilan mavjud tendentsiyani hisobga olgan holda, bu erda siz CSS / HTML-da juda ko'p sonli boshqa maqolani topishingiz mumkin, bu Google tomonidan nashr etilgan dizayn tilidan iborat bo'lib, o'zini boshqalardan ajratib turadi. Siz kartalarni uzoq bosib bosib turli xil kartalarni ko'chirishingiz mumkin.

Instagram Feed Carousel

Instagram

Siz ushbu slayder orqasida turgan g'oyani buzishingiz mumkin kattalashtirilishi mumkin bo'lgan tasvirlar tasmasi bilan ulardan birini bosish orqali. Muayyan veb-sayt turiga yo'naltirilgan bo'lsa-da, juda ta'sirli animatsiya. Instagram postlari slick.js karuseliga tushirilgan.

Oddiy sinxronlashtirilgan karusel

Oddiy karusel

Bu avvalgisi bilan juda ko'p bog'liq, ayniqsa, tasvirlar chizig'ida slayder bilan o'zaro ta'sir juda boshqacha uni chapdan o'ngga va aksincha lateral imo-ishora bilan harakatlantirish orqali. Shunga qaramay bizda slick.js o'z ishini qilmoqda. Uning ajoyib ta'siri uchun ajoyib.

3D gorizontal karusellar

3D gorizontal karusel

Biz e'lon qilgan barcha ro'yxatdagi eng qiziqarli karusellardan biri. Uchun ajralib turadi CSS va HTML-dagi gorizontal slayderlar bu juda yaxshi harakat qiladi. To'rt xil o'zgarish bilan ishlab chiqarilishi mumkin bo'lgan turli xil effektlarni topish uchun siz faqat sichqonchani ko'rsatgichini qutilarga qoldirishingiz kerak.

CSS Carousel

CSS 3D

A bilan oddiy va ajoyib vizual effekt navbatma-navbat turadigan kartalar seriyasi old tomonda. Effekt 3D formatida, shuning uchun u juda ko'p e'tiborni tortadigan slayderlardan biri, ayniqsa, xuddi shu yaratuvchining daholigini ko'rsatadigan minimal tiklanish effekti tufayli.

Ambilight yuklash uchun karusel

Bootstrap karusel

Ko'p jihatdan ajralib turmaydigan ajoyib effektga ega oddiy slayder. Ulardan biri o'sha oddiy slayderlar biz odatda qidiramiz va bu juda shov-shuvsiz bir bo'lishni his qiladi, ammo bu uning vazifasini mukammal bajaradi.

Karusel jamoasi

Karusel jamoasi

Agar siz blogingizda bo'lgan tahririyat jamoasini tanishtirmoqchi bo'lsangiz, bu slayder o'z rolida mukammaldir. Qanday soddaligi uchun oldingisiga o'xshash. Bu jamoaning har bir fotosuratini joylashtirish uchun olmosdan foydalanish bilan ajralib turadi. Avtomatik ijro etish imkoniyatiga ega.

Karusel kubi

3D kub

Kub bo'lganligi bilan ajralib turadigan slayder yuzlarning har biri tasvirlardan biridir yoki veb-saytda namoyish qilmoqchi bo'lgan fotosuratlar. Ularni siljitish va sizni qanday tarkib kutayotganini bilish uchun shunchaki ularning har birini bosishingiz kerak.

Karuselning o'q tugmachalari

CSS kalitlari

O'zaro ta'sir o'tkazadigan slayder o'q tugmalaridan foydalanib. Oddiy, shunchaki bir necha yil oldin ko'rinadigan o'zaro ta'sirning boshqa turiga o'tadigan ko'p shov-shuvsiz. Muayyan foydalanish uchun.

Vertikal karusellar

Vertikal karusel

Vizual effektga ega bo'lgan slayder avtomatik ravishda doimiy vertikal animatsiyada o'ynaydi burchaklari yumaloq bo'lgan kartalari bilan ajralib turadi. Juda dolzarb va bu butun ro'yxatdan o'zi ajralib turadigan narsalardan biri.

Sof CSS karusel

Karusel

Ushbu karusel a bilan ajralib turadi biz borishimiz mumkin bo'lgan yon menyu uning har bir variantini bosish. Ma'lumotlar, aytilganlardan ancha ko'p bo'lmagan holda, qayta tiklangan effekt bilan paydo bo'ladi.

Vertikal karusel reaktsiyasi

Karusel

O'xshash vertikalligi uchun oldingi, garchi bu slayder har bir yorliqning rasmlarini ko'rsatish uchun sahifaning butun kengligini olishga qodir bo'lsa ham. Uning katta formati va slaydlar o'rtasida siljish uchun CSS o'tishidan foydalanish qiziq.

3D bo'linadigan karusel

Split

3D bilan aylanadigan slayderlar naqshli ajoyib vizual effekt juda ajoyib animatsiya. Variantlarning har birini chap menyudan har biri uchun nuqta bilan tanlashingiz mumkin. Bu qanchalik ijodiy ekanligi uchun ro'yxatdagi eng yaxshi narsalardan biri.


Maqolaning mazmuni bizning printsiplarimizga rioya qiladi muharrirlik etikasi. Xato haqida xabar berish uchun bosing bu erda.

4 ta sharh, o'zingizni qoldiring

Fikringizni qoldiring

Sizning email manzilingiz chop qilinmaydi. Kerakli joylar bilan belgilangan *

*

*

  1. Ma'lumotlar uchun javobgardir: Migel Anxel Gaton
  2. Ma'lumotlarning maqsadi: SPAMni boshqarish, izohlarni boshqarish.
  3. Qonuniylashtirish: Sizning roziligingiz
  4. Ma'lumotlar haqida ma'lumot: qonuniy majburiyatlar bundan mustasno, ma'lumotlar uchinchi shaxslarga etkazilmaydi.
  5. Ma'lumotlarni saqlash: Occentus Networks (EU) tomonidan joylashtirilgan ma'lumotlar bazasi
  6. Huquqlar: istalgan vaqtda siz ma'lumotlaringizni cheklashingiz, tiklashingiz va o'chirishingiz mumkin.

  1.   Mayra orellana dijo

    Xayrli tong, men o'zimning saytimda Pure CSS Carousel-dan foydalanmoqchiman, lekin u faqat bitta pozitsiyada joylashgan, uni qanday qilib o'zimning sahifamda kerakli joyga joylashtirsam bo'ladi.

    Iltimos, bu borada yordam bering, katta rahmat

  2.   Xaver Kanizares dijo

    Hover Carousel-ni veb-saytimning mobil versiyasida qanday qilib yaxshi ko'rsatishi mumkin?

  3.   Gabriel dijo

    Zo'r, ular qanday yaxshi ish qildilar!

  4.   toni zambrano dijo

    Assalomu alaykum, aravachalar uylari juda zo'r, lekin uni yuklaganimdanoq nusxa ko'chiraman va joylashtirganimda javascrip var max = $ ('# c> li) .lenght… tufayli xatoga yo'l qo'ydi. Siz nimani taklif qilyapsiz?