https://github.com/bitstarr/slide-roll

web component to create simple slide show
https://github.com/bitstarr/slide-roll

carousel no-dependencies slider slideshow webcomponent

Last synced: 2 days ago
JSON representation

web component to create simple slide show

• Host: GitHub
• URL: https://github.com/bitstarr/slide-roll
• Owner: bitstarr
• License: mit
• Created: 2024-04-02T15:28:07.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2024-04-04T13:24:35.000Z (10 months ago)
• Last Synced: 2024-11-17T14:56:08.548Z (2 months ago)
• Topics: carousel, no-dependencies, slider, slideshow, webcomponent
• Language: HTML
• Homepage:
• Size: 7.81 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# ``

Simple (non interactive) slide show. You know these things designers use to prevent bloodsheds in management meetings…

It provides basic functionality, by moving through the slides in a given interval. No separate dependencies, only modern CSS and little JavaScrip logic.

[Check out the Demo](https://bitstarr.github.io/slide-roll/demo.html)

## Usage

```html

    


        


            

            


                Fancy call to action text?

            

        

        


            

            


                Have some more text?

            

        

        […]

    

    


```

Basic structure and styling comes from the slide-roll CSS, which targets the `.slide-roll` class and the data attributes for the track and indicator.

Inside the slides you can do whatever you want. The slides will be the full width of the slide-roll. The height of all slides needs to be the same. Inside you can put only an image or create fancy layout with a bunch of HTML elements and use flexbox, grids or absolute positioning.

The interval can be set via the `interval` attribute and is given in seconds.

The slideshow will pause if the user hovers (mouseover) or touches the element. You can set the attribute `nonstop` to the slide-roll, to prevent pausing.

The indicator is optional. Simply remove the div from the example. You can customize the design of the indication display (look at the demo) since the default styling has a very low specificy.