ImAlpha/Portfolio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

working carousel

Browse Source
This commit is contained in:
Jacob Delgado 2023-11-06 05:17:38 -08:00
parent 21620739c3
commit ddbd937bac
7 changed files with 71 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
Websites/jefes-nextjs/app/components/MenuBar/MenuBar.tsx
View File

@ -1,5 +1,4 @@
import React from 'react'
import NavLinks from '@/app/ui/dashboard/nav-links';
const MenuBar = () => {
return (

8
Websites/jefes-nextjs/app/components/NavBar/NavBar.tsx
View File

@ -36,16 +36,16 @@ const NavBar = () => {
<Image
src="/img01.webp"
alt="nav image"
layout="fill"
objectFit="cover"
fill
style={{ objectFit: "cover" }}
quality={100}
className="brightness-50 hidden md:block"
/>
<Image
src="/img01.webp"
alt="nav image"
layout="fill"
objectFit="cover"
fill
style={{ objectFit: "cover" }}
className="brightness-0 block md:hidden"
/>
</div>

9
Websites/jefes-nextjs/app/gallery/carousel.css
View File

@ -1,4 +1,11 @@
.carousel{
.embla {
overflow: hidden;
}
.embla__container {
display: flex;
}
.embla__slide {
flex: 0 0 100%;
min-width: 0;
}

51
Websites/jefes-nextjs/app/gallery/carousel.tsx
View File

@ -1,43 +1,48 @@
"use client";
import React from "react";
import useEmblaCarousel from "embla-carousel-react";
import Image from "next/image";
import Autoplay from 'embla-carousel-autoplay';
import './carousel.css';
export const EmblaCarousel = () => {
const [emblaRef] = useEmblaCarousel();
return (
<div className="overflow-hidden" ref={emblaRef}>
<div className="flex">
<div className="carousel">
<Image
src="/images/bar01.jpg"
alt="bar01"
fill
style={{ objectFit: "cover" }}
quality={100}
/>
</div>
<div className="embla" ref={emblaRef}>
<div className="embla__container">
<div className="embla__slide">
<Image
src="/images/food01.jpg"
alt="food1"
fill
style={{ objectFit: "cover" }}
quality={100}
src="/img01.webp"
alt="/"
width={0}
height={0}
sizes="100vw"
style={{ width: "100%", height: "auto" }} // optional
/>
</div>
</div>
<div className="embla__slide">
{" "}
<Image
src="/images/food02.webp"
alt="food2"
fill
style={{ objectFit: "cover" }}
quality={100}
src="/IMG_2431.jpg"
alt="/"
width={0}
height={0}
sizes="100vw"
style={{ width: "100%", height: "auto" }} // optional
/>
</div>
<div className="embla__slide">
{" "}
<Image
src="/images/bar01.jpg"
alt="/"
width={0}
height={0}
sizes="100vw"
style={{ width: "100%", height: "auto" }} // optional
/>
</div>
</div>
</div>
);
};

58
Websites/jefes-nextjs/app/gallery/page.tsx
View File

@ -1,5 +1,3 @@
"use client";
import React from "react";
import { useState } from "react";
import { BsChevronCompactLeft, BsChevronCompactRight } from "react-icons/bs";
@ -7,40 +5,40 @@ import { RxDotFilled } from "react-icons/rx";
import { EmblaCarousel } from "./carousel";
const Gallery = () => {
const slides = [
{ url: "/images/1577mobile.webp" },
{ url: "/images/bar01.jpg" },
{ url: "/images/fbimg02.jpg" },
{ url: "/images/food01.jpg" },
{ url: "/images/food02.webp" },
{ url: "/images/IMG_2737.webp" },
{ url: "/images/IMG_2749.webp" },
{ url: "/images/IMG_2766.webp" },
{ url: "/images/img01.webp" },
{ url: "/images/img05.webp" },
];
// const slides = [
// { url: "/images/1577mobile.webp" },
// { url: "/images/bar01.jpg" },
// { url: "/images/fbimg02.jpg" },
// { url: "/images/food01.jpg" },
// { url: "/images/food02.webp" },
// { url: "/images/IMG_2737.webp" },
// { url: "/images/IMG_2749.webp" },
// { url: "/images/IMG_2766.webp" },
// { url: "/images/img01.webp" },
// { url: "/images/img05.webp" },
// ];
const [currentIndex, setCurrentIndex] = useState(0);
// const [currentIndex, setCurrentIndex] = useState(0);
const prevSlide = () => {
const isFirstSlide = currentIndex === 0;
const newIndex = isFirstSlide ? slides.length - 1 : currentIndex - 1;
setCurrentIndex(newIndex);
};
// const prevSlide = () => {
// const isFirstSlide = currentIndex === 0;
// const newIndex = isFirstSlide ? slides.length - 1 : currentIndex - 1;
// setCurrentIndex(newIndex);
// };
const nextSlide = () => {
const isLastSlide = currentIndex === slides.length - 1;
const newIndex = isLastSlide ? 0 : currentIndex + 1;
setCurrentIndex(newIndex);
};
// const nextSlide = () => {
// const isLastSlide = currentIndex === slides.length - 1;
// const newIndex = isLastSlide ? 0 : currentIndex + 1;
// setCurrentIndex(newIndex);
// };
const goToSlide = (slideIndex) => {
setCurrentIndex(slideIndex);
};
// const goToSlide = (slideIndex) => {
// setCurrentIndex(slideIndex);
// };
return (
<div className="max-w-[1400px] h-[780px] w-full m-auto py-16 px-4 relative group">
<EmblaCarousel></EmblaCarousel>
<div className="">
<EmblaCarousel />
{/* <div
style={{ backgroundImage: `url(${slides[5].url})` }}
className="w-full h-full rounded-2xl bg-center bg-cover duration-500"

BIN
Websites/jefes-nextjs/bun.lockb
View File

Binary file not shown.

1
Websites/jefes-nextjs/package.json
View File

@ -13,6 +13,7 @@
"classnames": "^2.3.2",
"clsx": "^2.0.0",
"easymde": "^2.18.0",
"embla-carousel-autoplay": "^8.0.0-rc14",
"embla-carousel-react": "^8.0.0-rc14",
"next": "13.5.6",
"prisma": "^5.4.2",