ndungutsecharles103 / js-slideshow

follow the following to get started:

import styles using:

import js using:

<script src="./node_modules/js-slideshow/index.js"></script>

for using 3 images in the slideshow use:

<script src="./node_modules/js-slideshow/index3.js"></script>

NOTE: if you use three images in the slideshow, make sure you reduce number images in the html file template below.

create html file with the following contents(only change img src!!):

<div class="img-cont"> <img class="img" src="https://resources.premierleague.com/photos/2021/08/10/331e43df-4467-4795-82ba-255aa6ee2fce/03930_PP_Generic_Mens_Promo-Header_530x400.jpg?width=500&height=333" alt=""> <img class="img" src="https://resources.premierleague.com/photos/2021/08/10/331e43df-4467-4795-82ba-255aa6ee2fce/03930_PP_Generic_Mens_Promo-Header_530x400.jpg?width=500&height=333" alt=""> <img class="img" src="https://resources.premierleague.com/photos/2021/08/10/331e43df-4467-4795-82ba-255aa6ee2fce/03930_PP_Generic_Mens_Promo-Header_530x400.jpg?width=500&height=333" alt=""> <img class="img" src="https://resources.premierleague.com/photos/2021/08/10/331e43df-4467-4795-82ba-255aa6ee2fce/03930_PP_Generic_Mens_Promo-Header_530x400.jpg?width=500&height=333" alt=""> <img class="img" src="https://resources.premierleague.com/photos/2021/08/10/331e43df-4467-4795-82ba-255aa6ee2fce/03930_PP_Generic_Mens_Promo-Header_530x400.jpg?width=500&height=333" alt=""> <img class="img" src="https://resources.premierleague.com/photos/2021/08/10/331e43df-4467-4795-82ba-255aa6ee2fce/03930_PP_Generic_Mens_Promo-Header_530x400.jpg?width=500&height=333" alt=""> <img class="img" src="https://resources.premierleague.com/photos/2021/08/10/331e43df-4467-4795-82ba-255aa6ee2fce/03930_PP_Generic_Mens_Promo-Header_530x400.jpg?width=500&height=333" alt=""> <img class="img" src="https://resources.premierleague.com/photos/2021/08/10/331e43df-4467-4795-82ba-255aa6ee2fce/03930_PP_Generic_Mens_Promo-Header_530x400.jpg?width=500&height=333" alt=""> <img class="img" src="https://resources.premierleague.com/photos/2021/08/10/331e43df-4467-4795-82ba-255aa6ee2fce/03930_PP_Generic_Mens_Promo-Header_530x400.jpg?width=500&height=333" alt=""> </div>

For customization for example you want to create 6 images slideshow:

-make the html file img tags 6; -go to index.js find the following lines and delete from celget[7] to celget[9]

"celget[0].style.transform = 'rotateY(' + 0 + 'deg)'+ 'translateZ'+deg1 ; celget[1].style.transform = 'rotateY(' + num + 'deg)'+ 'translateZ'+deg1 ; celget[2].style.transform = 'rotateY(' + 2num + 'deg)'+ 'translateZ'+deg1 ; celget[3].style.transform = 'rotateY(' + 3num + 'deg)'+ 'translateZ'+deg1 ; celget[4].style.transform = 'rotateY(' + 4num + 'deg)'+ 'translateZ'+deg1 ; celget[5].style.transform = 'rotateY(' + 5num + 'deg)'+ 'translateZ'+deg1 ; celget[6].style.transform = 'rotateY(' + 6num + 'deg)'+ 'translateZ'+deg1 ; celget[7].style.transform = 'rotateY(' + 7num + 'deg)'+ 'translateZ'+deg1 ; celget[8].style.transform = 'rotateY(' + 8*num + 'deg)'+ 'translateZ'+deg1 ;"

-make a html file with 6 img tags and enjoy!!!

REMEMBER THAT YOU CANNOT USE MORE THAN 9 IMAGES!! But if you want those modify using your knowledge wisely