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.
- 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.
Experience the live demonstration of the multiple items carousel: Live Demonstration
- Clone the repository:
git clone https://github.com/wyfir/items_carousel.git
- Navigate to the project directory:
cd items_carousel
Include the necessary files in your project and set up the HTML structure as demonstrated in the provided example files.
Include the styles and script files in your project. Customize the CSS variables to fit your design requirements.
Ensure you include the Boxicons CSS in your <head>:
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css"
/>At the end of your HTML document, before the closing </body> tag, include the Swiper JavaScript:
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>Contributions are welcome! Feel free to open issues or submit pull requests to improve this project.