Listen to Events

JavaScript

You can listen to Conveyer's events with Conveyer#on

Since events occur during initialization, set [autoInit(api/ConveyerOptions) to false if you want to register events.

import Conveyer from "@egjs/conveyer";

const conveyer = new Conveyer(".items", {
  autoInit: false,
});

conveyer.on("scrollStart", evt => {
  console.log(evt);
});

conveyer.init();

You can use events of Conveyer by getting a result of useConveyer.

All events are prefixed with on-, and camelCased.

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

export default () => {
  const ref = useRef();
  const { scrollIntoView, onBeginScroll } = useConveyer(ref);

  onBeginScroll(() => {
    console.log("begin scroll");
  });

  return <div className="container">
    <div className="buttons">
      <button className="prev" onClick={() => {
        // start to end
        scrollIntoView("start", {
          align: "end",
          duration: 500,
        });
      }}>Prev</button>
      <button className="next" onClick={() => {
        // end to start
        scrollIntoView("end", {
          align: "start",
          duration: 500,
        });
      }}>Next</button>
    </div>
    <div className="items" ref={ref}>
      <div className="item">1</div>
      <div className="item">2</div>
      <div className="item">3</div>
    </div>
  </div>;
};

See React Refs and the DOM for more info.

You can use events of Conveyer by getting a result of useConveyer.

All events are prefixed with on-, and camelCased.

<template>

<div class="items" ref="ref">
  <button id="prev" @click="prev">prev</button>
  <button id="next" @click="next">next</button>
  <div class="items" ref="ref">
    <div class="item"><a href="#1">1</a></div>
    <div class="item"><a href="#2">2</a></div>
    <div class="item"><a href="#3">3</a></div>
  </div>
</div>

<script>

import { useConveyer } from "@egjs/vue-conveyer";

export default {
  setup() {
      const { ref, scrollIntoView, onBeginScroll } = useConveyer({
        horizontal: false,
      });

      onBeginScroll(() => {
        console.log("begin scroll");
      });

      return {
        ref,
        scrollIntoView,
      };
    },
    methods: {
      prev() {
        this.scrollIntoView("start", {
          align: "end",
          duration: 500,
        });
      },
      next() {
        this.scrollIntoView("end", {
          align: "start",
          duration: 500,
        });
      },
    },
  });
};

You can call methods of Conveyer by getting a result of useConveyer.

All events are prefixed with on-, and camelCased.

<template>

<div class="items" ref="ref">
  <button id="prev" @click="prev">prev</button>
  <button id="next" @click="next">next</button>
  <div class="items" ref="ref">
    <div class="item"><a href="#1">1</a></div>
    <div class="item"><a href="#2">2</a></div>
    <div class="item"><a href="#3">3</a></div>
  </div>
</div>

<script>

import { useConveyer } from "@egjs/vue2-conveyer";

export default {
  setup() {
      const { ref, scrollIntoView, onBeginScroll } = useConveyer({
        horizontal: false,
      });

      onBeginScroll(() => {
        console.log("begin scroll");
      });
      return {
        ref,
        scrollIntoView,
      };
    },
    methods: {
      prev() {
        this.scrollIntoView("start", {
          align: "end",
          duration: 500,
        });
      },
      next() {
        this.scrollIntoView("end", {
          align: "start",
          duration: 500,
        });
      },
    },
  });
};

There're few ways to interact with child component in Angular.
See Component Interaction page from Angular official document, and use that to interact with Conveyer.

You can listen events of the ngx-conveyer using Angular's event binding.

app.component.html

<div class="container">
  <button id="prev" (click)="prev()">prev</button>
  <button id="next" (click)="next()">next</button>
  <div
    class="items"
    NgxConveyer
    (beginScroll)="onBeginScroll"
    #conveyer="ngxConveyer"
    >
    <div class="item"><a href="#1">1</a></div>
    <div class="item"><a href="#2">2</a></div>
    <div class="item"><a href="#3">3</a></div>
    <div class="item"><a href="#4">4</a></div>
    <div class="item"><a href="#5">5</a></div>
    <div class="item"><a href="#6">6</a></div>
    <div class="item"><a href="#7">7</a></div>
    <div class="item"><a href="#8">8</a></div>
    <div class="item"><a href="#9">9</a></div>
    <div class="item"><a href="#10">10</a></div>
    <div class="item"><a href="#11">11</a></div>
    <div class="item"><a href="#12">12</a></div>
  </div>
</div>

app.component.ts

import { Component, Input, AfterViewInit } from '@angular/core';

import { NgxConveyerComponent } from 'ngx-conveyer';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent implements AfterViewInit {
  @ViewChild("conveyer") conveyer!: NgxConveyerComponent;
  onBeginScroll() {
    console.log("begin scroll");
  }
  prev() {
    this.conveyer.scrollIntoView("start", {
      align: "end",
      duration: 500,
    });
  }
  next() {
    this.conveyer.scrollIntoView("end", {
      align: "start",
      duration: 500,
    });
  }
}

All events are prefixed with on-, and camelCased.

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

  const { ref, scrollIntoView, onBeginScroll } = useConveyer();

  onBeginScroll(() => {
    console.log("begin scroll");
  });
</script>
<div class="container">
  <div class="buttons">
    <button class="prev" on:click={() => {
      // start to end
      scrollIntoView("start", {
        align: "end",
        duration: 500,
      });
    }}>Prev</button>
    <button class="next" on:click={() => {
      // end to start
      scrollIntoView("end", {
        align: "start",
        duration: 500,
      });
    }}>Next</button>
  </div>
  <div class="items" use:ref>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
</div>

See all available events at Conveyer#events.