Simple Slideshow Library

A simple and customizable slideshow component for Vue.js, designed to display images with optional controls, indicators, and auto-slide functionality. This component is ideal for showcasing images in a responsive and user-friendly way.

Features

• Auto-slide functionality: Automatically transition between slides at a specified interval.
• Pause on hover: Pause the slideshow when the user hovers over the images.
• Customizable width and height: Adjust the size of the slideshow to fit your layout.
• Next and previous buttons: Navigate through the slides manually (optional).
• Slide indicators: Visual indicators that show which slide is active (optional).
• Responsive design: Scales with different screen sizes to maintain a consistent appearance.

Installation

You can install this library via npm or yarn.

Using npm

npm install simple-slideshow-ur

Using yarn

yarn add simple-slideshow-ur

Usage

Once installed, you can use the Slideshow component in your Vue.js application. Below is a basic example of how to use it:

Basic Example

<template>
  <Slideshow 
    :slides="imageSlides" 
    :autoslide="true" 
    :interval="3000" 
    :pauseOnHover="true"
    width="100%" 
    height="400px" 
    :showButtons="true"
    :showIndicators="true"
  />
</template>

<script setup>
import Slideshow from 'simple-slideshow-ur';

const imageSlides = [
  'https://raw.githubusercontent.com/xfiveco/mock-api-images/main/images/img-01-xl.jpg',
  'https://raw.githubusercontent.com/xfiveco/mock-api-images/main/images/img-02-xs.jpg',
  'https://raw.githubusercontent.com/xfiveco/mock-api-images/main/images/img-04-xl.jpg',
  'https://via.placeholder.com/800x400?text=Slide+4',
];
</script>

Props

| Prop | Type | Default | Description | | -------------- | -------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | | slides | Array | [] | An array of image URLs to display in the slideshow. | | autoslide | Boolean| false | Enables automatic slide transition. | | interval | Number | 3000 | Time (in milliseconds) between each slide transition if autoslide is enabled. | | pauseOnHover | Boolean| false | Pauses the slideshow when the user hovers over it. | | width | String | '100%' | The width of the slideshow container. | | height | String | '400px' | The height of the slideshow container. | | showButtons | Boolean| true | Displays the "previous" and "next" navigation buttons. | | showIndicators| Boolean| true | Displays slide indicators, showing the current active slide. |

Customizing Buttons

You can also provide custom buttons by using the prev-button and next-button slots. Here's an example:

<Slideshow 
  :slides="imageSlides" 
  :autoslide="true" 
  :interval="3000" 
  :pauseOnHover="true"
  width="100%" 
  height="400px" 
  :showButtons="true"
>
  <template #prev-button>
    <button class="custom-prev-button">Previous</button>
  </template>
  <template #next-button>
    <button class="custom-next-button">Next</button>
  </template>
</Slideshow>

Styling

You can customize the appearance of the slideshow by overriding the styles in your global or component-level CSS. For example:

.custom-prev-button, .custom-next-button {
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 10px;
  border: none;
  cursor: pointer;
  font-size: 16px;
}

Events

You can add additional interactions by handling events like keydown to allow keyboard navigation:

<Slideshow 
  :slides="imageSlides" 
  :autoslide="true" 
  :interval="3000" 
  :pauseOnHover="true"
  width="100%" 
  height="400px" 
  :showButtons="true"
  @keydown="handleKeydown"
/>

<script setup>
function handleKeydown(event) {
  if (event.key === 'ArrowRight') {
    // Handle next slide
  } else if (event.key === 'ArrowLeft') {
    // Handle previous slide
  }
}
</script>

Example Slideshow Usage

You can customize the functionality and appearance based on your requirements. The above example showcases a simple, responsive slideshow that you can easily integrate into your Vue.js application.

Contributing

Feel free to fork this repository and submit pull requests. All contributions are welcome!

License

This library is licensed under the MIT License.