CODEWITHSUNDEEP
javascriptjqueryhtmlowl-carouselslick.js
questionbank
questionbank

Reputation: 440

How to slide owl carousel slider and slick slider using the mouse wheel and MAC track pad with custom navigation?

I am using OwlCarousel 2 for a slider (https://owlcarousel2.github.io/OwlCarousel2/). I have three sliders as of now. My issue is, I have created the custom navigation(It's displaying below of image) and I have to slide the image using the mouse wheel. So it's working on the windows but not working on MAC book.

I tried from here https://owlcarousel2.github.io/OwlCarousel2/demos/mousewheel.html

Would you help me out with this?

I tried below code also but still not trigger. 

var action = false,
  clicked = false;
var Owl = {
  init: function() {
    Owl.carousel();
  },
  carousel: function() {
    var owl;
    $(document).ready(function() {

      owl = $('.owl-carousel').owlCarousel({
        items: 1,
        center: true,
        nav: false,
        dots: true,
        loop: true,
        margin: 10,
        animateOut: 'slideOutUp',
        animateIn: 'slideInUp',
        dotsContainer: '.test',
        // navText: ['prev','next'],
      });


      $('.homeDots').on('click', 'li', function(e) {
        owl.trigger('to.owl.carousel', [$(this).index(), 300]);
      });

      $('.homeDots').on('mousewheel', 'li', function(e) {
        //$('.homeDots').trigger('to.owl.carousel', [$(this).index(), 300]);
        if (e.deltaY > 0) {
          $('.owl-carousel').trigger('to.owl.carousel', [$(this).index(), 300]);
        } else {
          $('.owl-carousel').trigger('to.owl.carousel', [$(this).index(), 300]);
        }
        e.preventDefault();
      });

    });
  }
};


var owl = $('.owl-carousel');
owl.on('changed.owl.carousel', function(event) {
  var item = event.item.index - 2; // Position of the current item
  $('h2').removeClass('animated bounce');
  $('.owl-item').not('.cloned').eq(item).find('h2').addClass('animated bounce');
});

$(document).ready(function() {
  Owl.init();
});
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

h2 {
  margin: 0;
  padding: 0;
}

.sliderText {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 10%;
  color: #fff;
}

.banner-bg {
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100vh;
}

.slider1 {
  background-image: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)), url('https://cdn.pixabay.com/photo/2018/05/28/22/11/message-in-a-bottle-3437294__340.jpg');
}

.slider2 {
  background-image: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)), url('https://www.annmarieackermann.com/wp-content/uploads/2016/08/sea-1514249_1280-Pixabay.jpg');
}

.slider3 {
  background-image: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)), url('https://cdn.pixabay.com/photo/2018/05/28/22/11/message-in-a-bottle-3437294__340.jpg');
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
<div class="owl-carousel owl-theme">
  <div class="item">
    <div class="banner-bg slider1">
      <div class="sliderText">
        <h2>Lorem ipsum dolor sit amet</h2>
        <h3>Curabitur iaculis elit vitae ipsum vestibulum, sed vestibulum est venenatis. Sed aliquet lacus nec bibendum maximus.</h3>
      </div>

    </div>

  </div>
  <div class="item">
    <div class="banner-bg slider2">
      <div class="sliderText">
        <h2>Lorem ipsum dolor sit amet</h2>
        <h3>Curabitur iaculis elit vitae ipsum vestibulum, sed vestibulum est venenatis. Sed aliquet lacus nec bibendum maximus.</h3>
      </div>
    </div>

  </div>
  <div class="item">

    <div class="banner-bg slider3">
      <div class="sliderText">
        <h2>Lorem ipsum dolor sit amet</h2>
        <h3>Curabitur iaculis elit vitae ipsum vestibulum, sed vestibulum est venenatis. Sed aliquet lacus nec bibendum maximus.</h3>
      </div>
    </div>

  </div>
</div>

<div class="homeDots">
  <ul class="test text-right">
    <li class="homeDots1 active" data="0">About Us</li>
    <li class="homeDots2" data="1">Our Products</li>
    <li class="homeDots3" data="2">Our Services</li>
  </ul>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

This is a slick slider(https://kenwheeler.github.io/slick/). I tried below code in MAC book but it's not working properly. I am on the first slider and I scroll then second image displaying on the screen. Now I am scrolling again then it's stuck. I am scrolling continuously more than 10 times then the third slide coming and stuck.

$(document).on('ready', function() {
  var slider = $(".slider");
  var scrollCount = null;
  var scroll = null;

  slider
    .slick({
      dots: true,
      vertical: true,
      dots: false,
      prevArrow: false,
      nextArrow: false,
      //autoplay: true,
      //autoplaySpeed: 5000,
    });


  $('.homeDots').on('click', 'li', function(e) {
    //owl.trigger('to.owl.carousel', [$(this).index(), 300]);
    slider.slick('slickNext');

  });

  slider.on('wheel', (function(e) {
    e.preventDefault();
    clearTimeout(scroll);
    scroll = setTimeout(function() {
      scrollCount = 0;
    }, 200);
    if (scrollCount) return 0;
    scrollCount = 1;

    if (e.originalEvent.deltaY < 0) {
      $(this).slick('slickNext');
    } else {
      $(this).slick('slickPrev');
    }
  }));
});
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.slick-slider {
  height: 100%;
}

.slick-vertical .slick-slide {
  border: none;
}

.slider {
  width: 100%;
}


/*.slick-slide {
  margin: 0px 20px;
}*/

.slick-slide img {
  width: 100%;
}

.slick-prev:before,
.slick-next:before {
  color: black;
}

.slick-slide {
  transition: all ease-in-out .3s;
  opacity: .2;
}

.slick-active {
  opacity: .5;
}

.slick-current {
  opacity: 1;
}

.a-slide {
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
}

.slider div {
  height: 100% !important;
  /* added this */
  width: 100% !important;
}

.slider1 {
  background-image: url('https://cdn.pixabay.com/photo/2018/05/28/22/11/message-in-a-bottle-3437294__340.jpg');
}

.slider2 {
  background-image: url('https://www.annmarieackermann.com/wp-content/uploads/2016/08/sea-1514249_1280-Pixabay.jpg');
}

.slider3 {
  background-image: url('https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg');
}

.slider4 {
  background-image: url('https://timesofindia.indiatimes.com/thumb/msid-66476517,imgsize-196276,width-800,height-600,resizemode-4/66476517.jpg');
}

.slider5 {
  background-image: url('https://media.cntraveller.in/wp-content/uploads/2018/10/GettyImages-990972132-866x487.jpg');
}

.homeDots {
  position: absolute;
  top: 50%;
  right: 05%;
  z-index: 10;
  transform: translateY(-50%);
  color: #ccc;
  padding-bottom: 20px;
}

.homeDots ul li {
  padding-bottom: 15px;
}

.homeDots ul {
  list-style: none;
}

.homeDots ul li.active {
  font-weight: 700;
}

.homeDots ul li span {
  position: relative;
}

.homeDots ul li span:after {
  content: "";
  width: 20px;
  height: 2px;
  background-color: #fff;
  display: block;
  position: absolute;
  right: -30px;
  top: 10px;
}

.homeDots ul li.active span:after {
  background-color: #ccc;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">

<div class="slider">
  <div class="a-slide slider1"></div>
  <div class="a-slide slider2"></div>
  <div class="a-slide slider3"></div>
  <div class="a-slide slider4"></div>
  <div class="a-slide slider5"></div>
</div>
<div class="homeDots">
  <ul class="test text-right">
    <li class="homeDots1 active" data="0">About Us</li>
    <li class="homeDots2" data="1">Our Products</li>
    <li class="homeDots3" data="2">Our Services</li>
    <li class="homeDots4" data="3"><span>Careers</span></li>
    <li class="homeDots5" data="4"><span>Cotnact Us</span></li>
  </ul>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js" type="text/javascript" charset="utf-8"></script>

Upvotes: 0

Views: 3774

Answers (1)

Asfan Shaikh
Asfan Shaikh

Reputation: 769

Here is the working code for Slick slider on mouse wheel. You can apply same login for Owl Carousel.

$(document).ready( function($) {
  var slider = $('.slider')
  slider.slick({
      dots: true,
      vertical: true,
      dots: false,
      prevArrow: false,
      nextArrow: false,
      asNavFor: '.homeDots .test',
    });
  slider.on('mousewheel', function(e){
  	if(e.originalEvent.wheelDelta /120 > 0) {
  		jQuery(this).slick('slickPrev');
  	}
  	else{
  		jQuery(this).slick('slickNext');
  	}
  });
  $('.homeDots .test').slick({
  	  slidesToShow: 5,
  	  slidesToScroll: 5,
      dots: true,
      vertical: true,
      adaptiveHeight: true,
      dots: false,
      prevArrow: false,
      nextArrow: false,
      asNavFor: '.slider',
      centerMode: true,
      focusOnSelect: true
    });
});
*, *:after, *:before{
	box-sizing: border-box;
}
body {
	font-family: 'Open Sans', serif;
	background-color: #fff;
	padding: 100px;    
}
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

.slick-slider {
  height: 100%;
}

.slick-vertical .slick-slide {
  border: none;
}

.slider {
  width: 100%;
}


/*.slick-slide {
  margin: 0px 20px;
}*/

.slick-slide img {
  width: 100%;
}

.slick-prev:before,
.slick-next:before {
  color: black;
}

.slick-slide {
  transition: all ease-in-out .3s;
  opacity: .2;
}

.slick-active {
  opacity: .5;
}

.slick-current {
  opacity: 1;
}

.a-slide {
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
}

.slider div {
  height: 100% !important;
  /* added this */
  width: 100% !important;
}

.slider1 {
  background-image: url('https://cdn.pixabay.com/photo/2018/05/28/22/11/message-in-a-bottle-3437294__340.jpg');
}

.slider2 {
  background-image: url('https://www.annmarieackermann.com/wp-content/uploads/2016/08/sea-1514249_1280-Pixabay.jpg');
}

.slider3 {
  background-image: url('https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg');
}

.slider4 {
  background-image: url('https://timesofindia.indiatimes.com/thumb/msid-66476517,imgsize-196276,width-800,height-600,resizemode-4/66476517.jpg');
}

.slider5 {
  background-image: url('https://media.cntraveller.in/wp-content/uploads/2018/10/GettyImages-990972132-866x487.jpg');
}

.homeDots {
  position: absolute;
  top: 50%;
  right: 05%;
  z-index: 10;
  transform: translateY(-50%);
  color: #ccc;
  width: 100%;
  max-width: 200px;
  padding-bottom: 20px;
}

/*.homeDots ul li {
  padding-bottom: 15px;
}*/

.homeDots ul {
  list-style: none;
}

.homeDots ul li.active {
  font-weight: 700;
}

.homeDots ul li span {
  position: relative;
}

.homeDots ul li span:after {
  content: "";
  width: 20px;
  height: 2px;
  background-color: #fff;
  display: block;
  position: absolute;
  right: -30px;
  top: 10px;
}

.homeDots ul li.active span:after {
  background-color: #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

<div class="slider">
  <div class="a-slide slider1"></div>
  <div class="a-slide slider2"></div>
  <div class="a-slide slider3"></div>
  <div class="a-slide slider4"></div>
  <div class="a-slide slider5"></div>
</div>
<div class="homeDots">
  <ul class="test text-right">
    <li class="homeDots1 active" data="0">About Us</li>
    <li class="homeDots2" data="1">Our Products</li>
    <li class="homeDots3" data="2">Our Services</li>
    <li class="homeDots4" data="3"><span>Careers</span></li>
    <li class="homeDots5" data="4"><span>Cotnact Us</span></li>
  </ul>
</div>

Upvotes: 0

Related Questions