Csúszik betöltse, hogyan kell változtatni a nézetet a körhinta animáció

Jó napot kívánok. Az előző cikkben bemutattuk, hogy betöltse, körhinta és lebontották a fő pontokat. Ebben a bejegyzésben, nézzük, hogyan kell változtatni az animációs hatást, ha változik körhinta diák. Valahogy a hivatalos dokumentumok Bootstrap nincs információ ezzel kapcsolatban, bár a változás a forma animáció megvalósul, elvileg nem nehéz.

Meg fogja változtatni a szokásos görgetés diavetítés oldó hatása (fading), erre a további írási CSS stílusok és HTML-kód gyakorlatilag bármilyen szerkesztések nem tesz semmilyen.

Itt egy példa a rendszer alapértelmezett rendszerindító karusszel standard diavetítés animációs hatást.

Ebben a példában a szabványos HTML-kódot egy csúszka alapértelmezett rendszerindító CSS ​​stílusokat.

Alapértelmezésben a karusszel van rendelve egy további csoportját a csúszda. amely meghatározza az átmeneti hatást.

Változás, hogy az osztály fade.

Ezek mind olyan változások, amelyek meg kell, hogy a HTML-kódot. Továbbra is csak a megírják CSS stílusokat. Alapértelmezésben az osztály van beállítva elhalványul átlátszatlanság értékét 0-ra változtatni, hogy az 1. és a hatása a változás, de az animáció önmagában nem, annak érdekében, hogy elérjük céljainkat kell adni a szükséges készpénzt elemet stílusok és aktív dia.

Végső CSS-kód lesz.

Felhívjuk figyelmét, hogy az osztályok «.carousel.fade» és «.item.active» feltétlenül kell írni együtt, nem tesz szóközt őket.

Ennek eredményeként már fordult egy csúszka hatás megszűnése.

Mint látható, az alapértelmezett nézet megváltoztatásához animációk Bootstrap körhinta a fade-hatás valóban nem nehéz, van egy pár árnyalatok, persze, de nem megy sehova. Ebben a cikkben azt befejezni, remélem, hogy segített neked, és hasznos a gyakorlatban.

Megjegyzéseket fűzött hozzá - 4

Szeretnék ajánlani egy kis felülvizsgálat CSS /
A lényeg az, hogy ha a kimeneti dinamikus tartalom csúszka egy linket átfedi az ITEM ITEM AKTÍV. Hozzátéve z-index hiba helyzetet.

Lehet, hogy nem is találkozott. Ezt az oldatot használjuk többször, mindig is gond nélkül. De az Ön esetében, ha használja a nyíl jobbra és balra, nekik is be kell állítani a z-index, ami több, mint a tételek.

Azt nagyon hálás, ha írsz egy cikket, hogyan helyezze el a feliratot egy adott dia, azaz Minden dián kell külön képaláírást helyzete és mérete, hogyan kell csinálni?

Üdvözlünk! Tény, hogy minden egyszerű, amire szükség van az egyes .carousel-feliratot hozzá egy egyedi osztályban. Nos, mint te három diák, hozzátéve, hogy az első elem class test1. második test2. valamint a harmadik test3 volt. Az eredmény egy HTML-kód:

Most stilizálhatja minden .carousel-feliratot külön-külön.
Például így: