Slidez

Simon Lucas

Slidez

Overview

This package allows the user to create customisable slideshows. Features include:

  • Built-in effects such as fade, slide left, top, right, bottom, bounce right and bounce left
  • The ability to autoplay slides based on a custom duration
  • Keyboard control to navigate between different slides

How does it work?

Check the out the example file here to see how the slideshows have been setup. In the example file you will see that there are 2 different versions of the Slidez component.

The first one (‘Slidez’) uses Framer’s Array property control. This version allows you to select images from a folder only.

The second one (‘Slidez_component_instance’) uses Framer’s Component Instance property control. This version allows you to connect different Frames on your canvas using the on canvas connector.

Which one you choose depends on what you want to achieve. The first version is great for images, the second version might be preferred if you want to connect code components that are more interactive as your slides.

Below is a summary of the different properties:

Slide # - The default index of the slideshow

Show index Toggle whether to show the index or not (i.e. the fractional numbers or carousel dots)

Arrows A toggle to turn the arrows on or off

Autoplay Select whether the slideshow should autoplay or not, based on a duration in milliseconds

Keyboard Toggle whether keyboard control should be on or off

Effect Select the type of effect used when changing slides.

Notes

  • This package is based on Slidez by Paul Fitzgerald. For more information please take a look here: https://github.com/Pau1fitz/react-slidez
  • It should be possible to add your own custom effects between slides. To see how the current effects are setup take a look at the ‘Slideshow.css’ file. If you would like to contribute to add more effects please email me your settings and I can try and get them added.

Any questions?

You can find me on the Framer Discord server (search for user: Si)

Contact me

If you could like to contact me, please send me an email: simonlucasltd@gmail.com

Changelog

1.0 (9th July 2020) - First release