Experiencing problems with various React Carousel libraries when it comes to displaying

I have been attempting to integrate Carousel libraries into my react app, but I am encountering a common issue with all of them. The Carousels show the items on the first slide, but subsequent slides do not display any items, even though they exist within the carousel and I can switch to the next slide.

The libraries I have tried so far include SwiperJS, Embla-Carousel, and React-Responsive-Carousel.

In the example provided using SwiperJS, there are 5 items in the Carousel:

Slide 1 - Showing 3 items on each slide

Slide 2 - Displaying 3 items on each slide

Although I can navigate through the carousel, it only displays the items from the first slide and cuts off the rest. I confirmed that all 5 items exist by displaying them all on one slide:

Displaying all 5 items on one slide

This issue persists across other carousel libraries as well, and I have been stuck on it for 3 days. Any assistance would be highly appreciated.

Below is the JSX code for your reference:

import "./extraspace.scss"
import { Navigation, Pagination } from 'swiper';
// Direct React component imports
import { Swiper, SwiperSlide } from 'swiper/react/swiper-react.js';

// Styles must use direct files imports
import 'swiper/swiper.scss'; // core Swiper
import 'swiper/modules/navigation/navigation.scss'; // Navigation module
import 'swiper/modules/pagination/pagination.scss'; // Pagination module
export default function ExtraSpace() {

    return (
      <div className="page">
        <Swiper
          className="swiper-container"
          spaceBetween={50}
          slidesPerView={3}
          onSlideChange={() => console.log('slide change')}
          onSwiper={(swiper) => console.log(swiper)}
        >
          <SwiperSlide className="swiper-slide">Slide 1</SwiperSlide>
          <SwiperSlide className="swiper-slide">Slide 2</SwiperSlide>
          <SwiperSlide className="swiper-slide">Slide 3</SwiperSlide>
          <SwiperSlide className="swiper-slide">Slide 4</SwiperSlide>
          <SwiperSlide className="swiper-slide">Slide 5</SwiperSlide>
        </Swiper>

        </div>
    )
}

Below is the SCSS code snippet:


.page{
    display: flex;
    align-items: center;
}

.swiper-container{
    width: 50%;
    height: 50%;
    border: solid black;

    .swiper-slide{
        border: solid red;
    }
}

Answer №1

After some investigation, I successfully identified the problem. In my "index.html" file, there was an unnecessary "overflow-x: hidden" attribute within a certain element, causing the slides to be truncated. Once I removed this attribute, all of the carousels began functioning properly!

I hope this resolution can assist others who may be encountering similar challenges!

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

What is the mechanism through which the subtraction operator initiates the conversion of an array to a

Here are a couple of examples showcasing my code. Let's start with the first one: console.log([4] + 10); //"410" It is commonly known that the addition operator can only work with numbers and strings. Therefore, in this case, [4] needs to b ...

Using Angular 2 to pass a function as an argument to a constructor

How can I create a custom @Component factory where a function is called to return a component, passing the widgetName to the constructor or super constructor? export function createCustomKendoComponent(selector: string, **widgetName**: string) { @Co ...

Send any validation errors from Multer to the React component

I've been diving into learning Multer, Redux, and React simultaneously. The express router setup I'm using is as follows: router.post('/upload', addressController.uploadImage); Here's my Multer code snippet: const uploadImage ...

Tips for setting a default value in an input type file using JavaScript

While trying to upload a file from my local system to the server, I encountered an issue where the local path was not being set in the input type file field. As a result, I am unable to successfully upload the file. I would greatly appreciate any assistan ...

An issue has occurred while trying to execute the npm start command within PhpStorm

When I try to run npm start on Windows' command prompt, it works fine. However, I encounter errors when running it in the PhpStorm Terminal. You can see the errors here. Is this a result of them being different platforms or could it be related to som ...

Encountered an invalid prop type error while employing CSSTransition

Encountering an issue with the implementation of CSSTranstion for React. The purpose is to animate the mobile menu in a small application. Everything was functioning properly until the inclusion of the react-transition-group package, specifically using < ...

Troubleshooting Next.js and NextAuth.js Authentication Redirect Issue

I am experiencing a problem with authentication in my Next.js application using NextAuth.js. The issue specifically pertains to the redirection after successful login. Here is an overview of my setup: NextAuth.js Configuration (app/api/auth/[...nextauth.js ...

Display the footer once the user has reached the end of the page by scrolling

Below is the footer code I am working with. <div class="row"> <div class="col-md-12"> <div> this section always remains at the bottom </div> </div> <div class="col-md-12"> <div> only v ...

What methods are available for parsing JSON data into an array using JavaScript?

I possess an item. [Object { id=8, question="وصلت المنافذ الجمركية في...طنة حتّى عام 1970م إلى ", choice1="20 منفذًا", more...}, Object { id=22, question="تأسست مطبعة مزون التي تع... الأ ...

Is there a visual tool in React Native to monitor re-renders?

My application consists of many complex views with numerous components. To enhance performance, I want to identify any unnecessary re-rendering that might be occurring during state changes. Is there a tool available that can visually display which parts ...

Is it possible to assign default values to optional properties in JavaScript?

Here is an example to consider: interface Parameters { label: string; quantity?: number; } const defaultSettings = { label: 'Example', quantity: 10, }; function setup({ label, quantity }: Parameters = { ...defaultSettings }) { ...

Optimal approach for creating a CSS button with a dynamic size, gradient background and arrow design

I'm utilizing the Zurb Foundation framework and aiming to create dynamic call-to-action buttons with varying sizes, text, a background gradient, and a right-pointing arrow. There are three potential approaches I've envisioned: Employ an a el ...

What is the process for capturing a screenshot of a specific DOM element using Intern JS?

I'm currently utilizing intern.js for testing a web application. It allows me to run tests and generate screenshots in case of failures. My goal is to capture a screenshot of a specific element for conducting CSS regression testing with tools like res ...

Refresh the page only when all entries have been handled

As I work with a large amount of data, I've encountered an issue where the page reloads before all the necessary updates and creations can be processed. I have around 2k records that need to be either updated or created, but during the processing, the ...

Problem encountered when utilizing dat.GUI in a three.js demonstration

I recently experimented with using dat.GUI in a specific three.js example. To integrate a GUI for adjusting mesh opacity, I made the following code modifications. var loader=new THREE.VTKLoader(); loader.load ("models/vtk/bunny.vtk", function(geom){ var ...

Height and placeholder issue with ion-searchbar

Hey there, I hope everything is going well for you. I've encountered a problem with the Ionic 5 - Angular Searchbar feature. This is how I added the searchbar: <ion-searchbar [(ngModel)]="text" (ionChange)="sear ...

Tips for creating a flexible Cell component in react-big-calendar:

Is there a way to make the cell of react-big-calendar flexible depending on the number of events, and enable scrolling? Here is a screenshot showcasing my issue: https://i.stack.imgur.com/K2h69.jpg ...

Alignment of Material within Two Adjacent Divisions

I'm having trouble centering the content within two side-by-side divs. It seems like the content in each of these divs is centering towards one another, which is not what I want. I've created a main container and placed two divs inside it. The ...

Event follows activation of trigger click

I've already gone through this post on Stack Overflow about triggering an action after a click event, but none of the solutions I've tried so far have worked. Let's say I have a menu on my webpage like this: <ul class="nav nav-tabs"&g ...

Enable my textbox to interpret the html img tag

Is there a way to display emoji images instead of emoji symbols when inserting them into my textbox? For example, can I show the image representation of ':)' instead of just the symbol itself? ...