The Carousel created using only CSS and npm packages does not function properly when implemented in a ReactJS environment

I have been attempting to incorporate a basic carousel in my react project. I have experimented with both pure CSS and various libraries, but in every instance, the outcome has been consistent.

View the screenshot of the result

All child elements are displayed in a vertical line.

I have tried using the following libraries:

https://www.npmjs.com/package/react-responsive-carousel

https://www.npmjs.com/package/pure-react-carousel

However, the output remains the same. It seems like there is an issue with the CSS styling.

import React, {Component} from 'react';
import { CarouselProvider, Slider, Slide, ButtonBack, ButtonNext } 
 from 'pure-react-carousel';

class App extends Component {
render()  {
    return (
      <div className="App">
          <CarouselProvider
              naturalSlideWidth={30}
              naturalSlideHeight={10}
              totalSlides={3}
            >
              <Slide index={0}>
                  <img src="/img/Gallery01.png" />
              </Slide>
              <Slide index={1}>
                  <img src="/img/Gallery01.png" />
              </Slide>
              <Slide index={2}>
                  <img src="/img/Gallery01.png" />
              </Slide>
            </CarouselProvider>
      </div>
    );
  }
}
export default App;

Answer №1

For a seamless integration, consider including the following import statement just after importing necessary components from 'pure-react-carousel':

import 'pure-react-carousel/dist/react-carousel.es.css';

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Upon mounting, Jest and Enzyme are unable to find the function document.createRange

While attempting to utilize the enzyme mount function on a component that incorporates MaterialUI's Tooltip, I encountered an issue halting my tests: TypeError: document.createRange is not a function ...

"Combining multiple DIVs into a single DIV with jQuery - a step-by-step guide

I have multiple DIVs with the same class, and I am looking to group them into a single DIV using either jQuery or pure JS. <div class="a"> <div>1</div> </div> <div class="a"> <div>2</div> ...

Tips for retrieving the slug value in getStaticProps for invoking the API with the slug as a parameter

Content on the Page: import { useRouter } from "next/router"; export default function Daily({ data }) { let router = useRouter() const { slug } = router.query; return slug; } And display on the page 60d6180ea9284106a4fd8441 ...

The frustrating error of ember-data duplicating records is causing quite a

Using ember-data#canary has revealed a serious bug in finding records from the store. File: router.js this.resource('games', function() { this.route('game', { path: '/:game' }); }); File: games_route.js App.GamesRoute ...

Modify the indentation format in CSS/JS

When the Tab key is pressed in an HTML page and the tabbed link gets highlighted, is it feasible to customize the style of that highlight? ...

What are some ways to customize the appearance of Stripe credit card form fields?

I've successfully implemented stripe using this HTML code and Bootstrap 4. <div class="form-control" id="card-element"></div> As a result, I get the displayed output: https://i.sstatic.net/Aw653.png However, I am loo ...

What is the process of adding a unique model to three.js?

Despite trying numerous solutions to a common problem, I am still unable to import my 3D model in Three.js using the following code: <script src="https://threejs.org/build/three.min.js"></script> <script src="https://cdn.rawgi ...

Utilizing Vue.js with Electron: Establishing seamless data synchronization between backend and frontend

I am currently developing a Vue-Electron application. Picture a settings page on the frontend where users can adjust various variables. It is crucial for me to ensure that all settings are saved even when the settings page is reloaded. To achieve this, I r ...

What is the best method for purging a previously stored variable from the cache when making an Ajax call and simultaneously passing a

I am encountering an issue with variable loading during the ajax call. Upon clicking, I pass a variable to the ajax call which then sends the value to a PHP script. The data obtained is from: rnc.csv DLRNC01 DLRNC02 DLRNC03 DLRNC04 DLRNC05 DLRNC06 DLR ...

Error encountered: MODULE_NOT_FOUND. The npm module was installed successfully, yet the command require(module) is causing

Upon successful installation of the external module "file" with npm, I am encountering a MODULE_NOT_FOUND error. The module is visible in the project folder with all its files intact, and the dependencies in the json file are also correctly listed. This is ...

Launching a URL in a pop-up window with customized title and address bar

I am seeking to implement a feature similar to the following: <a href="post/23">post 23</a> When a user clicks on this element, I want a popup div to fade in and load the HTML from page post/23 into it. Additionally, I would like the title an ...

Trouble pausing CSS slide using -webkit-animation-play-state:paused; finding it ineffective

Below is the code snippet in question: .picTransition .item { position: absolute; left: 0; right: 0; opacity: 0; -webkit-animation: picTransition 56s linear infinite; -moz-animation: picTransition 56s linear infinite; -ms-animation: ...

Two objects precisely located in the same spot yet not visible simultaneously

There are two elements here. One is a transparent button, and the other is an image positioned behind it. The background property didn't work for me, so I attempted different variations without success: .top-container > button { background-ima ...

The location of errors is not displayed in VueJS stack traces

My Current VueJS Setup Check out the Source Code here I am working on a project using VueJS with webpack. I have chosen not to use the vue-loader plugin or .vue files. My project structure resembles a typical Javascript webpack project where I import vu ...

Utilizing multiple dropdown buttons in navigation menu items with Bootstrap 4

Trying to find a solution for having sub menus within the menu items. There are 2 dropdown buttons (Reports and Views) within a menu item that is itself a dropdown item. Clicking on the first button displays the submenu below, but clicking on the second ...

most effective method for recycling dynamic content within Jquery mobile

My jQuery mobile app has a requirement to reuse the same content while keeping track of user selections each time it is displayed. I have successfully created the necessary html content and can append it to the page seamlessly. The process goes something ...

What is the best way to control the scroll position of a React Material-UI component when clicking a button?

I'm facing a challenge with creating custom buttons to navigate through a long list of images within a parent element window that acts as a viewer. While I can set the parent element to scroll, managing the state for click events has proven to be tric ...

Trouble with Angular 7: Form field not displaying touched status

I am encountering an issue while trying to input data into a form, as it is not registering the touched status. Consequently, an error always occurs when attempting to send a message back to the user. In my TypeScript file, I am utilizing FormBuilder to c ...

What methods does node.js use to distinguish between server-side and client-side scripts?

One interesting aspect of PHP is the ability to combine both PHP and JavaScript code within a single file. However, it raises the question: How can we incorporate both server-side and client-side JavaScript code in an HTML file? ...

Sharing JSON data with public/javascripts/X.js in Node/Express: A beginner's guide

Currently facing a challenge with my Express project. Take a look at https://github.com/MoreeZ/help1 and examine ./public/javascripts/budget.js. My goal is to swap the incomeData object to read data from ./incomedata.json I attempted passing it through th ...