HTML, CSS3 ve jQuery kullanarak Tam Ekran Kaydırıcı Oluşturma

HTML, CSS3 ve jQuery kullanarak Tam Ekran Kaydırıcı Oluşturma


Create Full-Screen Slider using HTML, CSS3 and jQuery

 

HTML

 
İlk adım bir HTML yapısı oluşturmaktır. İşte ihtiyacımız olan şey:
 
 
Gezinme menüsü
 
  • Bir sınıf adı css-kaydırıcı-sarıcı ile kaydırıcı için bir sarmalayıcı div
  • Dört slaytlar; her birinin düğmeleri / resimleri / metni gibi öğeleri vardır
  • Slider sayfalandırma
 
 
Kodlar:
 
 
 
CSS
 
 
İlk olarak, vücuda temel stilleri ekleyelim.
 

 

Şimdi navigasyon menüsünü tarzlayalım; bazı dolgu ile tam genişlik yapalım. İçindeki elemanları hizalamak için flexbox kullanacağız .

 

 

Şimdi kaydırma çubuğunu değiştirelim.

 
Tam ekran bir kaydırıcı olacak, bu yüzden mutlak konuma getirdik.
 
 
Ayrıca, slaytları, uyguladığımız ortak sınıfı ve her bir karta, her birine bir arka plan rengi eklediğimiz sınıfa stil verelim.
 
 
Şimdi her slayttaki stil elemanları. Bir metin, bir düğme ve bir görüntü aldığımızı hatırlayın.
 
 
 
Ayrıca slayt değiştiğinde, içindeki öğelerin - metin ve resimler gibi - canlandırıldığından emin olalım.
 
 
Her slaydın sağ köşesinde de numaralandırma var. Bunu da stil edelim.
 
Şimdi, kaydırıcı sayfalama stilini.
 
 
 Şimdi burada eğlence kısmı geliyor ve sihrin gerçekleştiği yer.
 
Kullanacağımıza dikkat edin : sürgüyü kontrol etmek için sözde sınıf kontrol ettik .
 
: Kontrol seçili durumunda iken sözde sınıfı elemanları seçer. Sadece radyo ve onay kutusunun giriş ( input type = ”text” / ) öğeleriyle ilişkilendirilir. : Işaretli işaretli veya eyaletime konumuna getirildiğinde zaman sözde sınıfı seçici radyo ve onay kutusu girdi türlerini eşleşir. Seçilmedikleri veya işaretlenmedikleri takdirde, eşleşme olmaz.
 
 
Tam ekran kaydırıcımızın görünümü şöyle:
 
Tam Ekran Kaydırıcı Yarat

 

Javascript (jQuery)
 
 
Yapacak bir şey daha var. Kaydırıcı mermilere tıkladığımızda, kaydırıcımız yalnızca slaytları değiştirir. Kaydırıcıyı otomatik olarak değiştirmek için bazı Javascript kullanacağız. Önce projenize jQuery eklediğinizden emin olun ve sonra bu satırı javascript dosyanıza ekleyin.
 
 YUKARI