Wie Folie owl carousel-slider und slick slider mit der Maus Rad-und MAC-track-pad mit der benutzerdefinierten navigation?

Ich bin mit OwlCarousel 2 für einen Schieberegler (https://owlcarousel2.github.io/OwlCarousel2/). Ich habe drei regler als jetzt. Mein Problem ist, ich habe die benutzerdefinierte navigation(Es ist die Anzeige unterhalb des Bildes) und ich muss schieben Sie das Bild mit der Maus-Rad. Es funktioniert also auf windows, aber funktioniert nicht auf MAC book.

Ich habe versucht, von hier aus https://owlcarousel2.github.io/OwlCarousel2/demos/mousewheel.html

Würden Sie mir helfen mit diesem?

Ich habe versucht, folgenden code auch aber noch nicht auslösen.

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>

Dies ist ein schickes slider - (https://kenwheeler.github.io/slick/). Ich habe versucht, folgenden code in MAC book, aber es nicht richtig funktioniert. Ich bin auf die ersten regler, und ich scroll dann zweite Bild der Anzeige auf dem Bildschirm. Jetzt bin ich scrollen, dann wieder stecken geblieben ist. Ich bin scrollen ständig mehr als 10 mal, dann die Dritte Folie kommen und blieb stecken.

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

0
2019-09-17 09:25:35
Quelle
0 Antworten

Sehen Sie sich andere Fragen zu Tags an