Czego potrzebujemy?
do. Chociaż do pracy z plikami .html nie potrzebujemy zainstalowanego serwera lokalnego, zalecam zainstalowanie go, aby wszystkie nasze pliki były zorganizowane w katalogu i aby móc pracować wygodniej, jeśli później będziemy chcieli dodać kod PHP, w tym przypadku ja będzie korzystać z Xampp Server, można pobrać z https: //www.apachefr… g / es / index.html
b. Ponieważ zamierzamy zrobić slajd, będziemy potrzebować obrazów, które zamierzamy na nim umieścić, wszystkie muszą mieć dokładnie ten sam rozmiar w pikselach, użyję niektórych o rozmiarze 1200 X 600.
C. Wybrany przez Ciebie edytor kodu, w tym przypadku użyję takiego o nazwie „Nawiasy”.
Zacznijmy …
1. Ponieważ zainstalowaliśmy Xampp, przechodzimy do katalogu "C: / xampp / htdocs" i tworzymy nowy folder, w tym przypadku będę go nazywał "SuwakPokaż_główny", w środku stworzę kolejny folder i wywołam go "Obrazy", tam umieszczę obrazy, które wykorzystam w pokazie slajdów.
Kliknij obraz, aby go powiększyć
2. Teraz otworzymy nasz edytor kodu, przejdziemy do menu „Plik > Nowy”.
Kliknij obraz, aby go powiększyć
A w tym nowym pliku napiszemy kod Podstawowy kod HTML.
Kliknij obraz, aby go powiększyć
Zapiszemy ten plik z rozszerzeniem (.html) w folderze, który utworzyliśmy w kroku 1 "SuwakPokaż_główny".3. Później dodamy tytuł pliku oraz odnośniki do plików Bootstrap i jquery, które będą nam potrzebne do poprawnego działania naszego slidera, mamy dwie opcje, możemy pobrać te pliki i przechowywać je w folderach na naszej stronie na serwerze lokalnym lub możemy dodać je z sieci, co zaoszczędzi nam miejsca na naszym serwerze. Wybiorę drugą opcję, na następnym obrazku zobaczysz jak to zrobić…
Kliknij obraz, aby go powiększyć
4. Później dodamy w tych dwóchdo których przyporządkujemy odpowiednio klasy „kontener” i „col-md-12” w następujący sposób…
POWIĘKSZAĆ
Kliknij obraz, aby go powiększyć
Tych dwóchktóre dodamy posłuży nam do tego, aby nasz slider był widoczny przede wszystkim z dostępnej przestrzeni na naszym ekranie.5. Po przygotowaniu naszego kodu zaczniemy dodawać elementy, które będą się składać na slajd, zobaczmy…
Kliknij obraz, aby go powiększyć
Jak widać dodaliśmy nowyktórą nazywamy „karuzela_1” i przypisujemy 2 klasy bootstrapów o nazwie „karuzela” i „slajd”, zauważ, że obie są oddzielone spacją, dodatkowo aby slajd działał konieczne jest dodanie atrybutu (przejazd na dane = "karuzela").6. W ramach poprzedniej warstwy dodamy uporządkowaną listę z klasą „carousel-indicators”, która pomoże nam dodać ilość wskaźników odpowiadających naszym obrazom, w tym przypadku użyjemy trzech obrazków, więc będziemy mieli trzy wskaźniki zaczynając od „0”.
Kliknij obraz, aby go powiększyć
Zauważ, że7. Teraz dodamy elementy ze zdjęciami, które zostaną pokazane, zobaczmy kod, w którym znajdziesz więcej szczegółów…
POWIĘKSZAĆ
Kliknij obraz, aby go powiększyć
Po napisaniu wszystkiego, co związane z pierwszym elementem, po prostu kopiujemy i wklejamy w zależności od ilości elementu, którego potrzebujemy, biorąc pod uwagę, że musimy zmienić ścieżkę obrazu i że pozostałe elementy nie mogą zawierać klasy „aktywnej” .
POWIĘKSZAĆ
Kliknij obraz, aby go powiększyć
Jak widać, dodaliśmy już 3 elementy z naszymi 3 obrazami, a nasz kod działa, ale teraz dodamy elementy kontrolne (poprzedni i następny), aby poruszać się tam iz powrotem między naszymi obrazami, a także dodamy kilka ikon. Pozostawiając nasz ostateczny kod w następujący sposób …
POWIĘKSZAĆ
Kliknij obraz, aby go powiększyć
Jeśli postępujemy zgodnie z instrukcjami poprawnie, w naszej przeglądarce możemy zobaczyć następujące wyniki …
POWIĘKSZAĆ
Kliknij obraz, aby go powiększyć
Podobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt
Czy ten samouczek ci pomógł?
Jeśli niePomóż ulepszyć ten samouczek!
Czy uważasz, że możesz poprawić lub ulepszyć ten samouczek? Możesz wysłać swoje wydanie ze zmianami, które uznasz za przydatne.0 użytkowników edytowało ten samouczek. Edytuj i zostań uznanym ekspertem!
Edytuj ten samouczek
PODOBNE ĆWICZENIA
Właściwości i atrybuty formularzy HTML5HTML5 i CSS3: relacje i atrybuty CSS3Pierwsze kroki w HTML5 i CSS3: wspólne elementy w projektowaniu stron internetowychSzablon przepisu z HTML5 i CSS3HTML5 i CSS3: Pierwsze krokiUtwórz kartę na Twitter dla użytkowników korzystających z HTML5 i CSS3Poziomy pasek z efektem najechania w html5, css3 i bootstrapUzyskaj współrzędne klienta za pomocą Google Maps API w JavaScript (HMTL5, CSS3 i Bootstrap)
18 komentarzy
Juan Carlos
25 sierpnia 2015 11:08
Nie po to, by dać ci pozytywny punkt. Świetny samouczek, czy zamierzasz zrobić więcej Ronny'ego ???
dzięki za tutorial.
- Raport
Nestor1
25 sierpnia 2015 11:34
Podobał mi się również samouczek, dzięki Ronny, tylko jedno pytanie: Czy masz plik zip, aby wziąć przykład kodu? Byłoby wspaniale, gdybyś miał na to ochotę. Dziękuję Ci!!
- Raport
Aleksander Teba
25 sierpnia 2015 16:26
Świetny efekt. Analizuję to.
Dołączam do tego, co mówią inni, gdybyś miał plik z kodem do przetestowania, byłoby świetnie.
Dziękuję Ci
- Raport
Ronny Bonillo
25 sierpnia 2015 16:54
Dzień dobry przyjaciele, dzięki za wsparcie, wspaniale, że Ci się podobało, ponieważ jest to jeden z moich pierwszych 3 samouczków na stronie i naprawdę nie spodziewałem się tak szybko pozytywnych odpowiedzi, jeśli chodzi o twoje pytanie Juan Carlos, oczywiście, że tak. tutaj przez jakiś czas publikuję co tydzień nowe tutoriale Mam nadzieję, że Ci się podobają i że wspierasz mnie swoimi komentarzami i ocenami … Pozdrowienia z Wenezueli …
- Raport
Ronny Bonillo
25 sierpnia 2015 16:58
Nie ma za co Nestor1, dzięki za komentarze! Jeśli chodzi o Twoje pytanie, polecam wkrótce wrócić, ponieważ w ciągu najbliższych kilku godzin zawartość tego samouczka zostanie zaktualizowana poprzez dodanie na końcu .zip, aby można było pobrać kod.
- Raport
Eneko
25 sierpnia 2015 17:06
Nie ma za co Nestor1, dzięki za komentarze! Jeśli chodzi o Twoje pytanie, polecam wkrótce wrócić, ponieważ w ciągu najbliższych kilku godzin zawartość tego samouczka zostanie zaktualizowana poprzez dodanie na końcu .zip, aby można było pobrać kod.
Też będę uważny, efekt jest spektakularny i niesamowity. Z góry dziękuję.
- Raport
Ronny Bonillo
25 sierpnia 2015 17:07
Nie ma za co Eneko…
- Raport
Aleksander Teba
25 sierpnia 2015 17:13
Dzień dobry przyjaciele, dzięki za wsparcie, wspaniale, że Ci się podobało, ponieważ jest to jeden z moich pierwszych 3 samouczków na stronie i naprawdę nie spodziewałem się tak szybko pozytywnych odpowiedzi, jeśli chodzi o twoje pytanie Juan Carlos, oczywiście, że tak. tutaj przez jakiś czas publikuję co tydzień nowe tutoriale Mam nadzieję, że Ci się podobają i że wspierasz mnie swoimi komentarzami i ocenami … Pozdrowienia z Wenezueli …
Jak szybko !!
Dzięki Ronny, nie wiesz, jakie to dobre dla mnie, że udostępniłeś kod.
Bardzo dziękuję programiście!
ps: śledzę cię.
- Raport
Ronny Bonillo
25 sierpnia 2015 17:19
nie ma za co alejandro, dzięki za wsparcie!
- Raport
Nestor1
25 sierpnia 2015 17:25
Nie ma za co Nestor1, dzięki za komentarze! Jeśli chodzi o Twoje pytanie, polecam wkrótce wrócić, ponieważ w ciągu najbliższych kilku godzin zawartość tego samouczka zostanie zaktualizowana poprzez dodanie na końcu .zip, aby można było pobrać kod.
Bardzo dziękuję za załączenie pliku Ronny'ego. I witaj w Solvetic.
- Raport
Carlos Sanz
Wrz 02 2015 16:14
Testuję to, dzięki za dołączenie Ronny'ego.
- Raport
Ronny Bonillo
wrz 02 2015 21:43
nie ma za co Carlos
- Raport
Fiore nella
wrz 08 2015 16:25
Dzięki za załącznik !! bardzo fajny.
- Raport
Ronny Bonillo
Wrz 08 2015 16:37
Nie ma za co Fiore 
- Raport
Reneé Toapanta García
02 czerwca 2016 21:58
Dzień dobry, motyw jest bardzo elegancki, ale nie mogę go pobrać, ciągle prosi mnie o identyfikację i nie pozwala mi odejść. Jeśli mógłbyś mi pomóc, dziękuję ci milion.
- Raport
Julio Martinez
Lip 262021-2022 20:03
Nie widzę pliku .zip, aby zobaczyć kod
- Raport
aldo1982
Lip 292021-2022 05:22
bardzo dobrze, ale nie widzę .zip do pobrania codego.
Slds
- Raport
Manelly
wrz 132021-2022 12:58
Dobry…
Super wyjaśnienie i prezentacja Ronny Tak samo jak ostatni komentatorzy… Gdzie jest link do pobrania kodu?
Dziękuję i pozdrawiam,
Nelly.
- Raport
- Utwórz kontoZarejestruj się ZA DARMO, aby mieć swoje konto SolveticZarejestruj konto
- ZidentyfikowaćMasz już konto? Podpisz tutajZidentyfikuj mnie na moim koncie
