Orei bune din timpul zilei. În ultimul articol ne-am familiarizat cu caruselul Bootstrap și am dezasamblat punctele principale. În acest post, vom analiza modul de schimbare a efectului de animație la schimbarea diapozitivelor caruselului. Din anumite motive, în documentația oficială Bootstrap nu există informații despre acest lucru, deși schimbarea tipului de animație nu este, în principiu, dificilă.
Vom schimba diapozitivul standard transformând efectul de estompare, pentru aceasta vom scrie noi stiluri CSS, iar în codul HTML nu vom face corecții.
Iată un exemplu de carusel standard Bootstrap cu efectul de animație standard al spectacolului de diapozitive.
Pentru acest exemplu, se folosește codul HTML standard al cursorului cu stiluri CSS implicite Bootstrap.
Implicit, caruselului i se atribuie o clasă de diapozitive suplimentare. care stabilește efectul de a schimba diapozitivele.
Modificați-l pentru a scădea clasa.
Acestea sunt toate modificările pe care trebuie să le faceți în codul HTML. Rămâne doar să vă scrieți propriile stiluri CSS. În mod implicit, clasa este setată valoarea opacitatea estompare la 0. Schimbarea-l la 1, și are ca efect al schimbării, dar animația în sine nu este, în scopul de a atinge obiectivele noastre au nevoie pentru a adăuga stilurile necesare elemente de numerar și alunecări active.
Ultimul cod CSS va fi așa.
Rețineți că clasele ".carousel.fade" și ".item.active" trebuie întotdeauna să fie scrise împreună fără spații între ele.
Ca rezultat, avem un cursor cu efectul dizolvării.
După cum puteți vedea, este foarte ușor să schimbați vizualizarea standard a animației caruselului Bootstrap la efectul de estompare, există, desigur, câteva nuanțe, dar nu puteți scăpa de ele. Acest lucru încheie articolul, sper că a fost util pentru dvs. și util în practică.
Comentariile trimise - 4Vreau să ofer un pic de CSS /
Linia de jos este că dacă afișați conținutul dinamic al cursorului cu un link, atunci ITEM suprascrie ITEM ACTIVE. Adăugarea indexului z stabilește situația.
Poate că nu am făcut-o. Această soluție a fost utilizată de mai multe ori, a lucrat întotdeauna fără probleme. Dar în cazul tău, dacă folosești săgețile stânga și dreapta, va fi nevoie de setarea z-index și mai mult de ITEM.
Aș fi foarte recunoscător dacă scrieți un articol despre cum să poziționați o legendă în interiorul unui diapozitiv special, adică pe fiecare diapozitiv trebuie să aveți o poziție separată și o subtitrare de mărime, cum să faceți asta?
Bine ai venit! De fapt, totul este simplu, trebuie să adăugați o clasă unică pentru fiecare carusel-caption. Ei bine, de exemplu, aveți trei diapozitive, adăugați testul de clasă1 la primul element. la al doilea test2. bine, la cel de-al treilea test3. Rezultatul este acest HTML:
Acum puteți să stilizați separat fiecare carousel-caption.
De exemplu, astfel:
Trimiteți-le prietenilor: