Въртележката примери фърмуера на употреба и стайлинг на плъзгача

Здравейте Ние продължаваме да се разглоби рамка за първоначално зареждане. Как да инсталирате и използвате основите на рамката написах в поста, "Как да работим с първоначално зареждане». В тази статия ние считаме, плъзгача, за да работят поетапно се нарича Carousel (Carousel). В Начално зареждане въртележка има значителни предимства в сравнение с другите: приспособимост за мобилни устройства, по подразбиране, ако задържите показалеца на мишката над кръговото движение, след това да промените слайда спира, докато потребителят не го премахва с курсора на мишката, стъклата могат да бъдат поставени във всяка HTML-код. Плъзгачът е предоставена от рамките, готови да ispolzovaniyui в повечето случаи не изисква значителен редактиране.

HTML код на плъзгача изглежда така:

За този пример, аз не пиша CSS стилове като цяло, взе само на HTML код документация на официалния сайт на рамката за първоначално зареждане «getbootstrap.com» и леко коригирани. промени идентификатор «идентификатор» да му «testCarousel» за въртележката. Заслужава да се отбележи, че «идентификатор» въртележка се предава на дисплеите и навигационни стрелките. Нека погледнем по-отблизо в HTML-код.

Контейнерът с клас «т» съдържа основното съдържание на слайда, тя може да бъде само една картина и всичко, и може да бъде всеки набор от HTML-тагове с изображението или не. Тези контейнери могат да бъдат много, но броят им трябва да съответства на броя на показателите, ако се използват индикаторите в въртележката. Контейнерът с класа на «въртележка-надпис» за допълнителни записи, което го постави в съдържанието ще бъде автоматично подравнен и форматиран.

можете да премахнете всички излишъка и да оставите само това, което е необходимо от въртележката на HTML-код, например, за да се отстранят показателите и да оставите само навигацията стрелка или обратно, в слайд - премахване на допълнителното описание и оставете само изображението, или премахнете изображение, задаване на заден план и да оставите текста с който и да е бутон ,

Клас «активна» дефинира ще се появи слайд на първо място, по подразбиране те се причисляват към първия показател и слайд. Ако трябва да се промени е показан първият слайд, но това не е смяна на блокове слайда, трябва да присвоите клас «активна» и показатели, както и слайда без нарушаване на последователността. Важно е да се помни, че номерацията на показателите започва от нула, което означава, че сметката и плъзнете индикатора ще бъде, например, четвъртия, а стойността на «данни плъзгаща да» на дисплея ще бъде 3.

въртележка за навигация все още е по-лесно. Всяка връзка се определя един бутон клас, който води към предишния клас, клас «наляво» и атрибут «данни пързалка» със стойността «предишна», както и бутон, който води към следващия слайд, класата на «дясно» и атрибут «данни пързалка »с« следващата стойност ". Вътре връзките в тагове «педя» самите стрелки (шеврони) са в ляво и в дясно, стрелите са привлечени от ikonochnogo шрифта за първоначално зареждане.

Стайлинг за първоначално зареждане Slider

Стилизирайте въртележката може да бъде всичко, което желаете. Вземете предишния пример, да направите снимка и дисплеи, добавете заглавието и бутона ще очертае своите собствени CSS стилове.

След като редактирате HTML код е станала толкова.

За този код, за да добавяте свои собствени стилове.

След направените промени въртележка прилича.

Съгласете се, всичко е достатъчно проста. Ако е необходимо, можете да направите от съответния фон на слайда, позициониране всички елементи в контейнера за въртележка обикновено е възможно да се реализира всичко, което е необходимо в конкретния проект.

На тази Ще завърша, а в следващата статия ще продължи да се разглоби за първоначално зареждане въртележка и да обмислят как да се промени анимация ефект при смяна на въртележка от слайдове.

Добавена коментари - 1