Techiio-author
Started by Swarnalata RoydebMay 10, 2022

Open
When I use the Carousel component of the plugin I get the following error!

5 VIEWES 0 LIKES 0 DISLIKES SHARE
0 LIKES 0 DISLIKES 5 VIEWES SHARE

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)

blogpost

blogpost

I hope someone can help me!

1 Replies

Techiio-commentatorDebarghya Das replied 4 days ago0 likes0 dislikes

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....!

You must be Logged in to reply
Techiio-logo

Techiio is on the journey to build an ocean of technical knowledge, scouring the emerging stars in process and proffering them to the corporate world.

Follow us on:

Subscribe to get latest updates

You can unsubscribe anytime from getting updates from us
Developed and maintained by Wikiance
Developed and maintained by Wikiance