329 lines
16 KiB
JavaScript
329 lines
16 KiB
JavaScript
/*
|
||
EasySlides - слидер
|
||
Autor 2017 Shabanov Ivan (Шабанов Иван)
|
||
Usage:
|
||
|
||
$('.slider').EasySlides({
|
||
'autoplay': true,
|
||
'timeout': 3000,
|
||
'show': 5, //Сколь-ко позывать слайдов (по умолчанию 5: 1-активный, 2-предыдущих и 2-следующих)
|
||
'vertical': false, //Если True то слайдер вертикальный, слайды листаются движением вверх/вниз
|
||
'reverse': false, //Перевернутый слайдер
|
||
'touchevents': true, //Вкючено ли события на прикосновения к сладеру (листания и т.п)
|
||
'delayaftershow': 300, //Задержка после смены слайдера, в это время слайдер нельзя листать
|
||
'stepbystep': true, //При клике на далекий слайд перейти к нему последовательно, а не сразу
|
||
'startslide': 0, //Стартовый слайд
|
||
'beforeshow': function () {},
|
||
'aftershow': function () {},
|
||
});
|
||
|
||
*/
|
||
(function ($) {
|
||
|
||
$.fn.EasySlides = function (options) {
|
||
var settings = $.extend({
|
||
'autoplay': false,
|
||
'timeout': 3000,
|
||
'show': 5,
|
||
'vertical': false,
|
||
'reverse': false,
|
||
'touchevents': true,
|
||
'delayaftershow': 300,
|
||
'stepbystep': true,
|
||
'loop': true,
|
||
'startslide': 0,
|
||
'distancetochange': 10,
|
||
'beforeshow': function () {},
|
||
'aftershow': function () {},
|
||
|
||
}, options);
|
||
return this.each(function () {
|
||
var this_slider = this;
|
||
var EasySlidesTimer;
|
||
var EasySlidesCanChange = true;
|
||
|
||
var count = $(this_slider).children('*:not(.next_button, .prev_button, .nav_indicators)').length;
|
||
var cur_slide = 0;
|
||
var mousedowned = false;
|
||
var need_slide = 0;
|
||
var slides;
|
||
if (count > 0) {
|
||
|
||
while (count < settings['show']) {
|
||
var html = $(this_slider).html();
|
||
$(html).appendTo(this_slider);
|
||
$(this_slider).children('.next_button:eq(0), .prev_button:eq(0), .nav_indicators:eq(0)').remove();
|
||
slides = $(this_slider).children('*:not(.next_button, .prev_button, .nav_indicators)');
|
||
|
||
count = $(slides).length;
|
||
}
|
||
slides = $(this_slider).children('*:not(.next_button, .prev_button, .nav_indicators)');
|
||
|
||
if ($(this_slider).children('.nav_indicators').length > 0) {
|
||
var nav_indicators = '<ul>';
|
||
while (need_slide < count) {
|
||
need_slide++;
|
||
nav_indicators = nav_indicators + '<li>' + need_slide + '</li>';
|
||
}
|
||
nav_indicators = nav_indicators + '</ul>';
|
||
$(this_slider).children('.nav_indicators').html(nav_indicators);
|
||
need_slide = 0
|
||
}
|
||
var EasySlidesLoopToNeeded = function () {
|
||
var next;
|
||
var left = need_slide - cur_slide;
|
||
var right = cur_slide - need_slide
|
||
if (settings['loop'] == true) {
|
||
if (left < 0) {
|
||
left = left + count;
|
||
}
|
||
if (right < 0) {
|
||
right = right + count;
|
||
}
|
||
}
|
||
if (cur_slide != need_slide) {
|
||
if (settings['loop'] == true) {
|
||
if ((left) < (right)) {
|
||
next = cur_slide + 1;
|
||
} else {
|
||
next = cur_slide - 1;
|
||
}
|
||
} else {
|
||
if (left > 0) {
|
||
next = cur_slide + 1;
|
||
} else {
|
||
next = cur_slide - 1;
|
||
}
|
||
}
|
||
EasySlidesNext(next);
|
||
setTimeout(EasySlidesLoopToNeeded, settings['delayaftershow']);
|
||
}
|
||
}
|
||
var EasySlidesNext = function (nextslide) {
|
||
if (EasySlidesCanChange) {
|
||
EasySlidesCanChange = false;
|
||
setTimeout(function () {
|
||
EasySlidesCanChange = true;
|
||
}, settings['delayaftershow']);
|
||
clearTimeout(EasySlidesTimer);
|
||
if (typeof settings['beforeshow'] == 'function') {
|
||
settings['beforeshow']();
|
||
}
|
||
var i = 0;
|
||
if (count > 0) {
|
||
if (typeof nextslide == 'number') {
|
||
cur_slide = nextslide;
|
||
} else {
|
||
cur_slide++;
|
||
nextslide = cur_slide;
|
||
}
|
||
if (settings['loop'] == true) {
|
||
while (cur_slide < 0) {
|
||
cur_slide = cur_slide + count;
|
||
}
|
||
while (cur_slide >= count) {
|
||
cur_slide = cur_slide - count;
|
||
}
|
||
while (nextslide < 0) {
|
||
nextslide = nextslide + count;
|
||
}
|
||
while (nextslide >= count) {
|
||
nextslide = nextslide - count;
|
||
}
|
||
|
||
} else {
|
||
if (cur_slide < 0) {
|
||
cur_slide = 0;
|
||
}
|
||
if (cur_slide >= count) {
|
||
cur_slide = count - 1;
|
||
}
|
||
if (nextslide < 0) {
|
||
nextslide = 0;
|
||
}
|
||
if (nextslide >= count) {
|
||
nextslide = count - 1;
|
||
}
|
||
}
|
||
$(this_slider).children('.nav_indicators').find('ul').find('li').removeClass('active');
|
||
|
||
$(this_slider).find('.nav_indicators ul li:nth-child(' + (nextslide + 1) + ')').addClass('active');
|
||
i = 0;
|
||
/*
|
||
$(this_slider).children('*:not(.next_button, .prev_button, .nav_indicators)').each(function() {
|
||
*/
|
||
$(slides).each(function () {
|
||
|
||
|
||
var cssclass = '';
|
||
var icount = 0;
|
||
icount = i - nextslide;
|
||
while (icount < 0) {
|
||
icount = icount + count;
|
||
}
|
||
|
||
while (icount > count) {
|
||
icount = icount - count;
|
||
}
|
||
if (icount == 0) {
|
||
cssclass = 'active';
|
||
$(this_slider).find('.' + cssclass + ':not(.nav_indicators ul li)').removeClass(cssclass);
|
||
$(this).removeClass('hidden');
|
||
$(this).addClass(cssclass);
|
||
} else if (icount < settings['show'] / 2) {
|
||
cssclass = 'next' + icount;
|
||
$(this_slider).find('.' + cssclass).removeClass(cssclass);
|
||
$(this).removeClass('hidden');
|
||
$(this).addClass(cssclass);
|
||
} else if (icount > count - (settings['show'] / 2)) {
|
||
cssclass = 'prev' + (count - icount);
|
||
$(this_slider).find('.' + cssclass).removeClass(cssclass);
|
||
$(this).removeClass('hidden');
|
||
$(this).addClass(cssclass);
|
||
} else {
|
||
$(this).addClass('hidden');
|
||
}
|
||
|
||
if ((Math.abs(i - nextslide) > (settings['show'] / 2)) && (settings['loop'] == false)) {
|
||
var icnt = 1;
|
||
while (icnt < settings['show'] / 2) {
|
||
cssclass = 'next' + icnt;
|
||
if ($(this).hasClass(cssclass) ) {
|
||
$(this).removeClass(cssclass)
|
||
};
|
||
cssclass = 'prev' + icnt;
|
||
if ($(this).hasClass(cssclass) ) {
|
||
$(this).removeClass(cssclass)
|
||
};
|
||
icnt ++;
|
||
};
|
||
$(this).addClass('hidden');
|
||
}
|
||
i++;
|
||
});
|
||
if (settings['autoplay']) {
|
||
clearTimeout(EasySlidesTimer);
|
||
EasySlidesTimer = setTimeout(function () {
|
||
EasySlidesNext();
|
||
}, settings['timeout']);
|
||
}
|
||
}
|
||
if (typeof settings['aftershow'] == 'function') {
|
||
settings['aftershow']();
|
||
}
|
||
|
||
}
|
||
}
|
||
EasySlidesNext(settings['startslide']);
|
||
/*
|
||
$(this_slider).children(':not(.next_button, .prev_button, .nav_indicators)').click(function () {
|
||
*/
|
||
$(slides).click(function () {
|
||
need_slide = $(this_slider).children().index(this);
|
||
if (settings['stepbystep']) {
|
||
EasySlidesLoopToNeeded()
|
||
} else {
|
||
EasySlidesNext(need_slide);
|
||
}
|
||
});
|
||
$(this_slider).children('.nav_indicators').find('ul').find('li').click(function () {
|
||
need_slide = $(this_slider).find('.nav_indicators ul li').index(this);
|
||
if (settings['stepbystep']) {
|
||
EasySlidesLoopToNeeded()
|
||
} else {
|
||
EasySlidesNext(need_slide);
|
||
}
|
||
});
|
||
|
||
$(this_slider).find('.next_button').click(function () {
|
||
EasySlidesCanChange = true;
|
||
EasySlidesNext();
|
||
});
|
||
$(this_slider).find('.prev_button').click(function () {
|
||
EasySlidesCanChange = true;
|
||
cur_slide--;
|
||
EasySlidesNext(cur_slide);
|
||
});
|
||
if (settings['touchevents']) {
|
||
var EasySliderMoved = function (xcur, ycur) {
|
||
var offset = $(slides).find('.active').offset();
|
||
var left = 0;
|
||
var top = 0;
|
||
if (typeof offset !== 'undefined') {
|
||
left = offset.left;
|
||
top = offset.top;
|
||
}
|
||
|
||
var p0 = $(this_slider).data('posstart'),
|
||
p1 = {
|
||
x: xcur,
|
||
y: ycur,
|
||
l: left,
|
||
t: top,
|
||
},
|
||
d = 0;
|
||
if (typeof p0 === 'undefined') {
|
||
p0 = p1;
|
||
$(this_slider).data('posstart', p1);
|
||
}
|
||
|
||
if (settings['vertical']) {
|
||
d = p1.y - p0.y;
|
||
top = p0.t + d;
|
||
//$(this_slider).find('.active:not(.nav_indicators ul li)').offset({'top': top});
|
||
} else {
|
||
d = p1.x - p0.x;
|
||
left = p0.l + d;
|
||
//$(this_slider).find('.active:not(.nav_indicators ul li)').offset({'left': left});
|
||
}
|
||
if (settings['reverse']) {
|
||
d = -d;
|
||
}
|
||
if ((Math.abs(d) > settings['distancetochange']) && (EasySlidesCanChange)) {
|
||
$(this_slider).data('posstart', p1);
|
||
|
||
if (d > 0) {
|
||
cur_slide--;
|
||
} else {
|
||
cur_slide++;
|
||
}
|
||
EasySlidesNext(cur_slide);
|
||
}
|
||
}
|
||
/*События*/
|
||
$(this_slider).bind('mousemove', function (e) {
|
||
e.preventDefault();
|
||
if (e.buttons > 0) {
|
||
EasySliderMoved(e.pageX, e.pageY);
|
||
mousedowned = true;
|
||
} else {
|
||
if (mousedowned) {
|
||
EasySliderMoved(e.pageX, e.pageY);
|
||
$(this_slider).removeData('posstart');
|
||
mousedowned = false;
|
||
}
|
||
}
|
||
});
|
||
$(this_slider).bind('mouseup', function (e) {
|
||
e.preventDefault();
|
||
if (mousedowned) {
|
||
EasySliderMoved(e.pageX, e.pageY);
|
||
$(this_slider).removeData('posstart');
|
||
mousedowned = false;
|
||
}
|
||
})
|
||
|
||
$(this_slider).bind('touchmove', function (e) {
|
||
var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
|
||
EasySliderMoved(touch.pageX, touch.pageY);
|
||
});
|
||
$(this_slider).bind('touchend', function (e) {
|
||
$(this_slider).removeData('posstart');
|
||
});
|
||
|
||
}
|
||
}
|
||
});
|
||
}
|
||
})(jQuery);
|