Ali @mintik
16 Eylül 2020 12:22

LiquidSlider

responsive-content-slider
Bildiğiniz üzere resimler için kaydırma örnekleri  olduğu gibi  content yani Türkçe’si içerik demek olan sitedeki video, yazı, sayfa gibi bölümler  için de  kaydırma  eklentileri mevcut. jQuery LiquidSlider de web sayfasındaki içerikleri kaydırmaya  yarayan bir örnektir. LiquidSlider ile responsive (taryıcıya duyarlı- esnek) slayt web sayfalar tasarlayabilirsiniz. Kategori yada yazılarınız arasında tab benzeri butonlar, rakam yada ok ikonları kullanarak ziyaretçilerinize sitenizde gezinmeyi daha kolay ve eğlenceli bir hale getirebilirsiniz. TouchSswipe.js ile birlikte hazırlandığı için dokunmatik cihazlar üzerinde de sorunsuz bir şekilde çalışmaktadır. Aynı anda hem mobil hemde masa üstü cihazlarda tek bir content slider görevi görüyor.


Kullanım

  • Head etiketleri arasına eklemeniz gereken bölümler.

Js ve Css dosya adresleri : 

  <link rel="stylesheet" href="./css/liquid-slider.css">
  <link rel="stylesheet" href="./examples/assets/styles.css">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script src="./js/jquery.touchSwipe.min.js"></script>
  <script src="./js/jquery.liquid-slider.js"></script>

 JavaScript : 

  <script>
    $('#main-slider').liquidSlider();
  </script>
  •  Body etiketleri arasına eklemeniz gereken bölüm.

Html : 

  <div class="liquid-slider"  id="main-slider">
    <div>
      <h2 class="title">Slide 1</h2>
      <p>Lorem ipsum</p>
    </div>
    <div>
      <h2 class="title">Slide 2</h2>
      <p>Proin nec</p>
    </div>          
    <div>
      <h2 class="title">Slide 3</h2>
      <p>Pellentesque habitant</p>
    </div>
    <div>
      <h2 class="title">Slide 4</h2>
      <p>Proin nec turpis</p>
    </div>
  </div>

 

Bu Yazıyı Paylaş

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

ÜYE GİRİŞİ

Arkadaş ekleme, özel mesaj, kişisel yazı paylaşmak için siteye giriş yapın

Şifremi unuttum? Kayıt Ol!
  • Ali:

    Pardon Yuyyu olacaktı...

  • Ali:

    Tamam yuyu da olsun :)...

  • Arkadaşlık Uygulaması:

    Yuyyu Online Arkadaşlık Sitesi – Sohbet Et ve Yeni İnsanlarla Tanış Yuy...

  • Ali:

    Üşenmeden web arşivi linkini arayıp bulmuşsun teşekkürler :)...

  • ibrahim:

    türkiyeden de bırakan olmuş oyunu. dünya geneli de bırakan epey olmuş. wi...

  • Araç çubuğuna atla