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 months 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 (about 2 years ago)
• Default Branch: main
• Last Pushed: 2025-02-06T15:45:30.000Z (over 1 year ago)
• Last Synced: 2025-02-06T16:39:10.630Z (over 1 year 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 (now 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?

            

        

        […]

    

    


    


        prev

        next

    


```

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 as well as the controls. Simply remove the `div`s 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.