/ / JQuery Kütüphanesi: siteniz için kaydırıcılar

JQuery kütüphanesi: siteniz için kaydırıcılar

Zamanın geçişi ve teknolojinin gelişmesi ileweb tasarım alanları değişiyor ve kullanıcıların içerik sitelerine olan ihtiyaçları / ihtiyaçları. Daha önceleri, az sayıda tematik imgeye sahip metin içeriğiyse, bugün grafik bileşeni baskın olanıdır. Kısa bir sürede maksimum yararlı ve yararlı bilgi almanıza ve uzun metinleri okumanıza zaman ayırmanıza izin vermez. Bu bağlamda, giderek daha popüler ve dahası, web sayfalarının önemli bir unsuru kaydırıcılardır. Bunlar, resimlerden bağlantılara kadar değişen içeriğe sahip bloklardır. Bu web nesnesini eklemenin modern bir yolu, JQuery kitaplığını kullanmaktır. Bu aracın yardımıyla oluşturulan sürgü, kullanımı kolay, kullanımı kolay ve çok etkileyici görünüyor. Ardından, bir web sayfasının bu öğelerini kendiniz nasıl yapacağınıza bakacağız. Çok sayıda standartlaştırılmış takım sayesinde, çeşitli tiplerdeki ve farklı içeriklerdeki jQuery sürgülerini uygulamak mümkündür.

görüntü kaymak

Bir web sayfasına kaydırıcı nasıl eklenir?

Sayfaya kaydırıcı eklemenin yollarısite birkaç. Çoğunlukla, HTML kodu yazmanıza ve senaryoya girmenize bile gerek yoktur. Kullanıcılara zaten hazır şablonlar sunan ve sitenize jQuery kaydırıcılarının eklenmesine olanak tanıyan birçok ücretsiz kütüphane var. Sizin için gerekli olan şey, web sayfanızın kaynak koduna kopyalamak ve sonucun tadını çıkarmaktır. Ancak, bu durumda, yaratıcı fantezilerinizi gerçekleştirme olanakları sınırlıdır. Bu nedenle, bu tasarım öğesini kendiniz oluşturabilmek gereksiz olacaktır. Bunu yapmak için, basit bir jQuery kaydırıcısını nasıl uygulayacağınızı bilmeniz gerekir ve kod için ek öğeler ekleyerek bunu her zaman daha da zorlaştırabilirsiniz.

Bir kaydırıcıyı kendiniz oluşturun: HTML'deki kod

Başlamak için ilk şey gelecekteki kaydırıcının düzenini yazmaktır.

  1. Tüm slaytlarımızı (resimler, vb.) Içerecek olan HTML dosyasında bir Slayt Gösterisi bloğu oluşturun.
  2. İçinde, her bir öğesi ayrı bir kaydıratacak olan bir ul listesi koyduk.

jquery kaydırıcılar

CSS'de çalışmak

Sonra gerekli özellikleri uygularızBir CSS belgesi kullanarak. Oluşturduğumuz JQuery içerik kaydırıcısının doğru çalışması ve gerekli formata sahip olması gerekir. Bu aşamada, aşağıdaki görevleri yerine getiriyoruz:

  • Slayt Gösterisi bloğunda (şu anda gereken resim veya içerik) sadece bir slaytın görüntülendiğinden ve geri kalanı gizlendiğinden emin olmak için;
  • slaytları birbiri ardına düzenler (soldan sağa);
  • slaytların saklandığı ul-kabını, hareketli (sol ve sağ) yapın.

Bunu yapmak için, CSS dosyasında aşağıdaki parametreleri ayarladık:

  • Slayt gösterisi için: overflow-x - kaydırma, taşma-y - gizli:
  • ul için: float - sol.

slayt bloğu

Ayrıca genişliği, yüksekliği, arka planı ve benzerlerini de ayarlayabilirsiniz.

içerik jQuery kaydırıcı

JQuery'de kod yazıyoruz

HTML ve CSS'de, gerekli tüm değişiklikler yapıldı. Aşağıdaki parametrelere sahip olması gereken kaydırıcıların JQuery kodunun arkasında çalışmaya devam eder:

  • slaytlar, belirli bir zaman aralığı ile birbirleriyle değiştirilmelidir;
  • Fare imlecinizi tuttuğunuzda, hareketleri durmalıdır.

Bunun için iki değişken açıklıyoruz: slayt genişliği (slaydın uzunluğuna eşit) ve kayma süresi (slayt değişiminin süresini belirtir). Zamanlayıcı, sitenin sayfası tamamen yüklendiğinde başlatılacaktır. Bu parametreye, fare imlecini kaydırarak hareket ettirmeyi (slayt değişimini durduran) bağlarız.

Kapsayıcının ul uzunluğunu belirttiğinizden emin olun. Her slaydın uzunluğu ile çarpılan slaytların sayısına eşit olacaktır.

Slaytları değiştirmek için sorumlu olan fonksiyonu ekliyoruz. Hepsi bu, kaydırıcınızın işlerini kontrol edebilirsiniz.

basit jQuery kaydırıcı

Sonuç

Bu yazıda nasıl inceledikSitenizin sayfasına eklemek için bağımsız olarak jQuery kaydırıcıları oluşturun. Basit bir kaydırıcı uygulamasının bir örneğini kullanarak, kendi kaynak kodundaki uygun değişiklikleri yaparak kendi yorumlamanızı oluşturabilirsiniz. Bu, tasarımı geliştirecek ve sitenizin kullanımını ziyaretçiler için daha uygun hale getirecektir.

Devamını oku: