vue-carousel.min.js:6 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '_c') at Proxy.r (vue-carousel.min.js:6:29067) at renderComponentRoot (runtime-core.esm-bundler.js:895:44) at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5059:57) at ReactiveEffect.run (reactivity.esm-bundler.js:185:25) at setupRenderEffect (runtime-core.esm-bundler.js:5185:9) at mountComponent (runtime-core.esm-bundler.js:4968:9) at processComponent (runtime-core.esm-bundler.js:4926:17) at patch (runtime-core.esm-bundler.js:4518:21) at mountChildren (runtime-core.esm-bundler.js:4714:13) at mountElement (runtime-core.esm-bundler.js:4623:17)
I hope someone can help me!
1 Replies
You can't use a carousel like this, You have to use React here, following the steps are given below:
Step 1: Create a React application using the following command:
npx create-react-app foldername
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
cd foldername
Step 3: After creating the ReactJS application, Install the required module using the following command:
npm install react-bootstrap
npm install bootstrap
Step 4: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.
import React from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import Carousel from 'react-bootstrap/Carousel';
export default function App() {
return (
<div style={{ display: 'block', width: 700, padding: 30 }}>
<h4>React-Bootstrap Carousel Component</h4>
<Carousel>
<Carousel.Item interval={1500}>
<img
className="d-block w-100"
src="https://media.geeksforgeeks.org/wp-content/uploads/20210425122739/2-300x115.png"
alt="Image One"
/>
<Carousel.Caption>
<h3>Label for first slide</h3>
<p>Sample Text for Image One</p>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item interval={500}>
<img
className="d-block w-100"
src="https://media.geeksforgeeks.org/wp-content/uploads/20210425122716/1-300x115.png"
alt="Image Two"
/>
<Carousel.Caption>
<h3>Label for second slide</h3>
<p>Sample Text for Image Two</p>
</Carousel.Caption>
</Carousel.Item>
</Carousel>
</div>
);
}
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Now open your browser and go to http://localhost:3000/
, you will see the react carousel output here.
I hope this will solve your problem....!