Next.js Discord

Discord Forum

x-scroll bar question

Unanswered
lun ツ posted this in #help-forum
Open in Discord
lun ツOP
I made a team section and Team,TeamCard components, but the x-scroll bar doesn't work as I want
Team.tsx
import React from 'react'
import { motion } from 'framer-motion';
import TeamCard from './TeamCard';

type Props = {}

function Team({}: Props) {
  return (
    <motion.div
    initial={{
      opacity: 0,
    }}
    whileInView={{
      opacity: 1,
    }}
    transition={{
      duration: 1.5,
    }}
    className='h-screen flex relative overflow-hidden flex-col text-lft md:flex-row max-w-full px-10 justify-evenly mx-auto items-center'>
    <h3 className='absolute top-24 uppercase tracking-[20px] text-[#a1abd3] text-2xl'>Team
    </h3>
    <div className='w-full flex space-x-5 overflow-x-scroll p-10 snap-x snap-mandatory'>
      <TeamCard />
      <TeamCard />
      <TeamCard />
      <TeamCard />

    </div>
  </motion.div>
  );
}

export default Team

TeamCard.tsx
import React from 'react'
import { motion } from 'framer-motion'

type Props = {}

function TeamCard({}: Props) {
    return ( 
    <article className='flex flex-col rounded-lg items-center space-y-7 flex-shrink-0 w-[500px] md:w-[600px] xl:w-[900px] snap-center bg-[#292929] p-10 hover:opacity-100 opacity-40 cursor-pointer transition-opacity duration-200 overflow-hidden'>
            <motion.img
            initial={{
                y: -100,
                opacity: 0,
            }}
            transition={{
                duration: 1.2,
            }}
            whileInView={{
                opacity: 1,
                y: 0
            }}
            viewport={{
                once: true
            }}
            className='w-32 h-32 rounded-full xl:w-[200px] xl:h-[200px] object-cover object-center'
            src="https://avatars.githubusercontent.com/WatchAndyTW" 
            alt="" 
            />
            <div className='px-0 md:px-10 '>
                <h4 className='text-4xl font-light'>WatchAndyTw</h4>
                <p className='font-bold text-2xl mt-1'>DC : @watchandytw</p>
                <div className='flex space-x-2 my-2'>
                    <img
                    className='h-10 w-10 rounded-full' 
                    src="https://cdn.sanity.io/images/ltuexkre/production/2a67945990f9c2ef568cf7e8483c1a8174556463-500x500.png" 
                    alt="" />
                    <img
                    className='h-10 w-10 rounded-full' 
                    src="https://cdn.sanity.io/images/ltuexkre/production/2a67945990f9c2ef568cf7e8483c1a8174556463-500x500.png" 
                    alt="" />
                    <img
                    className='h-10 w-10 rounded-full' 
                    src="https://cdn.sanity.io/images/ltuexkre/production/2a67945990f9c2ef568cf7e8483c1a8174556463-500x500.png" 
                    alt="" />
                </div>
                <p className=' uppercase py-5 text-[#a1abd3]'>
                    Started Work ... | Ended Work....
                </p>
                <ul className='list-disc space-y-4 ml-5 text-lg '>
                    <li>APP</li>
                    <li>APP</li>
                    <li>APP</li>
                    <li>APP</li>
                    <li>APP</li>
                </ul>
            </div>
    </article>
    )
}

export default TeamCard

4 Replies

lun ツOP
index.tsx
import type { NextPage } from 'next';
import Head from 'next/head';
import Header from "../components/Header";
import Hero from "../components/Hero";
import About from "../components/About";
import Team from "../components/Team";

const Home: NextPage = () => {
  return (
    <div className='bg-[rgb(36,36,36)] text-white h-screen snap-y snap-mandatory overflow-scroll z-0'>
      <Head>
        <title>VALLIANTY</title>
      </Head>
      {/* Header */}
      <Header />
      {/* Hero */}
      <section id='hero' className='snap-start'>
        <Hero />
      </section>
      {/* About*/}
      <section id='about' className='snap-center'>
        <About />
      </section>
      {/* Teams */}
      <section id='team' className='snap-center'>
        <Team /> 
      </section>
      {/* Partner */}
      <section>
      </section>
      {/* Contact */}
      <section>
      </section>
    </div>
  )
}

export default Home
it won't scroll as it should
:wh_cry_lk: