Подскажите плиз. В плагине есть функция: при наведении мыши на слайд, слайдер останавливается. Как сделать что бы эту функцию можно было отключить/включить при вызове плагина ? Пробовал через переменную задавать, но что-то не выходит.
(function($){
var settings = {
sliderInterval: 2000,
animateTime: 1000,
course: 1,
nextBtn: '.nextBtn',
prevBtn: '.prevBtn',
}; //объект с настройками
$.fn.simpleSlider = function(options) {
settings = $.extend(settings, options) // сливаем настройки которые передал пользователь со своим объектом
return this.each(function(){
resized=false;
var thisEl =$(this);
slider = thisEl.children('div','ul','img'),
slideWidth = thisEl.width(),
slider_item = slider.children(),
slideCount = slider_item.length,
next = settings.nextBtn,
prev = settings.prevBtn,
sliderInterval = settings.sliderInterval, // Интервал смены слайдов
animateTime = settings.animateTime, // Время смены слайдов
course = settings.course, // Направление движения слайдера (1 или -1)
margin = - slideWidth; // Первоначальное смещение слайдов
slider_item.css('width',slideWidth);
slider_item.last().clone().prependTo(slider); // Копия последнего слайда помещается в начало.
slider_item.eq(0).clone().appendTo(slider); // Копия первого слайда помещается в конец.
slider.css('margin-left', -slideWidth); // Контейнер .slider сдвигается влево на ширину одного слайда.
slider_item = slider.children();
function nextSlide(){ // Запускается функция animation(), выполняющая смену слайдов.
interval = window.setInterval(animate, sliderInterval);
}
$(window).resize(function() {
slideWidth = thisEl.width();
resized=true;
}).resize()
function animate(){
if (resized) {
//если поменялись размеры окна слайдера, то пересчитываем отступ слайдеров и меняем их ширину.
var widthslider=slider_item.width(); //старая ширина слайдеов
var numslider=parseInt(-margin/widthslider); //номер текущего слайдера
slider_item.css('width',slideWidth); //меняем ширину слайдеров
margin = -slideWidth * numslider; //считаем смещение слайдеров слева
slider.css('margin-left', margin); //меняем смещение слайдов слева
resized=false;
}
if (margin==-slideCount*slideWidth-slideWidth){ // Если слайдер дошел до конца
slider.css({'marginLeft':-slideWidth}); // то блок .slider возвращается в начальное положение
margin=-slideWidth*2;
}else if(margin==0 && course==-1){ // Если слайдер находится в начале и нажата кнопка "назад"
slider.css({'marginLeft':-slideWidth*slideCount});// то блок .slider перемещается в конечное положение
margin=-slideWidth*slideCount+slideWidth;
}else{ // Если условия выше не сработали,
margin = margin - slideWidth*(course); // значение margin устанавливается для показа следующего слайда
}
slider.animate({'marginLeft':margin},animateTime); // Блок .slider смещается влево на 1 слайд.
}
function sliderStop(){
window.clearInterval(interval); // Функция преостанавливающая работу слайдера
}
$(settings.prevBtn).click(function() { // Нажата кнопка "назад"
if (slider.is(':animated')) { return false; } // Если не происходит анимация
var course2 = course; // Временная переменная для хранения значения course
course = -1; // Устанавливается направление слайдера справа налево
animate(); // Вызов функции animate()
course = course2 ; // Переменная course принимает первоначальное значение
});
$(settings.nextBtn).click(function() { // Нажата кнопка "назад"
if (slider.is(':animated')) { return false; } // Если не происходит анимация
var course2 = course; // Временная переменная для хранения значения course
course = 1; // Устанавливается направление слайдера справа налево
animate(); // Вызов функции animate()
course = course2 ; // Переменная course принимает первоначальное значение
});
slider.add(next).add(prev).hover(function() { // Если курсор мыши в пределах слайдера
sliderStop(); // Вызывается функция sliderStop() для приостановки работы слайдера
}, nextSlide); // Когда курсор уходит со слайдера, анимация возобновляется.
nextSlide(); // Вызов функции nextSlide()
})
};
})(jQuery)
$( document ).ready(function() {
$('.slider_wrapper').simpleSlider({
sliderInterval: 2000,
animateTime: 1000,
});
});
.slider_wrapper{
max-width:1000px;
overflow:hidden;
position: relative;
}
.slider_content{
position:relative;
width: 10000px;
}
.item {
float: left;
}
.item img{
width: 100%;
height: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slider_wrapper">
<div class="slider_content">
<div class="item">
<img src="https://bipbap.ru/wp-content/uploads/2017/04/maxresdefault-2-6.jpg" alt="" />
</div>
<div class="item">
<img src="https://cdni.rt.com/russian/images/2017.04/article/58fe599bc3618843468b47c1.jpg" alt="" />
</div>
<div class="item">
<img src="https://cdn2.img.sputnik-georgia.com/images/23488/54/234885475.jpg" alt="" />
</div>
<div class="item">
<img src="https://i2.rozetka.ua/goods/4684342/41683632_images_4684342448.jpg" alt="" />
</div>
<div class="item">
<img src="https://thewire.in/wp-content/uploads/2017/11/space-1728314_1920.jpg" alt="" />
</div>
</div>
</div>
При вызове плагина передаем еще один параметр stopSlider, который отвечает за остановку слайдера
$('.slider_wrapper').simpleSlider({
stopSlider: true,
sliderInterval: 2000,
animateTime: 1000,
});
Затем в объект settings заводим дефолтное значение остановки слайдера
var settings = {
stopSlider: false;
sliderInterval: 2000,
animateTime: 1000,
course: 1,
nextBtn: '.nextBtn',
prevBtn: '.prevBtn',
};
И следовательно в функции вызова пишем
slider.add(next).add(prev).hover(function() {
if (settings.stopSlider) {
sliderStop();
}
});
Современные инструменты для криптотрейдинга: как технологии помогают принимать решения
Апостиль в Лос-Анджелесе без лишних нервов и бумажной волокиты
Основные этапы разработки сайта для стоматологической клиники
Продвижение своими сайтами как стратегия роста и независимости