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="https://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>