@jwmsoftware/slideshow-with-text-transition v0.0.5

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>