Glide.js

Glide.js

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>

 

Ali
Telif Hakkı Bildirimi:Bu sitedeki orijinal makaleyi Ali2020-07-18 tarihinde yayınlandı,Toplam 1568 karakterden oluşmaktadır.
Yeniden yazdırma ipuçları:Özel talimatlar dışında, bu sitedeki tüm makaleler CC-4.0 sözleşmesi kapsamında yayınlanmaktadır.Yeniden basılması için lütfen kaynak belirtiniz.
Yorum yap(Yorum yapılmamış)
Yükleniyor...