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

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

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

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

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

Окшош макала:

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

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

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

React Carousel

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

Smooth 3D Slider

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

Окшош макала:

46 Javascript Slider жана Scrollers

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

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

Hover Carousel

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

Mobile Carousel

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

Instagram Feed Carousel

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

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

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

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

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

CSS Carousel

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

Ambilight Bootstrap Carousel

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

Carousel Team

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

Carousel Cube

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

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

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

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

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

Pure CSS Carousel

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

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

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

3D Split Carousel

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