Ребят нужно помощь по Owl slider

198

04 марта 2019, 08:40

Как на всех мобильниках отключить свойство autoplay, пробовал через .trigger отключать при проверке на разрешение <768px, но всё равно не хочет работать почему то (.owl-car-first и .owl-car-second) это слайдеры-owl.

	  var owlfirst = $(".owl-car-first"); 
	  var owlsec = $(".owl-car-second"); 
     
    $(owlfirst).owlCarousel({ 
		    loop:true, 
		    margin:0, 
		    items: 1, 
 
		    nav:true, 
		    dots: false, 
		     
		    smartSpeed: 700, 
		    autoplay:true, 
    		autoplayTimeout:7000, 
    		autoplayHoverPause:true, 
		    navText: ["<img src='img/prev_arrow.png'>", "<img src='img/next_arrow.png'>"] 
	});

    var owlfirst = $(".owl-car-first");
    var owlsec = $(".owl-car-second");
        if($(window).width() <= 768) {
            console.log("stop");
            $(owlsec).trigger('stop.owl.autoplay');
            $(owlfirst).trigger('stop.owl.autoplay');
        }
        else{
          console.log("play");
          $(owlsec).trigger('play.owl.autoplay');
          $(owlfirst).trigger('play.owl.autoplay');
        }
});

Answer 1

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

$('.owl-carousel').owlCarousel({ 
    loop:true, 
    margin:10, 
    nav:true, 
	autoplay: true, 
	smartSpeed: 800, 
	navText: [$('.am-prev'), $('.am-next')], 
	autoWidth: false, 
    responsive:{ 
        0:{ 
            items:1 
        }, 
        600:{ 
            items:1 
        }, 
		1000:{ 
			items: 1 
		} 
    } 
}) 
$(document).ready(function(){ 
	var owlfirst = $(".owl-carousel"); 
	    if($(window).width() <= 768) { 
			console.log("stop"); 
			$(owlfirst).trigger('stop.owl.autoplay'); 
	    } 
 
		else{ 
		  console.log("play"); 
		  $(owlfirst).trigger('play.owl.autoplay'); 
		} 
});

.owl-carousel{ 
	position: relative; 
} 
.owl-carousel .item{ 
	position: relative; 
	width: 100%; 
	height: 100vh; 
	background-image: url(https://picsum.photos/200); 
	-webkit-background-size: cover; 
	background-size: cover; 
	background-position: center center; 
	 
} 
 
.owl-carousel .am-next{ 
	position: absolute; 
	background-color: rgba(124, 58, 22, 0.6); 
	border: none; 
	cursor: pointer; 
	padding-right: 5px; 
	top: 0; 
	right: 0; 
	width: 50px; 
	height: 100vh; 
}

<!DOCTYPE html> 
	<html lang="en"> 
	<head> 
		<meta charset="UTF-8"> 
		<title>Document</title> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css"> 
	</head> 
	<body> 
    <div class="owl-carousel owl-theme"> 
      <div class="item"></div> 
      <div class="item"></div> 
      <div class="item"></div> 
    </div> 
<button class="am-next"><img src="icons/slider-arrow.svg" alt="next"></button> 
     
     
     
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script> 
	</body> 
	</html>