Ascensor.js - Mouse wheel scrolling through all sections in sequence

410 views Asked by At

I am using the ascensor.js plugin to scroll through sections of content on a grid. I am trying to step through each section in sequence as the user scrolls the mouse wheel. It seems as though this should be possible using the settings, and I thought I'd done it once already in a much earlier iteration; but I cannot seem to make this work again. Admittedly, it may have been a different plugin.

Ascensor Homepage: http://kirkas.ch/ascensor/#Home Ascensor at GitHub: https://github.com/kirkas/Ascensor.js

I have defined the positions of my sections in an array.

  var ascensor = $('#grid').ascensor({ direction: [[0,0],[1,0],[1,1],[1,2],[1,3],[2,0],[2,1],[2,2],[3,0],[3,1],[4,0]] });
  var ascensorInstance = $('#grid').data('ascensor');

  $(".links li").click(function(event, index) {
        ascensorInstance.scrollToFloor($(this).index());
  });

  $(".links li:eq("+ ascensor.data("current-floor") +")").addClass("selected");
    ascensor.on("scrollStart", function(event, floor){
        $(".links li").removeClass("selected");
        $(".links li:eq("+floor.to+")").addClass("selected");
  });

  $(".prev").click(function() {
        ascensorInstance.prev();
  });

  $(".next").click(function() {
        ascensorInstance.next();
    });

  $(".direction").click(function() {
        ascensorInstance.scrollToDirection($(this).data("direction"));
    }); 

...and these are my variables inside the plugin:

 var defaults = {
    ascensorFloorName: false,
    childType: 'section',
    windowsOn: 0,
    direction: 'chocolate',
    loop: 'increment-x',
    width: '100%',
    height: '100%',
    time: 500,
    easing: 'linear',
    keyNavigation: true,
    queued: false,
    jump: true,
    ready: false,
    swipeNavigation: 'mobile-only',
    swipeVelocity: 0.7,
    wheelNavigation: true,
    wheelNavigationDelay: 40,
  };

This is my HTML. Currently, I can only scroll vertically through the first slides ([0,0],[1,0], [2,0]...).

<div id="home-grid">
    <section id="1a" class="active floor floor-1"></section>
    <section id="2a" class="floor floor-2"></section>
    <section id="2b" class="floor floor-3"></section>
    <section id="2c" class="floor floor-4"></section>
    <section id="2d" class="floor floor-5"></section>
    <section id="3a" class="floor floor-6"></section>
    <section id="3b" class="floor floor-7"></section>
    <section id="3c" class="floor floor-8"></section>
    <section id="4a" class="floor floor-9"></section>
    <section id="4b" class="floor floor-10"></section>
    <section id="5a" class="floor floor-11"></section>
</div>
0

There are 0 answers