Cacher is the code snippet organizer for pro developers

$("#owl-example").owlCarousel({
 items : 1,
	responsive : {
	 		0:{
			 	items : 1
		 	},
		 	768:{
			 	items : 2
		 	},
		 	960:{
			 	items : 2
		 	},
		 	
	  },
 margin:50,
 autoHeight : true,
 dots: false,
 autoplay : true,
 singleItem:true,
 nav:true,
 navText:[
		'<svg class="slider-control"><use xlink:href="#arrow-left"></use></svg>',
		'<svg class="slider-control"><use xlink:href="#arrow-right"></use></svg>'
 ]
 }
);
//Slider only mobile
function mobileSlider(resolution,sliderClass) {
    var checkWidth = $(window).width();
    var slider = $(sliderClass);
    if (checkWidth > resolution - 1) {
      slider.trigger('destroy.owl.carousel'); 
      slider.removeClass('owl-carousel');
    } else if (checkWidth < resolution) {
    	slider.addClass('owl-carousel')
      slider.owlCarousel({
        items : 1,
			 	autoHeight : true,
			 	autoplay : true,
			 	singleItem:true
      });
    }
  }
//
$(window).resize(function(){
		mobileSlider(768,'.nameslier');
	}
);
mobileSlider(768,'.nameslider');

//other trigeк to nav

  var owl = $('.section-slider');
	owl.owlCarousel();
	$('.prev').click(function() {
	    owl.trigger('next.owl.carousel');
	})
	$('.nex').click(function() {
	    owl.trigger('prev.owl.carousel', [300]);
	})

// Активность навигации слайдера
$(".section-slider").owlCarousel({
			items : 1,
			dots: false,
			autoplay : false,
			nav:true,
			onTranslated:callBack <----- вызов функции
	 }
	);

function callBack() {
	$('.nav-el-top').removeClass('name-active-class'); // Сторонняя навигация адаляем активынй класс
	$('. nav-el-bottom').removeClass('name-active-class');

	if($('.owl-carousel .owl-item:last-child').hasClass('active')){
			$('.nav-el-top').addClass('name-active-class'); // Если первый элемент добавляем класс
	 }
	 else{
			if($('.owl-carousel .owl-item').first().hasClass('active')) {
				$('. nav-el-bottom').addClass('name-active-class');  // Если последний элемент добавляем класс
			}
		}
}


// Если слайдер останавливается при переключении вкладки
var owl = $(".main-slider");
	$(window).on("blur focus", function(e) {
    var prevType = $(this).data("prevType");

    if (prevType != e.type) {   //  reduce double fire issues
        switch (e.type) {
            case "blur":
                // do work
                owl.trigger('stop.owl.autoplay');
                break;
            case "focus":
                // do work
                owl.trigger('play.owl.autoplay', [1000]);
                break;
        }
    }

    $(this).data("prevType", e.type);
	});

.owl-next,.owl-prev
	position absolute
	top 50%
	margin-top -30px
	color white
	font-size 40px
.owl-carousel
	position relative
.owl-prev
	+below(768px)
		left 2%
	left 1%
.owl-next
	+below(768px)
		right 2%
	right 1%
.slider-control
	size 40
	fill white
.owl-dots
	width 100%
	flex(mid)
	margin-top -40px
	position relative
	z-index 2000
.owl-dot
	round()
	margin 5px
	width 10px
	height 10px
	background white
.owl-dot.active
	background #322f40

// bower i OwlCarousel2
.wrap-slider.owl-carousel
  .el-slider
    p котент
  .el-slider
    p контетнт