Skip to content
Alebat

InfiniteSlider

The InfiniteSlider component provides a dynamically scrolling interface for showcasing a series of components. Here’s a guide to help you seamlessly integrate and utilize the InfiniteSlider in your Vue projects.

Usage

Props:

  1. direction (Boolean): Determines the scrolling direction of the slider. true indicates normal direction while false reverses the scroll. Default is false.

  2. components (Array): Lists the component names you wish to display in the slider. By default, it’s ['CirugiaLogo', 'AlebatGrey', 'CirugiaLogo', 'AlebatGrey']. Ensure to have more than two items for optimal display.

  3. gradient (Boolean): Decides whether to apply a gradient to the slider, defaulting to true.

Integration Steps:

  1. 1. Custom Components:

If you want to display custom components in the slider, define them as follows:

const customComponents = ["MyComponent1", "MyComponent2", "MyComponent3"];
  1. 2. Embed the Component:

Include the InfiniteSlider in your template, adjusting the props as needed:

<template>
  <InfiniteSlider :direction="true" :components="customComponents" />
</template>

In this instance, the slider will scroll normally and feature MyComponent1, MyComponent2, and MyComponent3.

  1. 3. Interaction with Clicks:

Default behavior on a slider item click navigates to #. Adjust the InfiniteSlider or provide events if this doesn’t fit your use case.

Styling & Behavior:

  • The InfiniteSlider can be styled with or without a gradient, controlled via the gradient prop.

  • Scrolling direction is determined by the direction prop.

  • Depending on the components array length, components can be repeated multiple times for a continuous scroll effect.

Design Aspects:

  • The gradient appears on both ends of the slider, giving a fading effect.

  • On hover, the slider’s scroll animation is paused, allowing users to interact with individual items.

  • Slider items are spaced evenly with a margin between them for clear visibility.

  • The sliding animation ensures that items loop seamlessly, providing an infinite scrolling effect.

Recommendations:

  • Ensure you have the required components and data structures before utilizing the InfiniteSlider.

  • Adjust the default click behavior in the InfiniteSlider if the default navigation to # isn’t desired.

  • Designed with reusability in mind, be prepared to adapt and expand upon the component to meet your application’s unique requirements.