Шта нам је потребно?
до. Иако нам за рад са .хтмл датотекама није потребан инсталиран локални сервер, препоручујем да га инсталирате да би све наше датотеке биле организоване у директоријуму и да бисмо могли радити удобније ако касније желимо да додамо ПХП код, у овом случају ја користиће Ксампп Сервер, можете га преузети са хттпс: //ввв.апацхефр… г / ес / индек.хтмл
б. Пошто ћемо направити слајд, потребне су нам слике које ћемо на њега поставити, све морају имати потпуно исту величину у пикселима, ја ћу користити неке величине 1200 Кс 600.
ц. Уређивач кода по вашем избору, у овом случају ћу користити један тзв "Заграде".
Хајде да почнемо …
1. Пошто смо инсталирали Ксампп, идемо у директоријум "Ц: / кампп / хтдоцс" и ми стварамо нову фасциклу, у овом случају ја ћу је позвати "СлидерСхов_маин", унутар ње ћу направити другу фасциклу и позвати је "Слике", тамо ћу поставити слике које ћу користити у презентацији.
Кликните на слику да бисте је увећали
2. Сада ћемо отворити наш уређивач кода, идемо у мени "Датотека> Ново".
Кликните на слику да бисте је увећали
У овој новој датотеци написаћемо код Основни ХТМЛ.
Кликните на слику да бисте је увећали
Ову датотеку са наставком (.хтмл) ћемо сачувати у фасцикли коју смо креирали у 1. кораку "СлидерСхов_маин".3. Касније ћемо додати наслов датотеке и референце на датотеке Боотстрап и јкуери које ће нам требати да би наш клизач исправно радио, имамо две могућности да преузмемо ове датотеке и ставимо их у фасцикле на нашој веб локацији на локалном серверу или их можемо додати са веба, што би нам уштедели простор на серверу. Изабраћу другу опцију, видећете како то учинити на следећој слици …
Кликните на слику да бисте је увећали
4. Касније ћемо додати двакојима ћемо доделити класе „цонтаинер“ и „цол-мд-12“ респективно на следећи начин …
ЕНЛАРГЕ
Кликните на слику да бисте је увећали
Ова двакоје додајемо служиће тако да се наш клизач приказује изнад свих расположивих простора на екрану.5. Сада када смо припремили наш код, почећемо са додавањем елемената који ће чинити слајд, да видимо …
Кликните на слику да бисте је увећали
Као што видите додали смо новукоју називамо "цароусел_1" и додељујемо 2 класе боотстрапа под називом "цароусел" и "слиде", имајте на уму да су обе одвојене размаком, додатно да би слајд функционисао потребно је додати атрибут (дата-риде = "цароусел").6. Унутар претходног слоја додаћемо сређену листу са класом "вртешке-индикатори" која ће нам помоћи да додамо количину индикатора који одговарају нашим сликама, у овом случају ћемо користити три слике, тако да ћемо имати три индикатора почевши од "0".
Кликните на слику да бисте је увећали
Имајте на уму да је7. Сада ћемо додати ставке са сликама које ће бити приказане, да видимо код у коме ћете пронаћи више детаља …
ЕНЛАРГЕ
Кликните на слику да бисте је увећали
Након што смо написали све што је повезано с првом ставком, једноставно копирамо и залијепимо према количини ставке која нам је потребна, узимајући у обзир да морамо промијенити путању слике и да остале ставке не смију садржавати "активну" класу .
ЕНЛАРГЕ
Кликните на слику да бисте је увећали
Као што видите, већ смо додали 3 ставке са наше 3 слике и наш код је функционалан, али сада ћемо додати контролне елементе (Претходна и Следећа) за кретање напред -назад између наших слика, а додаћемо и неке иконе. Наш коначни код остављамо на следећи начин …
ЕНЛАРГЕ
Кликните на слику да бисте је увећали
Ако правилно следимо кораке, у нашем прегледачу можемо видети следеће резултате …
ЕНЛАРГЕ
Кликните на слику да бисте је увећали
Да ли вам се допао и помогао овај водич?Можете наградити аутора притиском на ово дугме да бисте му дали позитиван поен
Да ли вам је овај водич помогао?
Ако неПОМОЗИТЕ ПОБОЉШАЈТЕ ОВАЈ ВОДИЧ!
Мислите ли да можете исправити или побољшати овај водич? Можете послати своје издање са променама које сматрате корисним.0 корисника је уредило ово упутство. Уредите и постаните признати стручњак!
Измените овај водич
СЛИЧНИ ВОДИЦИ
Својства и атрибути ХТМЛ5 образацаХТМЛ5 и ЦСС3: Односи и ЦСС3 атрибутиХТМЛ5 и ЦСС3 први кораци: Уобичајени елементи у веб дизајнуПредложак рецепта са ХТМЛ5 и ЦСС3ХТМЛ5 и ЦСС3: Први корациНаправите Твиттер картицу за кориснике који користе ХТМЛ5 и ЦСС3Хоризонтална трака са ховер ефектом у хтмл5, цсс3 и боотстрапуДобијте координате клијената помоћу АПИ -ја за Гоогле мапе у ЈаваСцрипт -у (ХМТЛ5, ЦСС3 и Боотстрап)
18 Коментари
Јуан Царлос
25. август 2015 11:08
Да вам не дам позитиван поен. Одличан водич, хоћеш ли више радити Ронни ???
хвала вам на упутству.
- Извештај
Нестор1
25. август 2015. 11:34
Такође ми се допао туторијал, хвала Ронни, само једно питање: Имате ли зип датотеку за пример кода? Било би сјајно ако се тако осећате. Хвала вам!!
- Извештај
Александар Теба
25. август 2015. 16:26
Одличан ефекат. Ја то анализирам.
Придружујем се ономе што други кажу, да имате датотеку са кодом за тестирање, било би сјајно.
Хвала вам
- Извештај
Ронни Бонилло
25. август 2015. 16:54
Добро јутро пријатељи, хвала на подршци, супер је што вам се допао јер је ово један од моја прва 3 водича на сајту и заиста нисам очекивао позитивне одговоре тако брзо, у вези са вашим питањем Јуан Царлос, наравно да хоћу. овде неко време постављам нове водиче сваке недеље надам се да ће вам се допасти и да ћете ме подржати својим коментарима и оценама … поздрав из Венецуеле …
- Извештај
Ронни Бонилло
25. август 2015. 16:58
Нема на чему Нестор1, хвала вам на коментару! Што се тиче вашег питања, препоручујем вам да се вратите ускоро, јер ће се у наредних неколико сати садржај овог водича ажурирати додавањем .зип -а на крају како бисте могли преузети код.
- Извештај
Енеко
25. август 2015. 17:06
Нема на чему Нестор1, хвала вам на коментару! Што се тиче вашег питања, препоручујем вам да се вратите ускоро, јер ће се у наредних неколико сати садржај овог водича ажурирати додавањем .зип -а на крају како бисте могли преузети код.
И ја ћу бити пажљив, ефекат је спектакуларан и невероватан. Хвала унапред.
- Извештај
Ронни Бонилло
25. август 2015. 17:07
Нема на чему Енеко …
- Извештај
Александар Теба
25. август 2015. 17:13
Добро јутро пријатељи, хвала на подршци, супер је што вам се допао јер је ово један од моја прва 3 водича на сајту и заиста нисам очекивао позитивне одговоре тако брзо, у вези са вашим питањем Јуан Царлос, наравно да хоћу. овде неко време постављам нове водиче сваке недеље надам се да ће вам се допасти и да ћете ме подржати својим коментарима и оценама … поздрав из Венецуеле …
Колико брзо !!
Хвала Ронни, не знаш колико је добро за мене што си поделио код.
Пуно вам хвала програмер!
пс: пратим те.
- Извештај
Ронни Бонилло
25. август 2015. 17:19
нема на чему алејандро, хвала ти на подршци!
- Извештај
Нестор1
25. август 2015. 17:25
Нема на чему Нестор1, хвала вам на коментару! Што се тиче вашег питања, препоручујем вам да се вратите ускоро, јер ће се у наредних неколико сати садржај овог водича ажурирати додавањем .зип -а на крају како бисте могли преузети код.
Хвала вам пуно што сте приложили датотеку Ронни. И добродошли у Солветић.
- Извештај
Царлос Санз
02. септембар 2015. 16:14
Тестирам га, хвала што сте приложили Ронија.
- Извештај
Ронни Бонилло
02. септембар 2015. 21:43
нема на чему Царлос
- Извештај
Фиоре нелла
08. септембар 2015. 16:25
Хвала на прилогу !! Веома кул.
- Извештај
Ронни Бонилло
08. септембар 2015. 16:37
Нема на чему Фиоре 
- Извештај
Ренее Тоапанта Гарциа
02. јун 2016 21:58
Добро јутро, тема је врло елегантна, али не могу да је преузмем, тражи ме изнова и изнова да се идентификујем и неће ме пустити одатле. Ако можете да ми помогнете, захваљујем вам се на милион.
- Извештај
Јулио Мартинез
Јула 262021-2022 20:03
Не видим .зип датотеку да бих видео код
- Извештај
алдо1982
Јула 292021-2022 05:22
врло добро, али не видим .зип за преузимање цодега.
Слдс
- Извештај
Манелли
Септембра 132021-2022 12:58
Добро…
Супер објашњење и презентација Ронни Исто као и последњи коментатори … Где је веза за преузимање кода?
Хвала и поздрав,
Нелли.
- Извештај
- Региструј сеРегиструјте се БЕСПЛАТНО да бисте имали свој Солветиц налогРегиструјте
- ИдентифиДа ли већ имате налог? Пријавите се овдеИдентификујте ме на мом налогу
