https://github.com/kaustubh03/supscroll

Library to enable scrolling carousel functionality like Netflix Movies Slider, Google Top Stories.
https://github.com/kaustubh03/supscroll

google google-top-stories netflix-slider scrolling-carousel supscroll

Last synced: 9 months ago
JSON representation

Library to enable scrolling carousel functionality like Netflix Movies Slider, Google Top Stories.

• Host: GitHub
• URL: https://github.com/kaustubh03/supscroll
• Owner: kaustubh03
• Created: 2021-05-22T15:38:27.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2021-05-27T17:51:07.000Z (about 5 years ago)
• Last Synced: 2025-09-11T12:19:34.146Z (9 months ago)
• Topics: google, google-top-stories, netflix-slider, scrolling-carousel, supscroll
• Language: JavaScript
• Homepage: https://supscroll.vercel.app/
• Size: 20.5 KB
• Stars: 3
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# SupScroll - Library for Scrolling Carousel

##### Now implement scrolling carousel on your frontend apps quickly.

###### Current Version - v1.0.7

# Usage

This can be used in 2 ways

### Vanilla JS

- Add Script to your webpage using CDN -

```

    

```

- Add Styles to your page head using CDN

```

    

```

- Initiate Initializers

    ```

    // On DOMContentLoad complete

    document.addEventListener("DOMContentLoaded", function (event) {

        let elem = document.querySelector('.supscroll .supscroll-wrapper');

        supscroll(elem);

    });

    ```

### Using NPM Module

- Install package via npm or yarn

    ```

        // for npm 

            npm install supscroll

        // for yarn

            yarn add supscroll

    ```

- Import supscroll and styles into your file

    ```

        import { supscroll } from "supscroll";

        import 'supscroll/carousel.css';

    ```

    

### Common Step - 

- Add Markup to your frontend code, Supscroll expects markup like below

    ```

     


        


            

               

             // Repeat it n times

        

    

    ```

Note - For React this would be JSX and similar suited variations for other FE Frameworks 

Styles can be overrided using external in-app stylesheets