Как в моём плагине включить/отключить функцию?

263
06 июня 2019, 05:30

Подскажите плиз. В плагине есть функция: при наведении мыши на слайд, слайдер останавливается. Как сделать что бы эту функцию можно было отключить/включить при вызове плагина ? Пробовал через переменную задавать, но что-то не выходит.

(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>

Answer 1

При вызове плагина передаем еще один параметр 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();
  }       
});
READ ALSO
Поворот изображения за курсором js

Поворот изображения за курсором js

Друзья - подскажите как реализовать такую анимацию

189
глобальная переменная procces is not defined

глобальная переменная procces is not defined

В бэк-енд разработке я новичок и не могу понять почему мой вебпак не может запустить корневой серверный файл из за того что не обнаружена...

168
Как выполнить метод с аргументами из строки

Как выполнить метод с аргументами из строки

Имеется строка вида methodName(arg1,arg2)Каким образом можно распарсить строку для получения имя метода/функции с аргументами и выполнить полученный...

161