A simple responsive
carousel.
Demo
Hooper lets you create beautiful carousel sliders that scale well in different sizes, with multiple configurations and settings to come up with your very own image slider.
Features
Lightweight
Built using vanilla JavaScript. No jQuery, no dependencies.
Fully responsive
Enjoy Hooper on multiple view ports and different scenarios, as it scales well in different sizes.
Touch support
Designed with mobile devices in mind as well as mouse dragging action for desktops.
SVG ready
Hooper works with SVGs for custom navigation icons as well to provide an even smoother experience.
Smooth transitions
Hooper provides a smooth transition experience between sliders, and you can set your own transitions as well.
Cross-browser compatibility
Hooper is compatible with all browsers and provides the same consistent experience.
Installation
and Usage.
npm install hooper
# or use yarn
yarn add hooper
# Usage
<template>
<hooper>
<slide>
slide 1
</slide>
<slide>
slide 2
</slide>
...
</hooper>
<template>
<script>
import { Hooper, Slide } form 'hooper';
export default {
name: 'App',
components: {
Hooper,
Slide
}
}
</script>