@moveideas/alpine-product-360
v1.1.1
Published
Loop a series of images in a 360 rotatation carousel with this component for alpine.js
Downloads
249
Maintainers
Readme
🎆 Alpine Product 360
Loop a series of images in a 360 rotatation carousel with this plugin for Vue.js
🙋🏼♂️ Vue.js user ? Check the plugin Vue Product 360
Demo
▶️ Try the demo or ▶️ View the sandbox
Installation
Quick start guide for installing and configuring the plugin
Install via npm
# Using npm
npm install @moveideas/alpine-product-360
import alpineCarousel from '@moveideas/alpine-product-360';
// Make available to fill the x-data directive
window.alpineCarousel = alpineCarousel;
Using via CDN
To pull the plugin for quick demos, grab the latest build via CDN:
<script type="module" src="https://cdn.jsdelivr.net/gh/moveideas/[email protected]/dist/index.js"></script>
Usage
The plugin injects for you in the window object a function called alpineCarousel
. Use this function creating a new component with the x-data
directive, and initialize it with the start
function. The alpineCarousel
function takes two parameters:
- images (required): An array of images to be looped
- parameters (optional): If you would like customize the plugin — view parameters available
<div x-data="alpineCarousel(['URL1', 'URL2', 'URL3', {infinite: true}])" x-init="start()">
<img
:src="carousel.currentPath"
@mouseup="handleMouseUp"
@mousedown="handleMouseDown"
@mousemove="handleMouseMove"
@mouseleave="handleMouseLeave"
draggable="false"
>
</div>
Parameters
| Name | Type | Default Value | Description |
|-|-|-|-|-|
| speed | Number
| 10
| Rotation speed |
| reverse | Boolean
| false
| Change the rotation direction |
| infinite | Boolean
| true
| Infinite loop |
| keep-position | Boolean
| true
| When the images prop change, the plugin keep the current position. Otherwhise, the carousel slide to the first image |
Functions includes
alpineCarousel
returns an object including the following functions. You could use it inside the component scope.
slideToRight()
Slide the carousel to the right. If the loop is complete and if the infinite
props is set to true
, the carousel slide to the first images.
slideToLeft()
Slide the carousel to the left. If the loop is complete and if the infinite
props is set to true
, the carousel slide to the last images.
slideTo(position)
Slide the carousel to a specific position
setImages(images)
Use this function to load images