Kendi sitelerinde birçok kişi görmek isterkaydırıcılar, ekranda bir içerik parçasını görüntüleyen ve belirli bir süre sonra bu içeriği diğeriyle 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 kolaylaştıran ve sitenizi çok daha çekici kılan bir kaç hazır çözüm varken oldukça fazla zaman harcayacaksınız. Bu makale Owl Carousel adlı böyle bir çözüme odaklanacak. Bu kaydırıcıyı ayarlamak inanılmaz derecede kolaydır, bu nedenle yeni başlayanlar bile başa çıkabilir. Şimdi bu kaydırıcının ne olduğunu ve diğer önemli ayrıntıları öğreneceksiniz. Owl Carousel kurulumu adım adım yapılır, bu nedenle bu materyali yalnızca sırayla incelemelisiniz.
Nedir ve neden bu özel kaydırıcıyı seçmelisiniz?
Ayarı olacak Baykuş AtlıkarıncaBu makalede ele alınan, sayfanıza güzel ve kullanışlı bir kaydırıcı ekleyen, sitedeki çalışmanızı büyük ölçüde kolaylaştıracak, size çok zaman, emek ve para tasarrufu sağlayacak çok etkili bir eklentidir. Bu eklentinin avantajları nelerdir, çünkü Web'de epeyce kaydırıcı var? Gerçek şu ki, bu kaydırıcı size sayfanızı benzersiz ve taklit edilemez hale getirmenize izin verecek birkaç düzine özelleştirme seçeneği sunuyor. Tüm tarayıcı sürümlerinde çalışacak duyarlı bir eklentidir ve WordPress ve diğer popüler CMS ile kolayca bağlanabilir. Genel olarak, bu kaydırıcının birçok avantajı vardır, bu yüzden kesinlikle tercih etmelisiniz. Ancak, Owl Carousel'i yapılandırmaya başlamadan önce bu eklentinin yine de indirilmesi gerekiyor.
indir
Owl Carousel 2 kurulumu, sizbilgisayarınıza indirdi ve bu adım adım talimat olduğu için en baştan başlamaya değer. Yani, program paket yöneticileri kullanılarak indirilebilir, ancak bunlar gelişmiş geliştirici araçlarıdır, bu yüzden burada bu eklentinin standart bir şekilde nasıl elde edileceği açıklanacaktır. Eklentinin resmi web sitesine gitmeniz ve en son sürümünü indirmeniz gerekir. Bundan sonra, indirilen tüm dosyaların, eklentinin kendisiyle aynı adı verilen uygun bir klasör hazırlayarak sitenizin dizinine aktarılması gerekir. Bu eklentinin jQuery ile ilgili olduğunu unutmayın, bu nedenle bu kitaplığı da hazır bulundurmanız gerekir. Pekala, bu eklentiyi indirdiğinizde, Owl Carousel 2 kaydırıcısını özelleştiren bir sonraki adımı atmanız gerekecek.
CSS
Baykuş Atlıkarınca 1.3 ayar, yeni ikinci versiyondakiyle hemen hemen aynı kalır, sadece yeni özellikler eklenir. Ancak, temel bilgiler belgenize CSS eklemeden başlayarak aynı olacaktır. Dolayısıyla ilk adım, satırı HTML koduna eklemektir. <link rel = "stylesheet" href = "owlcarousel / owl.carousel.min.css">... Sana ne veriyor Bu, kaydırıcıyı görüntülemek için gerekli stilleri siteye yükleyen çizgidir. Bu noktada, görsel işlemeyi kendiniz yaparak bitirebilirsiniz. Ancak daha rahat ve hızlı bir çözüm var. Ayrıca satırı da ekleyebilirsiniz <link rel = "stylesheet" href = "owlcarousel / owl.theme.default.min.css">varsayılan temayı da yükleyenkaydırıcı, anında kullanıma hazır hale getirir. Kaydırıcınızı daha benzersiz ve alışılmadık hale getirmenin yanı sıra içeriğiniz için daha uygun hale getirmek için bazı stilleri düzenleyebilirsiniz. Doğal olarak, Rusça'daki Baykuş Atlıkarınca ayarları çok uygun olurdu, ancak siteleri oluşturan her kişi, İngilizce bilgisi olmadan yapamayacağını anlamalı.
JavaSpript bağlantısı
Doğal olarak, kaydırıcı JS olmadan çalışmaz,bu nedenle, gerekli kodu içeren uygun dosyayı eklemeye de dikkat etmeniz gerekir. Bunun için bir kod satırı eklemeniz gerekir belgelerden, ancak bir koşul karşılanmalıdır. Herkes JS'nin tüm komutları sırayla çalıştıran bir programlama dili olduğunu bilir, bu nedenle bu durumda bu kod satırını, jQuery kitaplığını belgenize ekleyen satırdan sonra eklemelisiniz. Bu kaydırıcı durumunda JS ile başka bir şey yapmanıza gerek yoktur.
HTML biçimlendirme
Peki kaydırıcıyı bağladın, şimdi zamanıtasarlayın ve özelleştirin. Öncelikle kaydırıcının sayfanızda görünmesi için HTML kodu yazmanız gerekir. Bunu yapmak için, slaytları tutacak bir kap oluşturmanız gerekir. Bu, owl-carousel sınıfına atanması gereken div etiketi kullanılarak yapılabilir. Kaydırıcıya başvuran tüm stillerin etkinleştirilmesini sağlayan bu sınıftır. Ayrıca bir sınıf daha ekleyebilirsiniz - baykuş teması. Varsayılan tasarımı kullanmaya karar verirseniz veya daha fazla çalışma için temel olarak kaydırıcının standart sürümünü alırsanız, kullanışlı olacaktır.
Daha sonra, her slaydı bir div etiketi ile ayrı bir kapta eklemeniz gerekir. Doğal olarak, diğer etiketleri de kullanabilirsiniz, ancak bu etiket en çok kaydırıcılar için uygundur.
Eklenti çağrısı
Hazır bir kaydırıcının sitenizde görünmesi için yapmanız gereken son şey şu kod bloğunu kullanmaktır:
$ (belge) .ready (işlev () {
$ (". owl-carousel"). owlCarousel ();
});
Kaydırıcının başlamasını sağlarişlev, yani sayfanız yüklendiğinde içeriği kaydırın. Aynı kodla Owl Carousel'i WordPress'e bağlayabilirsiniz. Bu eklentinin ayarları çok ve çeşitlidir ve şimdi en önemli noktaları öğreneceksiniz.
Kaydırıcının görünümünü ve işlevselliğini özelleştirme
Peki hangi komutları kullanabilirsiniz,kaydırıcınızı özelleştirmek için? Her şeyden önce, kaydırıcınızda belirli sayıda slayt ayarlayabileceğiniz gibi, öğeler komutunu hatırlamanız gerekir. Döngü komutu, kaydırıcıyı döngüye almayı veya son öğede kaydırmayı durdurmayı seçmenize izin verir. Fare ve dokunma gibi çeşitli seçeneklere sahip bir 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şla çevrilebilmesi için bunu yapabilirsiniz (bu komut mobil cihazlar için uygundur). Diğer bir önemli komut, 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üklenirken kaydırıcı slaytlarınızı otomatik olarak döndürmeyi açıp kapatmanıza izin veren otomatik oynatma komutunu da unutmamalısınız. Bu komutla birlikte, milisaniye cinsinden belirli bir değer ayarlayabileceğiniz autoplayTimeout'u da kullanabilirsiniz; bu, slaytların her birinin otomatik olarak çevrilmesi arasındaki süreyi belirler.
Duyarlı web tasarımı kullanıyorsanız,Sayfanızın tasarımı hangi cihazda görüntülendiğine bağlı olarak otomatik olarak değişirse, sayfanın görüntülendiği ekranın genişliğine bağlı olarak görüntülenen slaytların sayısını ayarlamanıza izin veren duyarlı komutu kesinlikle hatırlamanız gerekir.
