Using Side Wheel

You can move conveyer by using the mouse wheel in a direction aside from the scroll direction.

If the useSideWheel option is set to true, horizontal conveyer can be moved with the vertical mouse wheel and the vertical conveyer can be moved with the horizontal mouse wheel.

Property	Type	Description
useSideWheel	boolean	Whether to use the mouse wheel in a direction aside from the scroll direction (default: false)

1

2

3

4

5

6

7

8

9

10

JavaScript

<div class="examples">
  <div class="items horizontal">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
  </div>
</div>

import Conveyer from "@egjs/conveyer";

const conveyer = new Conveyer(".items", {
  useSideWheel: true,
});

React

import * as React from "react";
import { useConveyer } from "@egjs/react-conveyer";

export default function SideWheel() {
  const ref = React.useRef<HTMLDivElement>();
  useConveyer(ref, {
    horizontal: true,
    useSideWheel: true,
  });
  return <div className="examples">
    <div className="items horizontal" ref={ref}>
      <div className="item">1</div>
      <div className="item">2</div>
      <div className="item">3</div>
      <div className="item">4</div>
      <div className="item">5</div>
      <div className="item">6</div>
      <div className="item">7</div>
      <div className="item">8</div>
      <div className="item">9</div>
      <div className="item">10</div>
    </div>
  </div>;
}

Vue@2

<template>
<div class="examples">
  <div class="items horizontal" ref="ref">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
  </div>
</div>
</template>
<script lang="ts">
import { useConveyer } from "@egjs/vue2-conveyer";

export default {
  setup() {
    const { ref } = useConveyer({
      useSideWheel: true,
    });

    return {
      ref,
    };
  },
};
</script>

Vue@3

<template>
<div class="examples">
  <div class="items horizontal" ref="ref">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
  </div>
</div>
</template>
<script lang="ts">
import { useConveyer } from "@egjs/vue-conveyer";

export default {
  setup() {
    const { ref } = useConveyer({
      useSideWheel: true,
    });

    return {
      ref,
    };
  },
};
</script>

Angular

<div class="examples">
  <div class="items horizontal" [ngxConveyer]="{ useSideWheel: true }">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
  </div>
</div>

Svelte

<script>
  import { useConveyer } from "@egjs/svelte-conveyer";

  const {
    ref,
  } = useConveyer({
    horizontal: false,
  });
</script>
<div class="examples">
  <div class="items horizontal" use:ref>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
  </div>
</div>