Как отрегулировать скорость колесика мыши OWL Carousel? - PullRequest
Новая
       62

Как отрегулировать скорость колесика мыши OWL Carousel?

0 голосов
/ 03 апреля 2020

Как отрегулировать скорость колесика мыши OWL Carousel?

Здравствуйте, у меня проблемы с настройкой карусели сов. Мне нужно сделать слайд следующим образом: https://revolution.themepunch.com/jquery/one-page-jquery-slider/

Мне удалось настроить колесо мыши, но у него очень высокая скорость перехода.

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

Ссылка такая: https://imersaoseo.club/taticca/

Я использую Карусель Owl 2 с колесом мыши. js. он работает нормально, но когда я установил l oop: false и прокручивал до последнего или первого элемента, моя мышь не работала, как я могу заставить мышь вернуться к прокрутке страницы, когда я go перешел к первому или последнему элементу?

Например:

Мои слайды: 1 2 3

Установить l oop: ложь и использование mousewhell

При прокрутке до слайда 3 я хочу прокрутить вниз страницы, не вернитесь к слайду 1. Также прокрутите вверх страницу, когда я перейду к слайду 1. 

$(document).ready(function () {

      var owl = $('.loop');

      owl.owlCarousel({
        animateOut: 'fadeOut',
    animateIn: 'fadeIn',
        smartSpeed:450,
        center: true,
        nav: false,
        items: 1,
        loop: false,
        margin: 10,
        responsive: {
          0: {
            items: 1,
            nav: false
          },
          600: {
            items: 1,
            nav: false,

          }
        },
        URLhashListener: true,
        autoplayHoverPause: true,
        startPosition: 'URLHash'
      });

      var owl = $('.owl-carousel');
owl.on('mousewheel', '.owl-stage', function(e) {
    var curr = $(this);
   if (e.deltaY > 0) {
      curr.trigger('next.owl');
   } else {
      curr.trigger('prev.owl');
   }
   e.preventDefault();
      });
      

    })
/*Fonte Global*/
*{
	font-family: 'Titillium Web', sans-serif;
}

hr {
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 0;
    border-top: 1px solid #fefefe;
}
/*Cabeçalho*/
/*Menu*/
.nav-item{
	color: #1d2845!important;
	font-weight: 600;
}
.btn-menu{
	color:#ffffff!important;
	background-color: #4eb09d;
	border-radius: 5px;
	font-size: 14px;
}
.navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 1.3rem;
    padding-left: 1.3rem;
}
/*Fim - Menu*/
/*Cabeçalho mobile*/
@media screen and (max-width: 768px){
    .navbar-brand img{
    	width: auto;
    	height: 45px!important;
    }
    .menu-esquerdo img{
    	display: none;
    }
}


 .carousel-wrapper {
      width: 50%;
      margin: 0 auto;
      
    }
    .owl-item{
      .item {
        img {
          width: 100%;
          height: auto;
          margin: -10% auto;
        }
      }
    }
    .item {
      box-sizing: content-box;
      background-color: green;
      color: #FFF;
      
      width: 98%;
      height: 250px;
      box-shadow:inset -4px 6px 20px 3px rgba(0, 0, 0, 0.5);
      h4{
        padding: 0 15px;
        z-index:100;
        position: absolute;
        top: 0;
        font-size: 30px;
        margin: 20px 10px;
      }
      img {
        width: auto ;
        height: 100%;
        position: absolute;
        top:0;left:0;
        z-index: 10;
      }
    

    }

.teste-carrossel{
	background-color: #FF0000;
	width: 100%;
	height: 100%;
}

.texto-principal{
	position: absolute;
	z-index: 999999;
}
image
...