Looge karussellslaidid (mitu üksust) HTML-i, CSS-i ja dünaamilise alglaadimise abil

Proovige Meie Instrumenti Probleemide Kõrvaldamiseks

HTML-i ja CSS-i veebiprogrammeerimist pildislaidide loomiseks uurides peate teadma, kuidas luua dünaamilist Boostrapi karusselli, mis muudab selle lihtsa slaidi Owl Caroseli abil võimalikuks. Kuid selles postituses näitan teile ainult seda, kuidas Bootstrap 4 abil karusselli luua.


Karussell on slaidi kujul olev üksuse komponent kujutiste või teksti kujul.


Põhjus, miks tegin Bootsrap 4 (CSS-raamistikuga) karussellslaidi, oli see, et see oli lihtsam ja ilma täiendavate tööriistadeta. Võib-olla lisage veidi CSS-i, et slaide oma maitse järgi stiliseerida.


Kuna selles õpetuses valmistame Boostrap 4-ga karusselli, peate selleks ette valmistama:

Looge fail laiendiga .html, näiteks: index.html, mis on ühendatud bootstrap 4-ga. Saate lingi otse kleepida vastavalt getboostrap.com (online) juhistele või laadides esmalt alla kohaliku alglaadimisfaili, et saaksime kasutage boostrap 4 võrgus ja võrguühenduseta.

Tasuta laiendustega (jpg, jpeg või png) pildid või fotod.


Kuidas luua dünaamilist Bootstrap 4 karusselli

Kopeerige ja kleepige kood, et luua Booststrapi abil lihtne karussell.

|_+_|


Seejärel käivitage see ja tulemused on järgmised:

Märkus: pöörake tähelepanu lingile veenduge, et olete muutnud pildi linki vastavalt salvestatud pildi aadressile.


Nii saate luua dünaamilise alglaadimiskarusselli mitme kujutisega kuni soovitud arvuni.