https://github.com/jonasmarco/pure-slider-stories
Pure Slider Stories made with TypeScript and CSS
https://github.com/jonasmarco/pure-slider-stories
css css3 slider stories tsconfig typescript
Last synced: 3 months ago
JSON representation
Pure Slider Stories made with TypeScript and CSS
- Host: GitHub
- URL: https://github.com/jonasmarco/pure-slider-stories
- Owner: jonasmarco
- License: mit
- Created: 2024-02-18T16:30:19.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-02-18T16:36:43.000Z (over 1 year ago)
- Last Synced: 2025-01-11T10:43:12.623Z (5 months ago)
- Topics: css, css3, slider, stories, tsconfig, typescript
- Language: TypeScript
- Homepage:
- Size: 18.9 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](#installation)
- [Running](#running)
- [Features](#features)
- [Examples](#examples)
- [Contributing](#contributing)
- [License](#license)
## Installation
```bash
git clone https://github.com/jonasmarco/pure-slider-stories.git
```
## Running
### 1. Access the project folder
```bash
cd pure-slider-stories
```
### 2. Install TypeScript globally (if not installed)
```bash
npm install -g typescript
```
### 3. Compile TypeScript files
```bash
tsc -w
```
### 4. Open `index.html` using a [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) and access it in your browser
```bash
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](https://www.instagram.com/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!