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 = () => (

View our work >} textStyles="text-center" />

{CarouselDefault()}

);

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 = () => (

View our work >} textStyles="text-center" />

{CarouselDefault()}

);

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