Awọn ifaworanhan 19 tabi awọn carousels CSS ati HTML fun oju opo wẹẹbu rẹ

Nipa nini awọn oju opo wẹẹbu ti o gba gbogbo iwọn iboju naaA rii pe awọn eroja kan le ṣepọ ti o le wa ni ọwọ lati ṣe afihan gbogbo ayẹwo awọn ọja fun tita tabi awọn irin-ajo ti a le ni lori ipese fun igba ooru. Carousels tabi awọn ifaworanhan jẹ ọkan ninu awọn eroja wẹẹbu wọnyẹn ti o gba wa laaye lati ṣe afihan awọn ọja wa ni ọna mimu oju pupọ ni wiwo.

Los Awọn ifaworanhan ọfẹ, awọn apanirun tabi awọn carousels ni CSS pe iwọ yoo wa ni isalẹ, wọn ṣe iwe-iranti ti o dara fun gbogbo iru awọn ibi-afẹde ni iṣẹ ti a yoo fi han alabara ṣaaju ki wọn to gba isunawo wa. O jẹ ikojọpọ awọn ifaworanhan ni HTML ati CSS pẹlu diẹ ninu JavaScript ni ọna petele ati ọna kika. Jẹ ki a ṣe ki o le wọle si koodu lati ṣe wọn ni kiakia.

Awọn carousels petele

Carousel yii ni a lẹwa flashy iwara bi ẹni pe a ya aṣọ-ikele kan, lati kan sun sita fun awọn fọto ati awọn aami ti awọn profaili ti a yoo fi idi mulẹ ni yiyọ. O jẹ carousel pipe fun awọn ijẹrisi lati ọdọ awọn olumulo ti o ni itẹlọrun pupọ pẹlu awọn ọja ti a ta lori oju opo wẹẹbu.

Nkan ti o jọmọ:

27 HTML ati awọn sliders CSS lati fun oju opo wẹẹbu rẹ ni ifọwọkan pataki

Idahun ailopin carousel

Yiyọ yii jẹ bii ipolowo ti o le rii nigbakan lori awọn aaye bọọlu afẹsẹgba ni awọn ẹgbẹ ati fifihan awọn ipolowo oriṣiriṣi ti o yipo ni petele. O jẹ apẹrẹ fun awọn oju-iwe ibalẹ ti o nilo lati ṣe afihan awọn alabaṣepọ ami iyasọtọ ati awọn iru awọn aami apẹẹrẹ miiran.

Ṣe atunṣe Carousel

Yiyi duro fun React.js. ti o ya ararẹ si fifihan awọn aworan ni iwọn ti o yẹ bi a ṣe nlọ lati aworan kan si ekeji ni idanilaraya lemọlemọfún. Diẹ diẹ sii lati sọ nipa CSS ti o rọrun yii, ṣugbọn ti ipa nla ti a ba mọ bi a ṣe le ipo rẹ daradara lori oju opo wẹẹbu.

Dan 3D Slider

Ti o ni HTML, CSS ati JavaScript, carousel 3D yii duro jade fun didanu rẹ ati iwara bouncing pẹlu ipa wiwo nla. Pẹlu lẹsẹsẹ awọn eroja ti o ṣe idanimọ kaadi kọọkan, iṣẹ ati carousel mimu oju lati ṣafikun rẹ lori oju opo wẹẹbu rẹ.

Nkan ti o jọmọ:

46 Javascript Sliders ati Scrollers

Laifọwọyi ailopin Laifọwọyi

Ẹyọ kan ti, bi orukọ tirẹ ti kilọ, ti han laifọwọyi laisi olumulo ti o ni ibaraenisepo ni akoko kankan pẹlu rẹ. Awọn oriṣiriṣi awọn aworan ti o ṣe carousel idaṣẹ yii han nitori iyipada ninu eyiti o jẹ ki idan rẹ bajẹ.

Rababa Carousel

Pẹlu eroja rababa yii esun yipo lati osi si otun, tabi idakeji, bi a ṣe fi itọka asin silẹ lori rẹ. Iyipo dan lati gbe laarin awọn fọto oriṣiriṣi ti o le ṣajọ esun aworan yii.

Mobile Carousel

Bakannaa ti a pe ni Apẹrẹ Ohun elo Carousel, ati pẹlu aṣa lọwọlọwọ pẹlu gbogbo awọn kaadi, nibi o le wa nkan miiran pẹlu nọmba nla ninu wọn ni CSS / HTML, jinna si ara rẹ nitori iyoku nitori pe o ni ede apẹrẹ ti Google gbejade. O le gbe awọn kaadi oriṣiriṣi lọ nipasẹ titẹ gigun lori awọn kaadi naa.

Carousel Instagram kikọ sii

O le jamba imọran lẹhin ifaworanhan fifihan yii nipasẹ rinhoho ti awọn aworan ti o le ṣe afikun nipa tite lori ọkan ninu wọn. Iwara ti ipa nla, botilẹjẹpe o tọka fun iru oju opo wẹẹbu kan pato. Awọn ifiweranṣẹ Instagram ti o ya si slick.js carousel.

Carousel amuṣiṣẹpọ ti o rọrun

O ni ọpọlọpọ lati ṣe pẹlu iṣaaju, ni pataki ni awọn aworan ti awọn aworan, botilẹjẹpe ibaraenisepo pẹlu esun jẹ oriṣiriṣi pupọ nipa gbigbe e pẹlu idari ti ita lati apa osi si otun ati ni idakeji. Lẹẹkansi a ni slick.js n ṣe nkan rẹ. Ijakadi fun ipa nla rẹ.

3D petele carousels

Ọkan ninu awọn carousels ti o nifẹ julọ lori gbogbo atokọ ti a tẹjade. Duro jade fun awọn ifaworanhan petele rẹ ni CSS ati HTML ti o gbe ni ikọja daradara. O ni lati fi itọka eku silẹ nikan lori awọn apoti lati wa awọn ipa oriṣiriṣi ti o le ṣe pẹlu awọn iyatọ mẹrin.

CSS Carousel

Ipa oju wiwo ti o rọrun ati nla pẹlu kan jara ti awọn kaadi ti o ya wa lori iwaju. Ipa naa wa ni 3D, nitorinaa o jẹ ọkan ninu awọn ifaworanhan wọnyẹn ti o fa afiyesi pupọ, paapaa nitori ipa ipadabọ kekere ti o fihan oloye-pupọ ni apakan ti ẹlẹda kanna.

Ambilight Bootstrap Carousel

Isokuso ti o rọrun pẹlu ipa nla ti ko duro fun pupọ. Jẹ ọkan ninu awon ti o rọrun sliders pe a maa n wa ati iyẹn n fun rilara yẹn ti ọkan laisi ayẹyẹ pupọ, ṣugbọn iyẹn mu iṣẹ rẹ ṣiṣẹ daradara.

Ẹgbẹ Carousel

Ti o ba fẹ ṣafihan egbe olootu ti o ni lori bulọọgi, yiyọ yi jẹ pipe ninu ipa rẹ. O dara iru si iṣaaju fun bi o ṣe rọrun. O wa jade fun lilo awọn okuta iyebiye lati fi ile si awọn fọto kọọkan ti ẹgbẹ. O ni ṣiṣiṣẹsẹhin aifọwọyi.

Carousel Kuubu

Yiyọ ti o duro fun jijẹ onigun ninu eyiti ọkọọkan awọn oju jẹ ọkan ninu awọn aworan tabi awọn fọto ti a fẹ ṣe afihan lori oju opo wẹẹbu kan. O kan ni lati tẹ lori ọkọọkan wọn lati yi lọ wọn ki o wa iru akoonu ti n duro de ọ.

Awọn bọtini itọka Carousel

Ifaworanhan kan ninu eyiti ibaraenisepo n kọja lilo awọn bọtini itọka. Rọrun laisi igbadun pupọ ti o lọ taara si iru ibaraenisepo miiran, ọkan ti o dabi awọn ọdun sẹhin. Fun kan pato lilo.

Awọn carousels inaro

Yiyọ kan pẹlu ipa wiwo nla pe laifọwọyi yoo ni a lemọlemọfún iwara inaro ti o duro fun awọn kaadi rẹ pẹlu awọn igun yika. Gan lọwọlọwọ ati ọkan ninu awọn ọkan ti o duro ni ara rẹ lati gbogbo atokọ yii.

CSrous Carousel mimọ

Carousel yii duro fun nini kan akojọ aṣayan ẹgbẹ lati eyiti a le lọ tite lori awọn aṣayan kọọkan. Alaye naa han pẹlu ipa ipadasẹyin ti aṣeyọri daradara laisi pupọ diẹ sii ju ohun ti a sọ lọ.

Inaro carousel fesi

Iru si ti tẹlẹ fun inaro rẹ, botilẹjẹpe yiyọ yii lagbara lati mu gbogbo iwọn oju-iwe naa lati fihan awọn aworan ti ọkọọkan awọn taabu rẹ. Nifẹ fun ọna kika nla rẹ ati lilo awọn iyipada CSS lati rọra yọ laarin awọn ifaworanhan.

3D Pin Carousel

Ipa wiwo nla pẹlu apẹẹrẹ awọn kikọja ti o yipo ni 3D pẹlu iwara pupọ. O le yan ọkọọkan awọn aṣayan lati inu akojọ aṣayan apa osi pẹlu awọn aami fun ọkọọkan wọn. Ọkan ninu ti o dara julọ lori atokọ fun bii o ṣe ṣẹda.