Umgang mit der Maus zu scrollen, anstatt ziehen in Slick.js?

Was ist der beste Weg zur Umsetzung Blättern Sie mit slick.js so dass, wenn Sie scrollen Sie mit der Maus, schaltet es auf die nächste Folie? Oder gibt es eine Einstellung fehlt mir?

Hier ist was ich mich beziehe, nur für den Fall.
http://kenwheeler.github.io/slick/

InformationsquelleAutor migs | 2017-10-01
  1. 10

    Implementieren Sie können einen Bildlauf mithilfe des Rad Ereignis, das ausgelöst wird, wenn ein Rad-Taste ist ein Zeigegerät (normalerweise eine Maus) gedreht wird.

    JS:

    const slider = $(".slider-item");
slider
  .slick({
    dots: true
  });

slider.on('wheel', (function(e) {
  e.preventDefault();

  if (e.originalEvent.deltaY < 0) {
    $(this).slick('slickNext');
  } else {
    $(this).slick('slickPrev');
  }
}));

    CSS:

    .container {
  margin: 0 auto;
  padding: 40px;
  width: 80%;
  color: #333;
  background: #419be0;
}

.slick-slide {
  text-align: center;
  color: #419be0;
  background: white;
}

    HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/kenwheeler/[email protected]/slick/slick.css" />
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/[email protected]/slick/slick-theme.css" />

<script type="text/javascript" src="//cdn.jsdelivr.net/gh/kenwheeler/[email protected]/slick/slick.min.js"></script>



<div class='container'>
  <div class='slider-item'>
    <div>
      <h3>1</h3>
    </div>
    <div>
      <h3>2</h3>
    </div>
    <div>
      <h3>3</h3>
    </div>
    <div>
      <h3>4</h3>
    </div>
    <div>
      <h3>5</h3>
    </div>
    <div>
      <h3>6</h3>
    </div>
  </div>
</div>

    Mehr Info

    • Das funktioniert aber ist keine tolle Umsetzung, wie das Rad-Ereignis wird ausgelöst, viele Male, verursachen Sie den Schieberegler flackern ist nicht wirklich brauchbar.
    • Ich sehe keinen flimmern. Können Sie mir eine demo?
    InformationsquelleAutor Ofisora
  2. 2

    Habe ich etwas geändert Vorherige Antwort für Mac. Da scroll auslösen mehrmals.

    var slider = $(".slider-item");
var scrollCount = null;
var scroll= null;

slider
    .slick({
        dots: true
    });

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');
    }
}));
    • Hinzufügen Sie können jsfiddle oder codepen-Beispiel?
    • Ich bin mit MAC und wenn ich wischen, dann läuft es wie aus einem ->zwei> drei. Nach es sollte gehen von einer->zwei und zwei-drei.
    • codepen.io - /max-kopych/pen/MNgdVM
    • Ich aktualisierte den code hier js.do/code/334612 und die Gleiche Frage, die ich immer bin. Mit Mausrad funktioniert es aber ohne Maus und scroll dann funktioniert es nicht.. es springt von einem-zwei-drei
    • update-code Zeile hinzufügen: clearTimeout(scroll); vor - scroll = setTimeout(function(){scrollCount=0;}, 200);
    • Geben Sie mir einige Zeit zu überprüfen
    • Nach der mit clearTimeout(scroll);. Es funktioniert einwandfrei eins-zwei, zwei-drei, drei-vier-und so weiter, aber das scroll-Problem ist noch immer nicht perfekt arbeitet. Wie bin ich 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.
    • Ich fragte eine Frage hier stackoverflow.com/questions/57041277/...
    • mit diesem script, es ist nicht gonna let Sie wechseln zur nächsten Folie, bis das scrollen komplett fertig. Und wie ich erinnere mich, auf mac-es dauert nur wenige Sekunde, um das scrollen zu stoppen. Sie müssen also warten, wie 2-3 Sek bevor Sie gonna start scrollen wieder. So dass Sie wollen, um zu versuchen, um zu verhindern, dass Standard-momentum scrolling. werfen Sie einen Blick auf dieses stackoverflow.com/questions/26235878/.... Hoffentlich wird dies helfen

    InformationsquelleAutor Maxym Kopych
  3. 1

    Ist es möglich, zu ändern, um das aktuelle Verhalten, so dass, egal wie schnell oder langsam der Benutzer die Maus-scrolling-action hat, kann er nur gehen, um die nächste Folie (und nicht springen, rutschen )?

    Mir, es ist ein unerwartetes Verhalten, um zu gehen von Folie 1 zu sagen, Folie 6 mit einem Einzel-und normal-scroll-action.

    InformationsquelleAutor Average Joe
Schreibe einen Kommentar