Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wyfir/coverflow_slider
This Coverflow Slider is an aesthetically pleasing way to display images and content, utilizing the powerful features of the Swiper.js library. It's ideal for showcasing featured products, portfolio pieces, or gallery items.
https://github.com/wyfir/coverflow_slider
3d-slider carousel-3d carousel-js carousel-slider html-css-javascript slider slider-css3 swiper-slider
Last synced: about 2 months ago
JSON representation
This Coverflow Slider is an aesthetically pleasing way to display images and content, utilizing the powerful features of the Swiper.js library. It's ideal for showcasing featured products, portfolio pieces, or gallery items.
- Host: GitHub
- URL: https://github.com/wyfir/coverflow_slider
- Owner: wyfir
- License: mit
- Created: 2024-07-27T21:46:02.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-07-27T22:34:59.000Z (5 months ago)
- Last Synced: 2024-07-27T23:48:42.941Z (5 months ago)
- Topics: 3d-slider, carousel-3d, carousel-js, carousel-slider, html-css-javascript, slider, slider-css3, swiper-slider
- Language: HTML
- Homepage: https://wyfir.github.io/coverflow_slider/
- Size: 3.29 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# Coverflow Slider
This Coverflow Slider is an aesthetically pleasing way to display images and content, utilizing the powerful features of the Swiper.js library. It's ideal for showcasing featured products, portfolio pieces, or gallery items.
## Features
- **Responsive Design:** Adjusts to fit the size of any screen, ensuring a perfect display on devices from phones to desktops.
- **Coverflow Effect:** Gives a three-dimensional "cover flow" visual effect to the slides.
- **Navigation Arrows:** Users can navigate through the slides using next and previous buttons.
- **Dot Indicators:** Dot indicators provide easy navigation to any specific slide directly.
- **Auto-Sliding:** Features an automatic sliding option with an adjustable timer for hands-free content browsing.
- **Touch Enabled:** Offers a smooth touch-friendly experience, allowing swiping on touch devices.
- **Centered Slides:** Keeps the current active slide centered in the view.
## Demo
Check out the live demonstration of the Coverflow Slider:
[Live Demonstration](https://wyfir.github.io/coverflow_slider/)
## Installation
1. **Clone the repository:**
```bash
git clone https://github.com/wyfir/coverflow_slider.git
```
2. **Navigate to the project directory:**
```bash
cd coverflow_slider
```
## Usage
Include the necessary files in your project and set up the HTML structure as demonstrated in the provided example files.
# Css and JavaScript
Include the styles and script files in your project. Customize the CSS variables to fit your design requirements.
## Important!
Ensure you include the Boxicons CSS in your ``:
```html
```
At the end of your HTML document, before the closing `` tag, include the Swiper JavaScript:
```html
```
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE.txt) file for details.
# Contributing
Contributions are welcome! Feel free to open issues or submit pull requests to improve this project.