Fresh Grocery Mart Slider | QuickCoder

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Grocery Mart Slider</title>
  
</head>

<body>
    <div class="wrap">
        <div class="heading">
            <h1> Fresh Grocery Mart</h1>
            <p>Get your daily needs delivered fresh & fast at best prices.</p>
        </div>

<div class="slide">
                    <div class="card">
                        <div class="media">
                            <img src="https://plus.unsplash.com/premium_photo-1664202219210-abf6ae3bdf04?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8R3JvY2VyeSUyME1hcnR8ZW58MHx8MHx8fDA%3D"
                                alt="Fresh Apples">
                            <div class="badge">20% Off</div>
                        </div>
                        <div class="content">
                            <h3 class="title">Fresh Red Apples</h3>
                            <p class="desc">Crisp & juicy handpicked apples directly from farms.</p>
                            <div class="bottom">
                                <div class="price">₹160/kg</div><button class="btn">Add to Cart</button>
                            </div>
                        </div>
                    </div>
                </div>

<div class="slide">
                    <div class="card">
                        <div class="media">
                            <img src="https://plus.unsplash.com/premium_photo-1661380311251-6a3fb7ed7ca6?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTR8fEdyb2NlcnklMjBNYXJ0fGVufDB8fDB8fHww"
                                alt="Fresh Vegetables">
                            <div class="badge">Hot</div>
                        </div>
                        <div class="content">
                            <h3 class="title">Vegetable Basket</h3>
                            <p class="desc">A healthy mix of fresh seasonal vegetables.</p>
                            <div class="bottom">
                                <div class="price">₹299/pack</div><button class="btn">Add to Cart</button>
                            </div>
                        </div>
                    </div>
                </div>

<div class="slide">
                    <div class="card">
                        <div class="media">
                            <img src="https://images.unsplash.com/photo-1646806950396-5dbe86c336cd?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjB8fEdyb2NlcnklMjBNYXJ0fGVufDB8fDB8fHww"
                                alt="Milk & Dairy">
                            <div class="badge">New</div>
                        </div>
                        <div class="content">
                            <h3 class="title">Milk & Dairy</h3>
                            <p class="desc">Fresh cow milk and dairy products for your family.</p>
                            <div class="bottom">
                                <div class="price">₹65/L</div><button class="btn">Add to Cart</button>
                            </div>
                        </div>
                    </div>
                </div>

<div class="slide">
                    <div class="card">
                        <div class="media">
                            <img src="https://images.unsplash.com/photo-1739302750685-122e3b768b5a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8R3JvY2VyeSUyME1hcnR8ZW58MHx8MHx8fDA%3D"
                                alt="Rice Bag">
                            <div class="badge">Best Seller</div>
                        </div>
                        <div class="content">
                            <h3 class="title">Organic Basmati Rice</h3>
                            <p class="desc">5kg pack of premium quality long-grain basmati rice.</p>
                            <div class="bottom">
                                <div class="price">₹599</div><button class="btn">Add to Cart</button>
                            </div>
                        </div>
                    </div>
                </div>

</div>
            <div class="arrow left" id="prev">&#10094;</div>
            <div class="arrow right" id="next">&#10095;</div>
            <div class="dots" id="dots"></div>
        </div>
    </div>

</body>

</html>

CSS

:root {
            --green: #2ecc71;
            --dark: #222;
            --light: #f7f7f7;
            --orange: #f39c12;
        }

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box
        }

body {
            font-family: 'Poppins', sans-serif;
            background: var(--light);
            color: var(--dark)
        }

.wrap {
            max-width: 1240px;
            margin: 40px auto;
            padding: 20px
        }

.heading {
            text-align: center;
            margin-bottom: 25px
        }

.heading h1 {
            color: var(--green);
            font-size: clamp(22px, 3vw, 34px)
        }

.heading p {
            opacity: .8;
            margin-top: 6px;
            font-size: 14px
        }

.slider {
            position: relative;
            overflow: hidden;
            padding: 20px 0 50px
        }

.track {
            display: flex;
            gap: 20px;
            transition: transform .7s cubic-bezier(.22, .9, .32, 1)
        }

.slide {
            flex: 0 0 33.333%;
            display: flex;
            justify-content: center
        }

.card {
            width: 100%;
            max-width: 330px;
            background: #fff;
            border-radius: 14px;
            overflow: hidden;
            box-shadow: 0 10px 25px rgba(0, 0, 0, .12);
            display: flex;
            flex-direction: column;
            transition: transform .4s ease
        }

.card:hover {
            transform: translateY(-6px)
        }

.media {
            position: relative;
            aspect-ratio: 16/12;
            overflow: hidden;
            background: #eee
        }

.media img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 1s ease
        }

.card:hover .media img {
            transform: scale(1.08)
        }

.badge {
            position: absolute;
            left: 10px;
            top: 10px;
            background: var(--orange);
            color: #fff;
            padding: 4px 9px;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 600
        }

.content {
            padding: 16px;
            display: flex;
            flex-direction: column;
            gap: 8px
        }

.title {
            font-size: 17px;
            font-weight: 700
        }

.desc {
            font-size: 13px;
            opacity: .8
        }

.bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: auto
        }

.price {
            color: var(--green);
            font-weight: 800;
            font-size: 16px
        }

.btn {
            background: var(--green);
            color: #fff;
            border: none;
            padding: 8px 14px;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 600
        }

.btn:hover {
            background: #27ae60
        }

.arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 42px;
            height: 42px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            background: rgba(0, 0, 0, 0.1);
            color: #333;
            cursor: pointer;
            z-index: 5;
            font-size: 22px
        }

.arrow:hover {
            background: rgba(0, 0, 0, 0.2)
        }

.arrow.left {
            left: 10px
        }

.arrow.right {
            right: 10px
        }

.dots {
            position: absolute;
            left: 50%;
            bottom: 12px;
            transform: translateX(-50%);
            display: flex;
            gap: 8px
        }

.dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: rgba(0, 0, 0, 0.2);
            cursor: pointer
        }

.dot.active {
            background: var(--green)
        }

@media(max-width:980px) {
            .slide {
                flex: 0 0 50%
            }
        }

@media(max-width:640px) {
            .slide {
                flex: 0 0 100%
            }
        }

JavaScript

(function () {
            const track = document.getElementById('track');
            const slides = [...document.querySelectorAll('.slide')];
            const prev = document.getElementById('prev');
            const next = document.getElementById('next');
            const dotsWrap = document.getElementById('dots');
            let current = 0, autoplayId;

// dots
            slides.forEach((_, i) => { let d = document.createElement('div'); d.className = 'dot'; d.onclick = () => goTo(i); dotsWrap.appendChild(d) });
            const dots = [...document.querySelectorAll('.dot')];

// autoplay
            function start() { autoplayId = setInterval(nextSlide, 4000) }
            function stop() { clearInterval(autoplayId) }
            function resetAutoplay() { stop(); start(); }
            document.getElementById('slider').onmouseenter = stop;
            document.getElementById('slider').onmouseleave = start;

update(); start();
        })();

Fresh Grocery Mart Slider Preview

Download Options