Neye ihtiyacımız var?
ile. .html dosyalarıyla çalışmak için yerel bir sunucunun kurulu olmasına ihtiyacımız olmamasına rağmen, tüm dosyalarımızı bir dizinde organize etmek ve daha sonra PHP kodunu eklemek istersek daha rahat çalışabilmek için bir tane kurmanızı öneririm, bu durumda ben Xampp Server kullanacak, https://www.apachefr… g / es / index.html adresinden indirebilirsiniz.
B. Slayt yapacağımız için, üzerine yerleştireceğimiz resimlere ihtiyacımız olacak, hepsinin piksel olarak tam olarak aynı boyutta olması gerekiyor, bazılarını 1200 X 600 boyutunda kullanacağım.
C. Seçtiğiniz bir kod editörü, bu durumda ben bir kod editörü kullanacağım. "Parantez".
Başlayalım …
1. Xampp'ı kurduğumuz için dizine gidiyoruz "C: / xampp / htdocs" ve yeni bir klasör oluşturuyoruz, bu durumda onu arayacağım "SliderShow_main", içinde başka bir klasör oluşturacağım ve onu arayacağım "Görüntüler", orada slayt gösterisinde kullanacağım resimleri yerleştireceğim.
Büyütmek için resmin üzerine tıklayın
2. Şimdi kod düzenleyicimizi açacağız, menüye gidiyoruz "Dosya> Yeni".
Büyütmek için resmin üzerine tıklayın
Ve bu yeni dosyada kodu yazacağız Temel HTML.
Büyütmek için resmin üzerine tıklayın
Bu dosyayı 1. adımda oluşturduğumuz klasörün içine (.html) uzantılı olarak kaydedeceğiz. "SliderShow_main".3. Daha sonra dosyaya bir başlık ekleyeceğiz ve kaydırıcımızın düzgün çalışması için ihtiyaç duyacağımız Bootstrap ve jquery dosyalarına referanslar ekleyeceğiz, bu dosyaları indirebileceğimiz ve yerel sunucudaki sitemizdeki klasörlerde bulundurabileceğimiz iki seçeneğimiz var. veya bunları web'den ekleyebiliriz, bu da bize sunucumuzda yer kazandırabilir. Ben ikinci seçeneği seçeceğim, nasıl yapacağınızı bir sonraki görselde göreceksiniz…
Büyütmek için resmin üzerine tıklayın
4. Daha sonra iki içine ekleyeceğizsırasıyla "container" ve "col-md-12" sınıflarını aşağıdaki gibi atayacağız …
BÜYÜT
Büyütmek için resmin üzerine tıklayın
Bu ikisieklediğimiz, kaydırıcımızın ekranımızdaki tüm kullanılabilir alanların üzerinde gösterilmesi için hizmet edecektir.5. Artık kodumuzu hazırladığımıza göre slaydı oluşturacak elemanları eklemeye başlayacağız, bakalım…
Büyütmek için resmin üzerine tıklayın
Gördüğünüz gibi bir yenisini ekledik."carousel_1" adını verdiğimiz ve "carousel" ve "slide" adlı 2 önyükleme sınıfı atadığımız, her ikisinin de bir boşlukla ayrıldığına dikkat edin, ayrıca slaydın çalışması için özniteliği eklemek gerekir (veri yolculuğu = "atlıkarınca").6. Bir önceki katmanda, resimlerimize karşılık gelen göstergelerin miktarını eklememize yardımcı olacak "carousel-indicators" sınıfı ile sıralı bir liste ekleyeceğiz, bu durumda üç resim kullanacağız, böylece üç göstergemiz olacak. "0".
Büyütmek için resmin üzerine tıklayın
unutmayın ki7. Şimdi gösterilecek olan görsellerle öğeleri ekleyeceğiz, daha fazla ayrıntı bulacağınız kodu görelim…
BÜYÜT
Büyütmek için resmin üzerine tıklayın
İlk öğeyle ilgili her şeyi yazdıktan sonra, görüntünün yolunu değiştirmemiz gerektiğini ve diğer öğelerin "aktif" sınıfı içermemesi gerektiğini dikkate alarak ihtiyacımız olan öğe miktarına göre kopyalayıp yapıştırıyoruz. .
BÜYÜT
Büyütmek için resmin üzerine tıklayın
Gördüğünüz gibi 3 görselimizle 3 öğeyi zaten ekledik ve kodumuz işlevsel, ancak şimdi görsellerimiz arasında ileri geri hareket etmek için kontrol öğeleri (Önceki ve Sonraki) ekleyeceğiz ve ayrıca bazı simgeler ekleyeceğiz. Son kodumuzu aşağıdaki gibi bırakarak …
BÜYÜT
Büyütmek için resmin üzerine tıklayın
Adımları doğru uygularsak tarayıcımızda aşağıdaki sonuçları görebiliriz…
BÜYÜT
Büyütmek için resmin üzerine tıklayın
Bu Eğitimi beğendiniz ve yardım ettiniz mi?Yazara olumlu puan vermek için bu düğmeye basarak yazarı ödüllendirebilirsiniz.
Bu eğitim size yardımcı oldu mu?
değilseBU EĞİTİMİ GELİŞTİRMEYE YARDIMCI OLUN!
Bu öğreticiyi düzeltebileceğinizi veya geliştirebileceğinizi düşünüyor musunuz? Sürümünüzü faydalı olduğunu düşündüğünüz değişikliklerle birlikte gönderebilirsiniz.0 kullanıcı bu öğreticiyi düzenledi. Düzenleyin ve tanınmış bir uzman olun!
Bu Eğitimi Düzenle
BENZER ÖĞRETMENLER
HTML5 Forms özellikleri ve nitelikleriHTML5 ve CSS3: İlişki ve CSS3 özellikleriHTML5 ve CSS3 İlk Adımlar: Web Tasarımında Ortak ÖğelerHTML5 ve CSS3 içeren tarif şablonuHTML5 ve CSS3: İlk AdımlarHTML5 ve CSS3 kullanan kullanıcılar için Twitter kartı oluşturunHtml5, css3 ve önyüklemede vurgulu efektli yatay çubukJavaScript'te Google Haritalar API'si ile istemci koordinatlarını alın (HMTL5, CSS3 ve Bootstrap)
18 Yorumlar
Juan Carlos
25 Ağu 2015 11:08
Size olumlu bir puan vermek için değil. Harika öğretici, daha fazla Ronny yapacak mısın ???
öğreticiniz için teşekkürler.
- Bildiri
Nestor1
25 Ağu 2015 11:34
Ben de öğreticiyi sevdim, teşekkürler Ronny, sadece bir soru: Kodun örneğini almak için bir zip dosyanız var mı? Böyle hissedersen harika olur. Teşekkürler!!
- Bildiri
Alexander Teba
25 Ağu 2015 16:26
Harika etki. onu analiz ediyorum.
Diğerlerinin söylediklerine katılıyorum, test etmek için kod içeren bir dosyanız olsaydı harika olurdu.
Teşekkürler
- Bildiri
Ronny Bonillo
25 Ağu 2015 16:54
Günaydın arkadaşlar, desteğiniz için teşekkürler, beğenmeniz çok güzel çünkü bu sitedeki ilk 3 dersimden biri ve gerçekten bu kadar çabuk olumlu cevaplar beklemiyordum, sorunuza Juan Carlos, elbette yapacağım. Bir süredir burada her hafta yeni dersler yayınlıyorum umarım beğenirsiniz ve yorumlarınız ve değerlendirmelerinizle beni desteklersiniz… Venezuela'dan selamlar…
- Bildiri
Ronny Bonillo
25 Ağu 2015 16:58
Hoş geldiniz Nestor1, yorumlarınız için teşekkürler! Sorunuzla ilgili olarak, yakında tekrar gelmenizi tavsiye ederim, çünkü önümüzdeki birkaç saat içinde bu öğreticinin içeriği, kodu indirebilmeniz için sonuna bir .zip eklenerek güncellenecektir.
- Bildiri
Eneko
25 Ağu 2015 17:06
Hoş geldiniz Nestor1, yorumlarınız için teşekkürler! Sorunuzla ilgili olarak, yakında tekrar gelmenizi tavsiye ederim, çünkü önümüzdeki birkaç saat içinde bu öğreticinin içeriği, kodu indirebilmeniz için sonuna bir .zip eklenerek güncellenecektir.
Ben de dikkatli olacağım, etkisi muhteşem ve şaşırtıcı. şimdiden teşekkürler.
- Bildiri
Ronny Bonillo
25 Ağu 2015 17:07
rica ederim Eneko…
- Bildiri
Alexander Teba
25 Ağu 2015 17:13
Günaydın arkadaşlar, desteğiniz için teşekkürler, beğenmeniz çok güzel çünkü bu sitedeki ilk 3 dersimden biri ve gerçekten de Juan Carlos'la ilgili sorunuza bu kadar çabuk olumlu cevaplar beklemiyordum, elbette yapacağım. Bir süredir burada her hafta yeni dersler yayınlıyorum umarım beğenirsiniz ve yorumlarınız ve değerlendirmelerinizle beni desteklersiniz… Venezuela'dan selamlar…
Ne kadar hızlı !!
Teşekkürler Ronny, kodu paylaşmanın benim için ne kadar iyi olduğunu bilemezsin.
Çok teşekkürler geliştirici!
not: seni takip ediyorum
- Bildiri
Ronny Bonillo
25 Ağu 2015 17:19
rica ederim alejandro, desteğin için teşekkürler!
- Bildiri
Nestor1
25 Ağu 2015 17:25
Hoş geldiniz Nestor1, yorumlarınız için teşekkürler! Sorunuzla ilgili olarak, yakında tekrar gelmenizi tavsiye ederim, çünkü önümüzdeki birkaç saat içinde bu öğreticinin içeriği, kodu indirebilmeniz için sonuna bir .zip eklenerek güncellenecektir.
Ronny dosyasını eklediğiniz için çok teşekkür ederiz. Ve Solvetic'e hoş geldiniz.
- Bildiri
Carlos Sanz
02 Eylül 2015 16:14
Test ediyorum, Ronny'yi bağladığınız için teşekkürler.
- Bildiri
Ronny Bonillo
02 Eylül 2015 21:43
rica ederim Carlos
- Bildiri
Fiore nella
08 Eylül 2015 16:25
Eklenti için teşekkürler !! çok havalı.
- Bildiri
Ronny Bonillo
08 Eylül 2015 16:37
rica ederim Fiore 
- Bildiri
Reneé Toapanta Garcia
02 Haziran 2016 21:58
Günaydın, tema çok şık ama indiremiyorum, tekrar tekrar kendimi tanıtmamı istiyor ve oradan gitmeme izin vermiyor. Bana yardım edebilirsen, sana bir milyon teşekkür ederim.
- Bildiri
Julio Martinez
Temmuz 262021-2022 20:03
Kodu görmek için .zip dosyasını göremiyorum
- Bildiri
aldo1982
Temmuz 292021-2022 05:22
çok iyi, ancak codego'yu indirmek için .zip dosyasını göremiyorum.
Sld'ler
- Bildiri
Manelli
132021-2022 Eylül 12:58
İyi…
Süper açıklama ve sunum Ronny Son yorum yapanlarla aynı… Kodu indirmek için link nerede?
Teşekkürler ve saygılar,
Nelly.
- Bildiri
- Hesap oluşturSolvetic hesabınıza sahip olmak için ÜCRETSİZ kaydolunBir hesap oluştur
- Tanımlamakzaten bir hesabın var mı? Oturum açınBeni Hesabımda tanımla
