Plugin Jquery Slider Pure - Code Jquery thuần
;(function($, window, undefined) {
'use strict';
var pluginName = 'slider-1';
function Plugin(element, options) {
this.element = $(element);
this.options = $.extend({}, $.fn[pluginName].defaults, this.element.data(), options);
this.init();
}
Plugin.prototype = {
init: function() {
var imgItems = $('.slider li').length; // Slider Number
var imgPos = 1;
//dots
for(var i = 1; i <= imgItems;i++){
$('.dots').append('<li><span class="fa fa-circle"></span></li>');
}
//----------------------
$('.slider li').hide();
$('.slider li:first').show();
$('.dots li:first').css({'color': '#CD6E2E'});
//------------------------
$('.dots li').click(dots);
$('.chevronRg').click(nextSlider);
$('.chevronLt').click(prevSlider);
setInterval(function(){
nextSlider();
}, 4000);
$('.slider').bind('touchmove',function(e){
e.preventDefault();
var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
var el = $(this).offset();
var x = touch.pageX - el.left;
var y = touch.pageY - el.top;
if(x < $(this).width() && x > 0){
if(y < $(this).height() && y > 0){
//-------------------
nextSlider();
console.log(touch.pageY+' '+touch.pageX);
}
}
});
//----------------------
function dots(){
var dotsPos = $(this).index() + 1;
$('.slider li').hide();
$('.slider li:nth-child('+ dotsPos +')').fadeIn();
$('.dots li').css({'color': '#858585'});
$(this).css({'color': '#CD6E2E'});
imgPos = dotsPos;
}
function nextSlider(){
if( imgPos >= imgItems){imgPos = 1;}
else{imgPos++;}
$('.dots li').css({'color': '#858585'});
$('.dots li:nth-child('+ imgPos +')').css({'color': '#CD6E2E'});
$('.slider li').hide();
$('.slider li:nth-child('+ imgPos +')').fadeIn();
}
function prevSlider(){
if( imgPos <= 1){imgPos = imgItems;}
else{imgPos--;}
$('.dots li').css({'color': '#858585'});
$('.dots li:nth-child('+ imgPos +')').css({'color': '#CD6E2E'});
$('.slider li').hide();
$('.slider li:nth-child('+ imgPos +')').fadeIn();
}
},
destroy: function() {
$.removeData(this.element[0], pluginName);
}
};
$.fn[pluginName] = function(options, params) {
return this.each(function() {
var instance = $.data(this, pluginName);
if (!instance) {
$.data(this, pluginName, new Plugin(this, options));
} else if (instance[options]) {
instance[options](params);
}
});
};
$.fn[pluginName].defaults = {
autoplay: true,
dots: true,
speed: 500,
arrows: true,
swipeToSlide: true,
slidesToShow: 1,
slidesToScroll: 1,
};
$(function() {
$('[data-' + pluginName + ']')[pluginName]();
});
}(jQuery, window));
Bản Quyền || Cấm sao chép nội dung dưới mọi hình thức. Nếu muốn sao chép hãy để 5 phút đọc xong các chính sách của chúng tôi tại đây.
Tác giả: Minh Trung
