Какво ни трябва?
да се. Въпреки че за работа с .html файлове не се нуждаем от инсталиран локален сървър, препоръчвам да инсталирате такъв, за да организирате всичките си файлове в директория и да можете да работите по -удобно, ако по -късно искаме да добавим PHP код, в този случай I ще използва Xampp Server, можете да изтеглите от https: //www.apachefr… g / es / index.html
б. Тъй като ще направим слайд, ще ни трябват изображенията, които ще поставим върху него, всички те трябва да имат точно същия размер в пиксели, аз ще използвам някои с размер 1200 X 600.
° С. Редактор на код по ваш избор, в този случай ще използвам такъв наречен "Скоби".
Да започваме …
1. Тъй като сме инсталирали Xampp, отиваме в директорията "C: / xampp / htdocs" и създаваме нова папка, в този случай ще я извикам "SliderShow_main", вътре в нея ще създам друга папка и ще я извикам "Изображения", там ще поставя изображенията, които ще използвам в слайдшоуто.
Щракнете върху изображението, за да го увеличите
2. Сега ще отворим нашия редактор на код, отиваме в менюто "Файл> Ново".
Щракнете върху изображението, за да го увеличите
И в този нов файл ще напишем кода Основен HTML.
Щракнете върху изображението, за да го увеличите
Ще запазим този файл с разширението (.html) в папката, която създадохме в стъпка 1 "SliderShow_main".3. По -късно ще добавим заглавие на файла и препратките към файловете Bootstrap и jquery, които ще ни трябват за правилната работа на нашия плъзгач, имаме две възможности да изтеглим тези файлове и да ги имаме в папки на нашия сайт в рамките на локалния сървър или можем да ги добавим от мрежата, което би ни спестило място на нашия сървър. Ще избера втория вариант, ще видите как да го направите на следващото изображение …
Щракнете върху изображението, за да го увеличите
4. По -късно ще добавим в рамките на дветена които ще присвоим съответно класовете "container" и "col-md-12", както следва …
Увеличете
Щракнете върху изображението, за да го увеличите
Тези дваматакоето добавяме ще служи така, че плъзгачът ни да се показва над цялото налично пространство на екрана ни.5. Сега, след като сме подготвили нашия код, ще започнем да добавяме елементите, които ще съставят слайда, да видим …
Щракнете върху изображението, за да го увеличите
Както можете да видите, добавихме новкойто наричаме "carousel_1" и присвояваме 2 класа bootstrap, наречени "carousel" и "slide", имайте предвид, че и двата са разделени с интервал, допълнително за да работи слайдът е необходимо да добавите атрибута (data-ride = "въртележка").6. В рамките на предишния слой ще добавим подреден списък с класа "въртележки-индикатори", който ще ни помогне да добавим количеството индикатори, съответстващи на нашите изображения, в този случай ще използваме три изображения, така че ще имаме три индикатора, започвайки от "0".
Щракнете върху изображението, за да го увеличите
Обърнете внимание, че7. Сега ще добавим елементите с изображенията, които ще бъдат показани, нека видим кода, в който ще намерите повече подробности …
Увеличете
Щракнете върху изображението, за да го увеличите
След като сме написали всичко свързано с първия елемент, ние просто копираме и поставяме според количеството елемент, от който се нуждаем, като имаме предвид, че трябва да променим пътя на изображението и че другите елементи не трябва да съдържат „активния“ клас .
Увеличете
Щракнете върху изображението, за да го увеличите
Както можете да видите, ние вече добавихме 3 -те елемента с нашите 3 изображения и нашият код е функционален, но сега ще добавим контролни елементи (Prev & Next), за да се движим напред -назад между нашите изображения, а също така ще добавим и някои икони. Оставяме нашия окончателен код, както следва …
Увеличете
Щракнете върху изображението, за да го увеличите
Ако следваме стъпките правилно, в нашия браузър можем да видим следните резултати …
Увеличете
Щракнете върху изображението, за да го увеличите
Хареса ли ви и помогнахте на този урок?Можете да възнаградите автора, като натиснете този бутон, за да му дадете положителна точка
Помогна ли ви този урок?
Ако неПОМОГНЕТЕ ПОДОБРЕТЕ ТОЗИ УРОК!
Смятате ли, че можете да коригирате или подобрите този урок? Можете да изпратите изданието си с промените, които смятате за полезни.0 потребители са редактирали този урок. Редактирайте и станете признат експерт!
Редактирайте този урок
Сходни уроци
HTML5 Форми свойства и атрибутиHTML5 и CSS3: Връзка и CSS3 атрибутиHTML5 и CSS3 Първи стъпки: Общи елементи в уеб дизайнаШаблон за рецепти с HTML5 и CSS3HTML5 и CSS3: Първи стъпкиСъздайте Twitter карта за потребители, използващи HTML5 и CSS3Хоризонтална лента с ефект на ховър в html5, css3 и bootstrapВземете клиентски координати с Google Maps API в JavaScript (HMTL5, CSS3 и Bootstrap)
18 коментара
Хуан Карлос
25 август 2015 11:08
За да не ви дам положителна точка. Страхотен урок, ще правиш ли повече Рони ???
благодаря за урока.
- Доклад
Нестор1
25 август 2015 г. 11:34
Също така харесах урока, благодаря Рони, само един въпрос: Имате ли zip файл, за да вземете примера с кода? Би било чудесно, ако ви се прииска. Благодаря ти!!
- Доклад
Александър Теба
25 август 2015 г. 16:26
Страхотен ефект. Аз го анализирам.
Присъединявам се към това, което казват другите, ако имахте файл с кода за тестване, би било чудесно.
Благодаря ти
- Доклад
Рони Бонило
25 август 2015 г. 16:54
Добро утро приятели, благодаря за подкрепата, чудесно е, че ви хареса, защото това е един от първите ми 3 урока на сайта и наистина не очаквах положителни отговори толкова бързо, по отношение на вашия въпрос Хуан Карлос, разбира се, че ще го направя. тук за известно време публикувам нови уроци всяка седмица, надявам се да ви харесат и да ме подкрепите с вашите коментари и оценки … Поздрави от Венецуела …
- Доклад
Рони Бонило
25 август 2015 16:58
Добре дошъл Nestor1, благодаря ти за коментара! Що се отнася до вашия въпрос, препоръчвам ви да се върнете скоро, защото през следващите няколко часа съдържанието на този урок ще бъде актуализирано чрез добавяне на .zip в края, за да можете да изтеглите кода.
- Доклад
Енеко
25 август 2015 17:06
Добре дошъл Nestor1, благодаря ти за коментара! Що се отнася до вашия въпрос, препоръчвам ви да се върнете скоро, защото през следващите няколко часа съдържанието на този урок ще бъде актуализирано чрез добавяне на .zip в края, за да можете да изтеглите кода.
И аз ще бъда внимателен, ефектът е грандиозен и е невероятен. Благодаря предварително.
- Доклад
Рони Бонило
25 август 2015 17:07
Добре дошла Енеко …
- Доклад
Александър Теба
25 август 2015 17:13
Добро утро приятели, благодаря за подкрепата, чудесно е, че ви хареса, защото това е един от първите ми 3 урока на сайта и наистина не очаквах положителни отговори толкова бързо, по отношение на вашия въпрос Хуан Карлос, разбира се, че ще го направя. тук за известно време публикувам нови уроци всяка седмица, надявам се да ви харесат и да ме подкрепите с вашите коментари и оценки … Поздрави от Венецуела …
Колко бързо !!
Благодаря Рони, не знаеш колко добре е за мен, че сподели кода.
Благодаря ви много разработчик!
пс: следя те.
- Доклад
Рони Бонило
25 август 2015 17:19
добре дошъл алехандро, благодаря ти за подкрепата!
- Доклад
Нестор1
25 август 2015 17:25
Добре дошъл Nestor1, благодаря ти за коментара! Що се отнася до вашия въпрос, препоръчвам ви да се върнете скоро, защото през следващите няколко часа съдържанието на този урок ще бъде актуализирано чрез добавяне на .zip в края, за да можете да изтеглите кода.
Благодаря ви много, че прикачихте файла Ronny. И добре дошли в Solvetic.
- Доклад
Карлос Санс
02 септември 2015 г. 16:14
Тествам го, благодаря за прикачването на Рони.
- Доклад
Рони Бонило
02 септември 21:43
добре дошъл Карлос
- Доклад
Фиоре Нела
08 септември 2015 г. 16:25
Благодаря за прикачения файл !! много яко.
- Доклад
Рони Бонило
08 септември 2015 г. 16:37
Добре дошла, Фиоре 
- Доклад
Рене Тоапанта Гарсия
02 юни 2016 21:58
Добро утро, темата е много елегантна, но не мога да я изтегля, пита ме отново и отново да се идентифицирам и няма да ме пусне оттам. Ако можете да ми помогнете, благодаря ви милион.
- Доклад
Хулио Мартинес
Юли 262021-2022 20:03
Не виждам .zip файла, за да видя кода
- Доклад
aldo1982
Юли 292021-2022 05:22
много добре, но не виждам .zip за изтегляне на codego.
Slds
- Доклад
Манели
Септември 132021-2022 12:58
Добре…
Супер обяснение и представяне Рони Същото като последните коментатори … Къде е връзката за изтегляне на кода?
Благодаря и поздрави,
Нели.
- Доклад
- Създай акаунтРегистрирайте се БЕЗПЛАТНО, за да имате своя Solvetic акаунтРегистрирайте акаунт
- ИдентифицирайтеИмате ли вече акаунт? Влезте тукИдентифицирайте ме в моя акаунт
