This 3D Slider is an aesthetically pleasing way to display images and content, utilizing the powerful features of the jquery library. It's ideal for showcasing featured products, portfolio pieces, or gallery items.
- 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.
Check out the live demonstration of the Coverflow Slider: Live Demonstration
- Clone the repository:
git clone https://github.com/wyfir/3d_slider.git
- Navigate to the project directory:
cd 3d_slider
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 <head/> tag, include the jquery JavaScript:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>This project is licensed under the MIT License - see the LICENSE file for details.
Contributions are welcome! Feel free to open issues or submit pull requests to improve this project.