Ali @mintik
18 Temmuz 2020 12:22

Glide.js

GlideJs

Web sitenizin manşet bölümüne slider galeri eklemeniz  için gereken bütün özelliklere  sahip Glide.js J?drzej Cha?ubek  tarafından geliştirilmiş tarayıcıya  duyarlı ve ayrıca mobil cihazlar tarafından da desteklenen kullanışlı bir slider uygulamasıdır. Klave sağ-sol yön tuşları, resimlerin üzerindeki sağ-sol ok işaretleri ve dokunarak resimler arası slayt geçiş işlemini gerçekleştirebilirsiniz. Otomatik özelliği  sayesinde kendiliğinden değişen galeri örnekleride oluşturabilirsiniz.

 Kullanım

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

Js ve css adresleri :

<link rel="stylesheet" type="text/css" href="css/style.css"> 
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
 <!-- Slider Plugin -->
 <script type="text/javascript" src="jquery.glide.js"></script>

JavaScript :

<script type="text/javascript">
 var glide = $('.slider').glide().data('api_glide');
 $(window).on('keyup', function (key) {
 if (key.keyCode === 13) {
 glide.jump(3, console.log('Wooo!'));
 };
 });
 $('.slider-arrow').on('click', function() {
 console.log(glide.current());
 });
 </script>

 

  • Body etiketleri arasına eklemeniz gereken bölüm.

Html :

<div class="slider">
 <ul class="slides">
 <li class="slide"><div class="box" style="background-color: #1abc9c;"></div></li>
 <li class="slide"><div class="box" style="background-color: #16a085;"></div></li>
 <li class="slide"><div class="box" style="background-color: #f1c40f;"></div></li>
 <li class="slide"><div class="box" style="background-color: #f39c12;"></div></li>
 <li class="slide"><div class="box" style="background-color: #d35400;"></div></li>
 <li class="slide"><div class="box" style="background-color: #c0392b;"></div></li> 
 </ul>
 </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