İçindekiler
ile geliştirilmiş bir kaydırıcı oluşturacağız.
jquery Y
Nivo Kaydırıcı, bir eklentiye ihtiyaç duymadan ve web sitemize adapte edebildiğimiz.
Bunu yapmak için kullanacağız
jquery çerçevesi, ki bir
Javascript dili ile çalışmayı kolaylaştırmak için kütüphane. Kütüphaneyi şuradan indiriyoruz:
jquery.com, çekerek de kullanabilmeniz mümkündür.
googleapis.com bu kodu eklemek için html sayfanızda bu kodu kullanın.
Jquery sayfasından indirdiyseniz ve web sitenizdeki bir dizine yüklediyseniz, aşağıdaki örnekte olduğu gibi alan adınıza işaret edecek şekilde yerleştirmelisiniz:
Şimdi indirelim
Nivo kaydırıcı nedir
Kaydırıcıyı oluşturmamıza izin verecek jquery kütüphanesi. Buradan Nivo kaydırıcısını ücretsiz olarak indirebilirsiniz. Dosyayı dizinimizde açın, burada web'in yapısını görebiliriz.
Şimdi web sitemiz için bir index.html dosyası oluşturacağız, başlıkta kitaplıkları ve stil sayfalarını koyacağız. Jquery kitaplığını, nivo kaydırıcı kitaplığını ve Nivo kaydırıcının kendi stil sayfalarını görebilir, ardından bunları özelleştirebiliriz.
Şimdi resimlerimiz ve kaydırıcı için bir kap oluşturacağız, bunun için ve gösterebilmek için aynı index.html içinde oluşturuldu (Aynı zamanda bir CSS stil sayfası dosyasında da oluşturulabilir. her biri).
Web'in yapısı ve kaydırıcının kendisiyle başlıyoruz, görüntülenecek resimleri ve bir mesajı ekliyoruz.
Ardından nivo Silder eklentisini etkinleştiririz ve efekt türü, animasyon arasındaki süre, görüntü arasındaki duraklama ve Nivo Slider belgelerinde görülebilecek daha pek çok şey hakkında parametreler göndeririz.
id'nin aktif olduğunu gözlemleyelim
#silder görüntüleri tanımladığım yerin aynısı, bu yüzden birden fazla kaydırıcıya sahip olmak istersem aynı yapıyı kopyalamam ve karşılık gelen kimlik için etkinleştirmem gerekecek.
Bir tarayıcıda index.html testinin sonucu:
Burada ikinci slaydı görüyoruz, aşağıda 1 ve 2 numaralı slaytların sayısını ve varsayılan bağlantıları görüyoruz Önceki (önceki) Sonraki (sonraki) css kullanarak bunun görünümünü iyileştireceğiz.
Sadece nivo-silder.css dosyasına bakarak sayıları madde işaretlerine çevirebiliriz.
.nivo-controlNav {metin hizalama: sola; dolgu: 0; pozisyon: göreceli; z-endeksi: 10; } .nivo-controlNav to {görüntüleme: satır içi blok; genişlik: 10 piksel; yükseklik: 10 piksel; arka plan: url (bullets.png.webp) tekrarsız; metin girintisi: -9999 piksel; sınır: 0; kenar boşluğu: 0 2 piksel; } .nivo-controlNav a.active {arka plan konumu: 0 %100; } .nivo-directionNav to {görüntüleme: blok; genişlik: 30 piksel; yükseklik: 30 piksel; arka plan: url (arrows.png.webp) tekrarsız; metin girintisi: -9999 piksel; sınır: 0; üst: otomatik; alt: -36 piksel; z-endeksi: 11; } .nivo-directionNav a: vurgulu {arka plan rengi: #eee; -webkit-border-radius: 2px; -moz-border-radius: 2px; sınır yarıçapı: 2 piksel; } a.nivo-nextNav {arka plan konumu: %160 %50; sağ: 0 piksel; } a.nivo-prevNav {arka plan konumu: -%60 %50; sol: otomatik; sağ: 35 piksel; } Bu değişikliğin sonucu, solda madde işaretleri olarak sayılar ve sağda oklar olarak bağlantılar olacaktır.
Slaytlardan birinde bir veri bloğu göstererek işlevselliği genişleteceğiz.
Zaten sahip olduğumuz kodu değiştirerek, id #block2 ile çağıracağım bir blok için slayt 2'deki paragrafı değiştiriyoruz, ardından bloğu oluşturuyorum ve sadece slayt 2 etkinleştirildiğinde görünecek şekilde gizli bir stil uyguluyorum.
Sonuç aşağıdaki gibidir:
Küçük resimler de koyabilirsiniz. Diğer bir seçenek de içeriği bir mysql ve php'den dinamik olarak oluşturmak veya bunu joomla veya wordpress gibi bir CMS şablonunda kullanmaktır. Zaten programlanmış birçok eklenti ile birlikte gelir, ancak birkaç satır kod ile kendi bileşenimizi oluşturabiliriz. Umarım işinize yaramıştır.Bu Eğitimi beğendiniz ve yardım ettiniz mi?Yazara olumlu puan vermek için bu düğmeye basarak yazarı ödüllendirebilirsiniz.
