Skip to content

Latest commit

 

History

History
73 lines (49 loc) · 2.67 KB

README.md

File metadata and controls

73 lines (49 loc) · 2.67 KB

Sliders

Flipkart Product Slider

Introduction

This repository contains a Flipkart lookalike product slider developed by Alok Singh. The slider provides a user-friendly and customizable way to showcase products in a slider format.

Visit the code: click me
Slider example live preview: click me

Features 🌟

  • Smooth Transitions: Elevate user interaction with a polished, smooth transition between card slides for a delightful user experience.

  • Reusability with CDN: Easily integrate the slider into any project by leveraging its reusable nature, facilitated through convenient CDN links.

  • Smart Navigation: Enjoy a clutter-free interface as the slider intelligently conceals navigation buttons at its edges, ensuring a sleek and intuitive design.

Usage🚀

Include CDN Links in HTML Document

Version v1.0

<script defer src="https://cdn.jsdelivr.net/gh/alok-sci/sliders@v1.0/flipkart-product-slider/slider-small--btn-hide/script.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/alok-sci/sliders@v1.0/flipkart-product-slider/slider-small--btn-hide/style.css">

Version v2.0

<script defer src="https://cdn.jsdelivr.net/gh/alok-sci/sliders@v2.0/flipkart/small/script.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/alok-sci/sliders@v2.0/flipkart/small/style.css">

HTML Structure

<div class="fk-slider">
    <div class="fk-cards">
        <div class="fk-card-wrapper">
            <div class="fk-card">
                <div class="fk-img-wrapper">
                    <img src="path/to/img.png">
                </div>
                <div class="fk-content-wrapper">
                    <span class="fk-title">Title of the Product</span>
                    <span class="fk-price">Price of the Product</span>
                </div>
            </div>
        </div>
    </div>
</div>

Contribution and Support 🤝

Issues and Pull Requests ❗

Issues and pull requests are welcome! Feel free to contribute to the development of this slider.

Support the Developer ☕

If you find this project helpful and would like to support the developer, consider buying a coffee:

Buy me a coffee

Click the images above to redirect to the Buy Me a Coffee ☕ page.

Copyright and Usage ©

This project is copyright protected, but it's free to use and contributions are welcomed. © 2024 Alok Singh.