Next.js Discord

Discord Forum

Cycling through Images on a Listing

Unanswered
Baldfaced hornet posted this in #help-forum
Open in Discord
Baldfaced hornetOP
So I have an application that has user listings which contain pictures. I created a way to cycle through the images on their post but was wondering if this is the best practice using <Image> or if there is a better way?

"use client"
import Image from "next/image";
import Link from "next/link";
import React, { useState } from "react";

type Props = {
    id: string;
    title: string;
    images: string[];
    details: string;
    price: string;
    quantity: string;
    eventId: string;
    identityName: string;
}

const SwapListing = ({ id, title, images, details, price, quantity, eventId, identityName }: Props) => {
    const [counter, setCounter] = useState(0);
    const imagesLength = images.length;

    const nextImage = () => {
        if (counter + 1 > imagesLength - 1) {
            setCounter(0);
        } else {
            setCounter(counter + 1);
        }
    };

    const backImage = () => {
        if (counter - 1 < 0) {
            setCounter(imagesLength - 1)
        } else {
            setCounter(counter - 1);
        }
    };

    return (
            <div>
                <Link href={'/'}>
                    <div className="px-4 py-2 text-2xl">{title}</div>
                    <div className="relative h-80 max-w-md">
                        <Image
                            src={images[counter]}
                            fill
                            alt="Frag Swap listing image"
                        />
                    </div>
                </Link>
                <button onClick={nextImage}>
                    Next Image
                </button>
                <button onClick={backImage}>
                    Last Image
                </button>
            </div>
    )
}

export default SwapListing

1 Reply

Baldfaced hornetOP
import SwapListing from "@/components/SwapListing"

const Listings = () => {
    let listings = [
        {
            id: '1',
            title: 'Cool coral',
            images: [
                '/homePageTop.jpeg',
                '/logo.png'
            ],
            details: 'A purple and neon coral',
            price: '20.00',
            quantity: '4',
            eventId: '1',
            identityName: 'Clark',
            dateTimeListed: '2023-0925T18:23:00'
        }
    ]
return (
        <section className="">
            {/*<div className="bg-rtBlue h-[300px] bg-cover">*/}
            <div>
                <div className="px-10 pt-4">
                    <h1 className="text-4xl font-semibold leading-normal">Listings</h1>
                </div>

                <ul className="grid xl:grid-cols-3 md:grid-cols-2 sm:grid-cols-1 grid-cols-1 gap-10 my-10 px-10 w-full flex flex-wrap justify-center">
                    {listings.map((listing) => (
                        <SwapListing
                            key={listing.id}
                            id={listing.id}
                            title={listing.title}
                            images={listing.images}
                            details={listing.details}
                            price={listing.price}
                            quantity={listing.quantity}
                            eventId={listing.eventId}
                            identityName={listing.identityName}
                        />
                    ))}
                </ul>
            </div>
        </section>
    )
}

export default Listings