jonasmarco / pure-slider-stories

Pure Slider Stories made with TypeScript and CSS

Pure Slider Stories

Overview

The Pure Slider Stories is a dynamic and responsive image and video slider created using pure JavaScript/TypeScript and CSS. Inspired by Instagram's story feature, this slider provides a seamless and engaging user experience. It includes features such as looping, pausing by holding down, and resuming from where it was paused. Additionally, the slider supports full video playback.

Table of Contents

• Installation
• Running
• Features
• Examples
• Contributing
• License

Installation

git clone https://github.com/jonasmarco/pure-slider-stories.git

Running

1. Access the project folder

cd pure-slider-stories

2. Install TypeScript globally (if not installed)

npm install -g typescript

3. Compile TypeScript files

tsc -w

4. Open index.html using a Live Server and access it in your browser

http://127.0.0.1:5500/

Features

• Looping: The slider seamlessly loops through the stories, providing a continuous viewing experience.
• Pause and Resume: Hold down on the slider to pause, and release to resume from where it was paused.
• Video Playback: The slider supports full video playback for an immersive multimedia experience.

Examples

Contributing

Contributions are welcome! If you have ideas for improvements, new features, or bug fixes, please open an issue or submit a pull request.

License

This project is licensed under the MIT License.

Acknowledgements

I extend my sincere gratitude to André Rafael, the instructor of the online course TypeScript para Iniciantes offered by @origamid.cursos. His guidance, expertise, and passion for teaching were pivotal in my comprehension and successful implementation of this Slider Stories project. I am grateful for the valuable knowledge and skills acquired through his mentorship.

Thank you, André Rafael, for being a source of inspiration and for contributing to my exciting journey into web development!