Skip to content

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.

License

Notifications You must be signed in to change notification settings

wyfir/coverflow_slider

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

Installation

  1. Clone the repository:
    git clone https://github.com/wyfir/coverflow_slider.git
  2. Navigate to the project directory:
    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 <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
  type="module"
  src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"
></script>
<script
  nomodule
  src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"
></script>
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>

License

This project is licensed under the MIT License - see the LICENSE file for details.

Contributing

Contributions are welcome! Feel free to open issues or submit pull requests to improve this project.

About

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.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published