Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wyfir/items_carousel
This multiple items carousel offers an engaging way to display several items within a single view, built using HTML, CSS, and the Swiper.js library. It's perfect for showcasing portfolios, galleries, or products.
https://github.com/wyfir/items_carousel
carousel carousel-slider html-css-javascript multiple-items multiple-items-carousel
Last synced: about 2 months ago
JSON representation
This multiple items carousel offers an engaging way to display several items within a single view, built using HTML, CSS, and the Swiper.js library. It's perfect for showcasing portfolios, galleries, or products.
- Host: GitHub
- URL: https://github.com/wyfir/items_carousel
- Owner: wyfir
- License: other
- Created: 2024-07-25T22:42:53.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-08-02T22:30:01.000Z (5 months ago)
- Last Synced: 2024-08-03T00:32:59.700Z (5 months ago)
- Topics: carousel, carousel-slider, html-css-javascript, multiple-items, multiple-items-carousel
- Language: HTML
- Homepage: https://wyfir.github.io/items_carousel/
- Size: 71.3 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# Multiple Items Carousel
This multiple items carousel offers an engaging way to display several items within a single view, built using HTML, CSS, and the Swiper.js library. It's perfect for showcasing portfolios, galleries, or products.
## Features
- **Responsive Design:** Adapts seamlessly to different screen sizes.
- **Multiple Items View:** Displays multiple slides at once, enhancing content visibility.
- **Navigation Arrows:** Allows users to navigate through the slides with previous and next buttons.
- **Dot Indicators:** Provides direct navigation to specific slides.
- **Auto-Sliding:** Includes an automatic slide feature with customizable timers.
- **Dynamic Pagination:** Shows clickable dots with dynamic bullet pagination for each slide.
## Demo
Experience the live demonstration of the multiple items carousel:
[Live Demonstration](https://wyfir.github.io/items_carousel/)
## Installation
1. **Clone the repository:**
```bash
git clone https://github.com/wyfir/items_carousel.git
```
2. **Navigate to the project directory:**
```bash
cd items_carousel
```
## 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
````
# Contributing
Contributions are welcome! Feel free to open issues or submit pull requests to improve this project.