Skip to content

fix: smooth loop + draggable carousel #496

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
r3yc0n1c wants to merge 6 commits into from
Closed

fix: smooth loop + draggable carousel #496

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
66ef649
fix: smooth loop + draggable carousel
r3yc0n1c Dec 17, 2024
6699407
Merge branch 'master' into fix-490-smooth-drag-carousel
AceTheCreator Jan 28, 2025
0ac88e7
decrease spacing between the venues cards
r3yc0n1c Jan 31, 2025
9ca4212
Merge branch 'master' into fix-490-smooth-drag-carousel
r3yc0n1c Mar 9, 2025
8f43556
Merge branch 'master' into fix-490-smooth-drag-carousel
r3yc0n1c Apr 3, 2025
506fa2c
Merge branch 'master' into fix-490-smooth-drag-carousel
AceTheCreator Apr 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
108 changes: 53 additions & 55 deletions components/Header/header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,61 +1,59 @@

import React from "react";
import Heading from "../Typography/heading";
import Paragraph from "../Typography/paragraph";
import Button from "../Buttons/button";
import ReactSlider from "../Slider/slider";
import cities from "../../config/city-lists.json";
import Venue from "../Venue/venue";
import Announcement from "../announcement";
import Link from "next/link";
import React from 'react';
import Heading from '../Typography/heading';
import Paragraph from '../Typography/paragraph';
import Button from '../Buttons/button';
import EmblaCarousel from '../Slider/slider';
import cities from '../../config/city-lists.json';
import Venue from '../Venue/venue';
import Announcement from '../announcement';
import Link from 'next/link';
import { useMediaQuery } from 'react-responsive';

function Header() {
return (
<div className="relative">
<div className="container w-full flex items-center justify-center">
<div className="">
<div className="flex justify-center w-full mt-32">
<div className="flex flex-col justify-center items-center w-full">
<div className="my-10">
<Announcement />
</div>
<div
className="sm:w-full text-center"
data-test="landing-heading"
>
<Heading
className="text-6xl sm:text-4xl leading-normal sm:leading-38px tracking-[-3px] sm:tracking-[-0.02em] font-extrabold text-gradient"
level="h1"
typeStyle="heading"
>
AsyncAPI Conference 2025
</Heading>
</div>
<div className="w-[624px] sm:w-full text-center">
<Paragraph className="mt-[16px]" textColor="text-gray-200">
Join us for the AsyncAPI Conference, bringing the latest in
AsyncAPI technology to locations worldwide!
</Paragraph>
</div>
<div className="mt-[54px] relative flex items-center justify-center">
<Link href="#tickets">
<Button className="w-[250px]">Register Now</Button>
</Link>
</div>
</div>
</div>
</div>
</div>
<div className="mt-24">
<ReactSlider>
{cities.map((city) => {
return <Venue key={city.name} city={city} />;
})}
</ReactSlider>
</div>
</div>
);
const isMobile = useMediaQuery({ maxWidth: '590px' });
const SLIDES = cities.map((city) => {
return <Venue key={city.name} city={city}/>;
})

return (
<div className='relative'>
<div className='container w-full flex items-center justify-center'>
<div className=''>
<div className='flex justify-center w-full mt-32'>
<div className='flex flex-col justify-center items-center w-full'>
<div className='my-10'><Announcement /></div>
<div className='sm:w-full text-center' data-test="landing-heading">
<Heading
className='text-6xl sm:text-4xl leading-normal sm:leading-38px tracking-[-3px] sm:tracking-[-0.02em] font-extrabold text-gradient'
level='h1'
typeStyle='heading'

>
AsyncAPI Conf On Tour 2024
</Heading>
</div>
<div className='w-[624px] sm:w-full text-center'>
<Paragraph className='mt-[16px]' textColor='text-gray-200'>
Join us for the AsyncAPI Conference on Tour,
bringing the latest in AsyncAPI technology to locations worldwide!
</Paragraph>
</div>
<div className='mt-[54px] relative flex items-center justify-center'>
<Link
href='#tickets'
>
<Button className='w-[250px]'>Register Now</Button>
</Link>
</div>
</div>
</div>
</div>
</div>
<div className='mt-24'>
<EmblaCarousel slides={SLIDES} />
</div>
</div>
);
}

export default Header;
64 changes: 35 additions & 29 deletions components/Slider/slider.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,38 +1,44 @@
import Slider from 'react-slick';
import React, { useEffect, useState, useRef } from 'react';
import React, { useCallback, useEffect, useState } from 'react'
import useEmblaCarousel from 'embla-carousel-react'
import AutoScroll from 'embla-carousel-auto-scroll'
import { useMediaQuery } from 'react-responsive';

function ReactSlider({ children }) {
const isMobile = useMediaQuery({ maxWidth: '260px' });
const [slides, setSlides] = useState(1);

useEffect(() => {
if (isMobile) {
setSlides(1);
}
}, [isMobile]);
const slider = useRef(null);
const settings = {
slidesToScroll: slides,
infinite: true,
autoplay: true,
speed: 10000,
autoplaySpeed: 0,
centerMode: true,
cssEase: 'linear',
variableWidth: isMobile ? false : true,
arrows: false,
};
function EmblaCarousel({ slides }) {
const isMobile = useMediaQuery({ maxWidth: '590px' });

const scrollOptions = {
playOnInit: true,
stopOnInteraction: false,
stopOnMouseEnter: true,
startDelay: 200,
speed: 1
}

const options = {
loop: true,
dragFree: true
}

const [emblaRef] = useEmblaCarousel({ ...options }, [
AutoScroll({ ...scrollOptions })
]);

return (
<>
{ children.length > 4 || isMobile ?
(<Slider ref={slider} {...settings}>
{children}
</Slider>):(
<div className='flex m-2 justify-center'>{children}</div>)}
</>
{slides.length > 4 || isMobile ? (
<div className="embla" ref={emblaRef}>
<div className="embla__container">
{slides.map((item, idx) => (
<div className="embla__slide" key={`embla__slide_${idx}`}>{item}</div>
))}
</div>
</div>
) : (
<div className='flex m-2 justify-center'>{slides}</div>
)}
</>
);
}

export default ReactSlider;
export default EmblaCarousel;
82 changes: 39 additions & 43 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 3 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,9 @@
"@googleapis/sheets": "^7.0.0",
"axios": "^1.8.2",
"d3": "^7.8.5",
"embla-carousel-auto-scroll": "^8.5.1",
"embla-carousel-react": "^8.5.1",
"lucide-react": "^0.350.0",
"net": "^1.0.2",
"next": "^14.2.26",
"next-on-netlify": "^3.0.1",
Expand All @@ -31,7 +34,6 @@
"react-hot-toast": "^2.4.1",
"react-responsive": "^9.0.0",
"react-select": "^5.7.5",
"react-slick": "^0.29.0",
"react-youtube-embed": "^1.0.3",
"slick-carousel": "^1.8.1"
},
Expand Down
11 changes: 11 additions & 0 deletions styles/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,17 @@ body {
bottom: 0 !important;
}

.embla {
overflow: hidden;
}
.embla__container {
display: flex;
}
.embla__slide {
flex: 0 0 70%;
min-width: 0;
}

.gradient-bg {
background-image: linear-gradient(225deg, #2DCCFD 9.35%, #AD20E2 88.41%) !important;
-webkit-mask-image: linear-gradient(45deg,#000 25%,rgba(0,0,0,.2) 50%,#000 75%);
Expand Down
Loading