slideshow-with-text-transition
A Vue 3 component that displays a slideshow and animated text.
Install
npm i @jwmsoftware/slideshow-with-text-transition
Register
import { Slides } from '@jwmsoftware/slideshow-with-text-transition'; import '@jwmsoftware/slideshow-with-text-transition/dist/style.css';
Usage
Pass json encoded array to component, containing accessible path to image e.g
Add text to go on animated typing text over image
Add btn text for action button
Add link for button and target
define text colour and hover text colour
$displayData = [];
$displayData[] = ['slide' => 'images/slide-folder/slides/slide-1.jpg', 'text' => ['Line 1', 'Line 2'], 'btn_text' => 'My Button', 'btn_action' => ['link' => 'https://www.google.co.uk', 'target' => '_blank'], 'colours' => ['text_colour' => 'black', 'hover_text_colour' => 'white']];
Add as many additional items for the number of slides/text wanted
<slides :display-data="'{{ json_encode($displayData) }}'"></slides>
| Param | Type | Default | Description |
|---|---|---|---|
| display-data (required) | String (json) | json encoded array of data for display | |
| duration | Number | 10 | Duration of slide transition in seconds |
| imageHolderHeight | String | 550px | String for css with height of container for image slides |
| switchTextLine | Number | 5000 | Duration of text transition in milliseconds |
| typingSpeed | String | medium | slow, medium or fast for typing animation |
| zoomScale | String | scale(2.5) | String for css scale to zoom in/out image |