Carousel not working correctly

[banderson0827]

Hello, I am trying to implement the simple carousel example on my site and it shows all images at the same time with no navigation. I have tried numerous attempts to get it working from removing it from all parent containers to making it its own function but no luck. I also checked my tailwind config file and where I am using the carousel is included in the 'content' section so not sure what is causing it. Help much appreciated! Thanks!

'use client';

import { useState } from 'react'; import { motion } from 'framer-motion'; import { Carousel } from '@material-tailwind/react'; import { CarouselDefault } from '../components/Carousel';

import styles from '../styles'; import { staggerContainer } from '../utils/motion'; import { TitleText, TypingText } from '../components';

const Explore = () => ( <section className={${styles.paddings}} id="explore"> <motion.div variants={staggerContainer} initial="hidden" whileInView="show" viewport={{ once: false, amount: 0.25 }} className={${styles.innerWidth} mx-auto flex flex-col}

<TitleText title={<>View our work </>} textStyles="text-center" />

{CarouselDefault()}

</motion.div> );

export default Explore;

This code shows calling it as a function CarouselDefault the function file just contains the code from the example from your site. I also tried just pasting the code inside my div instead of using the function call but same result.

[banderson0827]

'use client';

import { useState } from 'react'; import { motion } from 'framer-motion'; import { Carousel } from '@material-tailwind/react'; import { CarouselDefault } from '../components/Carousel';

import styles from '../styles'; import { staggerContainer } from '../utils/motion'; import { TitleText, TypingText } from '../components';

const Explore = () => ( <section className={${styles.paddings}} id="explore"> <motion.div variants={staggerContainer} initial="hidden" whileInView="show" viewport={{ once: false, amount: 0.25 }} className={${styles.innerWidth} mx-auto flex flex-col}

<TitleText title={<>View our work </>} textStyles="text-center" />

{CarouselDefault()}

</motion.div> );

export default Explore;

[banderson0827]

I don't know why but I am copying and pasting the code and it does not appear to be showing it. I will paste a screenshot.

[banderson0827]

[girdhariag]

I was facing the same issue. I had to add ".//@material-tailwind//*.{js,ts,jsx,tsx,mdx}" in my tailwind config file so that the material-tailwind inside the node_modules get the access to the tailwind classes.

module.exports = {
    content: [
        "./src/**/*.{html,js,ts,jsx,tsx,mdx}",
        "./**/@material-tailwind/**/*.{html,js,ts,jsx,tsx,mdx}"
    ],
    theme: {},
    plugins: [],
};

Not sure if this is the correct way to solve this. Has anyone else fixed this using any other workaround?

[banderson0827]

Thank you for the help! I will try this.

[logancyang]

I was facing the same issue. I had to add ".//@material-tailwind//*.{js,ts,jsx,tsx,mdx}" in my tailwind config file so that the material-tailwind inside the node_modules get the access to the tailwind classes.

module.exports = {
  content: [
      "./src/**/*.{html,js,ts,jsx,tsx,mdx}",
      "./**/@material-tailwind/**/*.{html,js,ts,jsx,tsx,mdx}"
  ],
  theme: {},
  plugins: [],
};

Not sure if this is the correct way to solve this. Has anyone else fixed this using any other workaround?

I also have this exact issue, adding this line resulted in endless recompilation of the page. Not sure what's the correct way.

[RileyManda]

I was facing the same issue. I had to add ".//@material-tailwind//*.{js,ts,jsx,tsx,mdx}" in my tailwind config file so that the material-tailwind inside the node_modules get the access to the tailwind classes.

module.exports = {
  content: [
      "./src/**/*.{html,js,ts,jsx,tsx,mdx}",
      "./**/@material-tailwind/**/*.{html,js,ts,jsx,tsx,mdx}"
  ],
  theme: {},
  plugins: [],
};

Not sure if this is the correct way to solve this. Has anyone else fixed this using any other workaround?

I faced the same issues in my project and this solved the issue.Thank you for sharing this solution