Breaking News: Grepper is joining You.com. Read the official announcement!

Custom carousel

Doyin Atobaru answered on June 2, 2022 Popularity 1/10 Helpfulness 1/10

answer Custom carousel

related carousel custom design

Custom carousel

Comment

import React, { useState } from 'react';
import { cn } from '@/lib/utils'; // if using shadcn's utility function for className merging
import { LucideChevronLeft, LucideChevronRight } from 'lucide-react';
import { AnimatePresence, m } from 'motion/react';
import Image from 'next/image';

// const images = [
//   '/property/carousel-image.png',
//   '/images/listing/listing-01.webp',
//   '/images/listing/listing-02.webp',
// ];

type PropertyCarouselProps = {
  images: { url: string; alt: string }[];
};

export default function PropertyCarousel({ images }: PropertyCarouselProps) {
  const [currentIndex, setCurrentIndex] = useState(0);

  const handleNavigation = (index: number) => {
    setCurrentIndex(index);
  };

  const handlePrev = () => {
    setCurrentIndex(prev => (prev === 0 ? images.length - 1 : prev - 1));
  };

  const handleNext = () => {
    setCurrentIndex(prev => (prev === images.length - 1 ? 0 : prev + 1));
  };

  return (
    <m.div
      initial={{ opacity: 0.2 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 1 }}
      className={`
        ${images ? 'block' : 'hidden'}
        relative w-full mx-auto bg-[#F8F9FA] rounded-lg
    `}
    >
      {/* Carousel Images */}
      <div className="overflow-hidden rounded-lg">
        <div
          className="relative flex w-full h-[500px] transition-transform duration-500"
          style={{ transform: `translateX(-${currentIndex * 100}%)` }}
        >
          {images.map((image, idx) => (
            <div key={idx} className="relative min-w-full h-full">
              <Image
                fill
                src={image.url}
                alt={`${image.alt}`}
                priority={true}
                className="object-cover object-center"
              />
            </div>
          ))}
        </div>
      </div>

      {/* Navigation Buttons */}
      <button
        onClick={handlePrev}
        className="centralize absolute left-4 top-1/2 w-11 h-11 transform -translate-y-1/2 bg-black/70 text-white p-2 rounded-full hover:bg-black/90"
      >
        <LucideChevronLeft />
      </button>
      <button
        onClick={handleNext}
        className="centralize absolute right-4 top-1/2 w-11 h-11 transform -translate-y-1/2 bg-black/70 text-white p-2 rounded-full hover:bg-black/90"
      >
        <LucideChevronRight />
      </button>

      {/* Navigation Dots */}
      <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 bg-black/70 p-2 rounded-full flex space-x-2">
        {images.map((_, idx) => (
          <button
            key={idx}
            onClick={() => handleNavigation(idx)}
            className={cn(
              'w-2 h-2 md:w-3 md:h-3 rounded-full',
              idx === currentIndex ? 'bg-white shadow-lg' : 'bg-gray-500 opacity-50'
            )}
          />
        ))}
      </div>
    </m.div>
  );
}

Popularity 1/10 Helpfulness 1/10 Language whatever

Source: Grepper

Tags: carousel whatever

Link to this answer
Share Copy Link

Contributed on Nov 20 2024

Doyin Atobaru

0 Answers Avg Quality 2/10

Closely Related Answers

carousel custom design

Comment

$carousel-control-color:             $white;
$carousel-control-width:             15%;
$carousel-control-opacity:           .5;
$carousel-control-hover-opacity:     .9;
$carousel-control-transition:        opacity .15s ease;

$carousel-indicator-width:           30px;
$carousel-indicator-height:          3px;
$carousel-indicator-hit-area-height: 10px;
$carousel-indicator-spacer:          3px;
$carousel-indicator-opacity:         .5;
$carousel-indicator-active-bg:       $white;
$carousel-indicator-active-opacity:  1;
$carousel-indicator-transition:      opacity .6s ease;

$carousel-caption-width:             70%;
$carousel-caption-color:             $white;
$carousel-caption-padding-y:         1.25rem;
$carousel-caption-spacer:            1.25rem;

$carousel-control-icon-width:        2rem;

$carousel-control-prev-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");
$carousel-control-next-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>");

$carousel-transition-duration:       .6s;
$carousel-transition:                transform $carousel-transition-duration ease-in-out; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)

$carousel-dark-indicator-active-bg:  $black;
$carousel-dark-caption-color:        $black;
$carousel-dark-control-icon-filter:  invert(1) grayscale(100);

Popularity 9/10 Helpfulness 1/10 Language whatever

Source: getbootstrap.com

Tags: whatever carousel whateve

Link to this answer
Share Copy Link

Contributed on Jun 02 2022

Larry Cecilia Jr.

0 Answers Avg Quality 2/10

Custom carousel

Contents

More Related Answers

Custom carousel

Closely Related Answers

carousel custom design

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.