Glide.js

By

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>

 



Leave a Comment

Your email address will not be published.

You may also like

Trend