Kendi sitesinde birçok kişi kaydırıcıları görmek istiyor - bunlar ekranda bir içerik öğesini görüntüleyen ve belirli bir süre sonra bu içeriği başka bir içerikle değiştiren bloklardır. Doğal olarak, her web geliştiricisi HTML, CSS ve JavaScript kullanarak bağımsız olarak bir kaydırıcı oluşturabilir, ancak bu her zaman mantıklı değildir. İnternette hayatınızı çok daha kolaylaştıran ve sitenizi çok daha çekici hale getiren birkaç hazır çözüm olmasına rağmen oldukça fazla zaman harcayacaksınız. Bu makale, Baykuş Atlıkarınca adı verilen bu çözümlerden birine odaklanacaktır. Bu kaydırıcıyı ayarlamak inanılmaz derecede basittir, bu nedenle yeni başlayanlar bile halledebilir. Şimdi bu kaydırıcının ne olduğunu ve diğer önemli detayları öğreneceksiniz. Owl Carousel'i kurmak adım adım bir işlemdir, bu nedenle bu materyali yalnızca sırayla incelemelisiniz.
Nedir ve neden bu kaydırıcıyı seçmelisiniz?
Owl Carousel, konfigürasyonu bu yazıda anlatılacak olan, sayfanıza güzel ve kullanışlı bir kaydırıcı ekleyen, sitedeki çalışmalarınızı büyük ölçüde kolaylaştıracak oldukça etkili bir eklentidir,çok zaman, çaba ve para tasarrufu. Web'de oldukça fazla kaydırıcı olduğu için bu eklentinin avantajları nelerdir? Gerçek şu ki, bu kaydırıcı size sayfanızı benzersiz ve benzersiz hale getirmenizi sağlayacak düzinelerce özelleştirme seçeneği sunuyor. Tüm tarayıcı sürümlerinde çalışacak ve WordPress ve diğer popüler CMS'ye kolayca bağlanabilecek duyarlı bir eklentidir. Genel olarak, bu kaydırıcının birçok avantajı vardır, bu nedenle kesinlikle lehine bir seçim yapmalısınız. Ancak, Owl Carousel'i kurmaya başlamadan önce, bu eklentinin hala yüklenmesi gerekiyor.
İndir
Owl Carousel 2'yi bilgisayarınıza indirmediyseniz kurmak mümkün değildir ve bu adım adım bir talimat olduğu için en baştan başlamalısınız. Yani program paket yöneticileri kullanılarak indirilebilir, ancak bunlar gelişmiş geliştirici araçlarıdır, bu yüzden burada size bu eklentiyi standart yoldan nasıl edineceğinizi anlatacağız. Eklentinin resmi web sitesine gitmeniz ve en son sürümünü indirmeniz gerekiyor. Bundan sonra, indirilen tüm dosyalar, eklentinin kendisi ile aynı adlı uygun bir klasör hazırlanarak sitenizin dizinine aktarılmalıdır. Bu eklentinin jQuery ile birlikte geldiğini unutmayın, bu yüzden o kitaplığı da hazır bulundurmanız gerekir. Bu eklentiyi indirdikten sonra, bir sonraki adım olan Owl Carousel kaydırıcısını ayarlamakla ilgilenmeniz gerekecek 2.
CSS
BOwl Carousel 1.3 ayarları, yeni sürüm 2'dekiyle hemen hemen aynı kalır, yalnızca yeni özellikler eklenir. Ancak, temel bilgiler, belgenize CSS ekleyerek başlayarak aynı olacaktır. Yani ilk adım satırı eklemektir. Sana ne veriyor? Bu, kaydırıcıyı görüntülemek için siteye gerekli stilleri yükleyen bir dizedir. Görsel işlemeyi kendiniz yaparak bitirebileceğiniz yer burasıdır. Ancak, daha uygun ve daha hızlı bir çözüm var. Ayrıca, kaydırıcının varsayılan temasını yükleyerek anında kullanıma hazır hale getiren bir satır da ekleyebilirsiniz. Kaydırıcınızı daha benzersiz, farklı ve içeriğinize daha uygun hale getirmek için bazı stilleri düzenleyebilirsiniz. Doğal olarak, Rusça'daki Baykuş Atlıkarınca ayarları çok uygun olacaktır, ancak web sitesi oluşturan herkes, İngilizce bilgisi olmadan yapamayacağını anlamalıdır.
JavaSpript bağlantısı
Tabii ki kaydırıcı JS olmadan çalışmayacaktır, bu yüzden gerekli kodu içeren uygun dosyayı da eklemeye özen göstermelisiniz. Bunu yapmak için belgelerden bir kod satırı eklemeniz gerekir, ancak bir koşulun karşılanması gerekir. Herkes JS'nin tüm komutları sırayla yürüten bir programlama dili olduğunu bilir, bu durumda bu kod satırını jQuery kitaplığını belgenize ekleyen satırdan sonra eklemelisiniz. Bu kaydırıcı durumunda JS ile daha fazla, yapacak bir şeyiniz yokihtiyaç.
HTML kodlama
Pekala, kaydırıcıyı bağladınız, şimdi onu tasarlama ve özelleştirme zamanı. Her şeyden önce, kaydırıcının sayfanızda görünmesi için HTML kodunu yazmanız gerekir. Bunu yapmak için, slaytları içerecek bir kap oluşturmanız gerekir. Bu, owl-carousel sınıfına atanması gereken div etiketi kullanılarak yapılabilir. Kaydırıcı ile ilgili tüm stillerin etkinleştirilmesini sağlayan bu sınıftır. Ayrıca başka bir sınıf yazabilirsiniz - baykuş teması. Varsayılan tasarımı kullanmaya karar verirseniz veya daha fazla çalışma için kaydırıcının standart sürümünü temel alırsanız kullanışlı olacaktır.
Ardından, her slaydı bir div etiketiyle ayrı bir kapsayıcıya eklemeniz gerekir. Elbette diğer etiketleri de kullanabilirsiniz, ancak bu etiket kaydırıcılar için en iyisidir.
Çağrı eklentisi
Ve sitenizde hazır bir kaydırıcı olması için yapmanız gereken son şey şu kod bloğunu kullanmaktır:
$(belge).ready(function(){
$(".owl-carousel").owlCarousel();
});
Sayfanız yüklendiğinde kaydırıcının çalışmaya başlamasını, yani içeriği kaydırmasını sağlar. Aynı kod ile Owl Carousel'ı WordPress'e bağlayabilirsiniz. Bu eklentinin ayarları çok sayıda ve çeşitlidir ve şimdi en önemli noktaları öğreneceksiniz.
Kaydırıcının görünümünü ve işlevselliğini ayarlama
Peki kaydırıcınızı özelleştirmek için hangi komutları kullanabilirsiniz? Her şeyden önce, öğeler komutunu hatırlamanız gerekir, çünkü bununla kaydırıcınızda belirli sayıda slayt ayarlayabilirsiniz. Döngü komutu, kaydırıcıyı döngüye sokmayı veya son öğede kaydırmayı durdurmayı seçmenize olanak tanır. Fare ve dokunma gibi çeşitli seçenekleri olan Sürükle komutu da vardır. İlk durumda, kaydırıcınızın öğelerinin fare basılı tutularak ve ikinci durumda bir dokunuş yardımıyla kaydırılabilmesini sağlayabilirsiniz (bu komut mobil cihazlar için uygundur). Diğer bir önemli komut ise gezinme oklarının görüntülenmesini sağlayan nav komutudur. Bununla birlikte, gezinme düğmelerine etiket eklemek için navText komutunu kullanabilirsiniz. Ayrıca, sayfa yüklendiğinde kaydırıcınızın slaytlarını döndürmenin otomatik olarak başlatılmasını etkinleştirmenizi ve devre dışı bırakmanızı sağlayan otomatik oynat komutunu da unutmamalısınız. Bu komutla, milisaniye cinsinden belirli bir değer ayarlayabileceğiniz ve slaytların her birinin otomatik olarak çevrilmesi arasındaki süreyi belirleyecek olan autoplayTimeout'u da kullanabilirsiniz.
Duyarlı web tasarımı kullanıyorsanız, yani sayfanızın tasarımı hangi cihazda görüntülendiğine bağlı olarak otomatik olarak değişir, o zaman slayt sayısını belirlemenizi sağlayan responsive komutunu kesinlikle hatırlamanız gerekir. sayfanın görüntülendiği ekranın genişliğine bağlı olarak görüntülemek için.
