19 слайдер же карусель CSS жана HTML үчүн веб-сайтыңыз

акысыз жылдыргычтар

Ээ болуу менен экрандын бүткүл туурасын ээлеген веб-сайттарСатуу үчүн өнүмдөрдүн бүтүндөй үлгүсүн же жай мезгилинде биз сунуш кылган сапарларды көрсөтүү үчүн ыңгайлуу боло турган айрым элементтерди бириктирүүгө болот деп таптык. Каруселдер же слайдерлер - бул өнүмдөрүбүздү көз жоосун алган жол менен көрсөтүүгө мүмкүнчүлүк берген желе элементтеринин бири.

The CSSте акысыз слайдерлер, скроллерлер же каруселдер Төмөндө таба турган болсок, алар кардарлар биздин бюджетиңизди кабыл алганга чейин көрсөтө турган ишибиздеги бардык максаттар үчүн жакшы репертуар түзүшөт. Бул HTML жана CSS слайдерлеринин жыйындысы, бир аз JavaScript горизонталдык жана вертикалдык форматта. Келгиле, аларды тез арада ишке ашыруу үчүн кодго кирүү үчүн жасайлы.

Горизонталдуу каруселдер

сезгич

Бул карусель а сонун жаркыраган анимация биз ушул слайдерде орноткону жаткан профилдердин сүрөттөрүн жана сүрөтчөлөрүн кичирейтүү үчүн, көшөгө тартып жаткандай. Бул Интернетте саткан өнүмдөрүбүзгө абдан ыраазы болгон колдонуучулардын көрсөтмөлөрү үчүн эң сонун карусель.

Окшош макала:
27 HTML жана CSS жылдыргычтары веб-сайтыңызга өзгөчө сезим тартуулайт

Жооптуу чексиз карусель

Өзүн-өзү көбөйтүү

Бул слайдер кээде көрүнүп турган жарнама сыяктуу капталындагы футбол аянтчаларында жана туурасынан жылган ар кандай жарнамаларды көрсөтүү. Бул бренд өнөктөштөрдү жана логотиптин башка түрлөрүн көрсөтүү керек беттерин ачуу үчүн идеалдуу.

React Carousel

3D карусель

Бул түрмөк анын React.js менен айырмаланып турат. үзгүлтүксүз анимацияда бир сүрөттөн экинчисине өтүп жатканда пропорциялуу өлчөмдө сүрөттөрдү көрсөтүүгө мүмкүнчүлүк берет. Бул жөнөкөй CSS жөнүндө айта турган аз гана нерсе, бирок аны вебде кандайча туура жайгаштырууну билсек, чоң натыйжа берет.

Smooth 3D Slider

3D Carousel

HTML, CSS жана JavaScriptтен турган бул 3D карусель жылмакайлыгы жана башкалар менен айырмаланат сонун визуалдык эффект менен секирип жаткан анимация. Ар бир картаны аныктай турган бир катар элементтер менен, жумуш жана көздүн жоосун алган карусель, аны веб-сайтыңызга кошуу үчүн.

Окшош макала:
46 Javascript Slider жана Scrollers

Автоматтык чексиз карусель

Чексиз карусель

Өзүнүн ысымы эскерткендей, слайдер автоматтык түрдө көрсөтүлөт колдонуучунун өз ара аракеттенүүсүз аны менен кыска убакыттын ичинде. Бул таң калыштуу каруселди түзгөн ар кандай сүрөттөр анын сыйкырдуу түрдө өчүп калганынан улам пайда болот.

Hover Carousel

Hover Carousel

Коё берүүчү элемент менен слайдер солдон оңго карай жылат, же тескерисинче, чычкан көрсөткүчүн анын үстүнө таштап жатканда. Бул сүрөт слайдерин түзө турган ар кандай сүрөттөрдүн ортосунда жылып өтүү үчүн жылмакай өтүү.

Mobile Carousel

Мобилдик карусель

дагы Carousel Material Design деп аталатжана бардык түрдөгү карталар менен учурдагы тенденция менен, CSS / HTMLде алардын көп сандаган башка макаласын таба аласыз, Google тарабынан жарыяланган дизайн тилинен түзүлгөндүктөн өзүн башкалардан алыстатат. Карталарды узак басып, ар кандай карталарды жылдырсаңыз болот.

Instagram Feed Carousel

Instagram

Бул слайдердин артындагы идеяны бузуп койсоңуз болот чоңойтууга боло турган сүрөттөр тилкеси менен алардын бирин чыкылдатуу менен. Вебсайттын белгилүү бир түрүнө багытталганына карабастан, эффективдүү анимация. Slick.js каруселине түшкөн Instagram билдирүүлөрү.

Жөнөкөй синхрондоштурулган карусель

Жөнөкөй карусель

Буга чейинкилер менен көп байланышы бар, айрыкча сүрөттөр тилкесинде слайдер менен өз ара аракеттенүү такыр башкача аны сол тараптан оңго жана тескерисинче каптал жаңсоосу менен жылдыруу менен. Дагы бизде slick.js өз ишин жасап жатат. Анын чоң таасири үчүн таң калыштуу.

3D горизонталдуу каруселдер

3D Horizontal Carousel

Биз жарыялаган тизмедеги эң кызыктуу каруселдердин бири. Үчүн турат CSS жана HTMLдеги горизонталдуу слайдерлер алар фантастикалык жактан жакшы кыймылдашат. Төрт вариация менен иштелип чыгышы мүмкүн болгон ар кандай эффекттерди табуу үчүн, чычкан көрсөткүчүн кутучалардын үстүнө гана ташташыңыз керек.

CSS Carousel

CSS 3D

А менен жөнөкөй жана сонун визуалдык эффект кезектешип турган карталардын сериясы алды жагында. Эффект 3D форматында болот, ошондуктан ал көпчүлүктүн көңүлүн өзүнө бурган слайдерлердин бири болуп саналат, айрыкча ошол эле нерсени жаратуучунун генийлигин көрсөткөн минималдуу калыбына келтирүү таасири.

Ambilight Bootstrap Carousel

Bootstrap Carousel

Көпчүлүккө көрүнбөй турган, эффектиси жөнөкөй слайдер. Бири ошол жөнөкөй слайдерлер биз, адатта, издейбиз жана ушунчалык ашыкча ызы-чуусуз бирөө болуу сезимин берет, бирок ал өз милдетин толугу менен аткарат.

Carousel Team

Карусель командасы

Эгер сиз блогуңуздагы редакциялык жамаатты тааныштыргыңыз келсе, бул слайдер өзүнүн ролу боюнча кемчиликсиз. Канчалык жөнөкөй болгону үчүн мурункусуна окшош. Бул топтун ар бир сүрөтүн жайгаштыруу үчүн бриллиант колдонулгандыгы менен айырмаланат. Ал автоматтык ойнотууга ээ.

Carousel Cube

3d куб

Анын ичинде куб болгону менен айырмаланган слайдер жүздөрдүн ар бири сүрөттөлүштөрдүн бири же веб-сайтта көрсөткүбүз келген сүрөттөр. Аларды жылдырып, сизди кандай мазмун күтүп жаткандыгын билүү үчүн, алардын ар бирин чыкылдатуу керек.

Каруселдин жебе баскычтары

CSS ачкычтары

Өз ара аракеттенүү жүрүүчү слайдер жебе баскычтарын колдонуп. Жөнөкөй, анча-мынча ызы-чуусуз, түздөн-түз өз ара аракеттенүүнүн башка түрүнө өтөт, бир нече жыл мурун окшойт. Конкреттүү пайдалануу үчүн.

Тик каруселдер

Тик карусель

Бул сонун визуалдык эффектке ээ слайдер автоматтык түрдө үзгүлтүксүз тик анимацияда ойнойт бурчтары тегеректелген карталары менен айырмаланат. Абдан учурдагы жана ушул тизмеден өзүнчө тургандардын бири.

Pure CSS Carousel

Каруселдик

Бул карусель а. Менен айырмаланып турат биз бара турган кошумча меню анын ар бир тандоосу боюнча чыкылдатуу. Маалыматта айтылгандай көп болбостон, калыбына келтирилген натыйжа пайда болот.

Тик карусель реакциясы

Каруселдик

окшош вертикалдуулугу үчүн мурунку, бирок бул слайдер ар бир өтмөктүн сүрөттөрүн көрсөтүү үчүн барактын бүткүл туурасын ээлей алат. Слайддар арасында жылыш үчүн CSS өткөөлдөрүн колдонгондугу жана форматы чоң.

3D Split Carousel

жаруу

3D менен айланган слайдерлердин үлгүсү менен сонун визуалдык эффект абдан укмуштай анимация. Параметрлердин ар бирин сол жагындагы менюдан, алардын ар бири үчүн чекиттери менен тандап алсаңыз болот. Бул канчалык чыгармачыл экендиги боюнча тизмедеги мыктылардын бири.


Макаланын мазмуну биздин принциптерге карманат редакциялык этика. Ката жөнүндө кабарлоо үчүн чыкылдатыңыз бул жерде.

4 комментарий, өзүңүздүкүн калтырыңыз

Комментарий калтырыңыз

Сиздин электрондук почта дареги жарыяланбайт. Милдеттүү талаалар менен белгиленет *

*

*

  1. Маалыматтар үчүн жооптуу: Мигель Анхель Гатан
  2. Маалыматтын максаты: СПАМды көзөмөлдөө, комментарийлерди башкаруу.
  3. Мыйзамдуулук: Сиздин макулдугуңуз
  4. Маалыматтарды берүү: Маалыматтар үчүнчү жактарга юридикалык милдеттенмелерден тышкары билдирилбейт.
  5. Маалыматтарды сактоо: Occentus Networks (ЕС) тарабынан уюштурулган маалыматтар базасы
  6. Укуктар: Каалаган убакта маалыматыңызды чектеп, калыбына келтирип жана жок кыла аласыз.

  1.   Mayra orellana ал мындай деди:

    Кутман таң, мен өзүмдүн сайтымда Pure CSS Carousel колдонгум келет, бирок ал бир гана позицияда жайгашкан, аны өзүмдүн баракчамдагы каалаган абалда жайгаштырсам болот.

    Бул боюнча жардамыңызды суранам.Чоң рахмат

  2.   Ксавье Канизарес ал мындай деди:

    Кантип Hover Carousel дисплейин вебсайтымдын мобилдик версиясында жакшы көрсөтө алам?

  3.   Gabriel ал мындай деди:

    Мыкты, алар кандай жакшы жумуш жасашты!

  4.   тони замбрано ал мындай деди:

    Салам, вагонеткалар абдан салкын, бирок жүктөлөөр замат көчүрүп чаптап алсам, javascrip ката кетирет, анткени var max = $ ('# c> li) .lenght…. Сиз эмнени сунуштап жатасыз?