Creating a React Swiper that dynamically centers a sliding element of varying width

I am currently working on a carousel where the center slide needs to expand to display additional content. I have set up a working example in this codesandbox. The main criteria for this project are:

  • Non-centered slides will be minimized to show only the image.
  • The centered slide should expand to reveal text content.
  • Depending on the screen size, the visible slides will adjust dynamically with partially visible slides at the boundaries.

Upon initial render, everything looks good. However, when transitioning to the next/previous slide, it seems to shift to the left and occasionally move randomly to the right. The transition is not smooth as it shifts left before abruptly re-centering. I have tried adjusting the observer and related parameters, along with adding CSS to the active slide, but have not been able to resolve the issue.

Currently, the layout appears like this: https://i.sstatic.net/43SP9.png

cssreactjsswiper.jsreact-swiper

Answer №1

Here are some adjustments I've implemented to ensure that the image is centered and the content is loaded centrally on the active slide. Below are the suggested changes based on your CSS. Some of your class styles have been removed and replaced with classes provided directly by React Swiper.

.App {
  font-family: sans-serif;
}

.swiper {
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}

#slider-wrapper {
  padding: 20px 30px;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#slider-img-wrapper {
  min-width: 232px;
  width: fit-content;
  height: 100%;
}

#slider-card {
  opacity: 0.2;
  transition: all 0.3s;
}

#slider-card #slider-card--content {
  background-color: white;
  padding: 10px;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
}

.swiper-slide.swiper-slide-active {
  width: fit-content !important;
}
.swiper-slide.swiper-slide-active #slider-card {
  opacity: 1;
  border: 2px solid red;
}

https://i.sstatic.net/WUdub.png

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

Crafting a template for mixing up images and quotes without any specific connection - here's how!

I came across some interesting templates that can generate random quotes and others that create random pictures. My goal is to develop a template that generates both a random quote and a random picture, similar to this example, without any relation betwee ...

javascriptandroidcsstemplatesrandom

Error: The nextCallback provided is not a valid function

I recently developed a sample website using redux, specifically redux-saga and next-redux-wrapper. I successfully created and configured all components of redux. However, I encountered an error when trying to dispatch in getStaticProps with the title `Type ...

reactjsreduxreact-reduxnext.jsredux-saga

The absence of a click event in draggable objects within a Konva stage

While working with react-konva, I encountered an issue where the onClick event does not trigger when the Stage's draggable property is set to true. import React from 'react' import ReactDOM from 'react-dom' import Konva from &apos ...

reactjskonvajs

Utilize React hook form to easily manage separate forms and buttons with the useFormContext

I am currently working on creating a customizable popup in Chakra-UI. The idea is to have a modal where different forms can be passed in, with the form displayed in the modal body and buttons in the modal footer. Everything seems to render correctly withou ...

reactjsnext.jsreact-hook-form

jQuery's AJAX feature fails to identify the newly modified div classes

For my new website, I am developing a simple checklist feature. To handle the check and uncheck requests from users, I'm using jQuery's $.ajax() function. Whenever a user clicks on the check or uncheck buttons, jQuery retrieves the validation tok ...

javascriptjqueryhtmlcssajax

Saving a picture to local storage with the file input type in ReactJS

I am attempting to save an image in the browser storage once a user selects an image from their computer. <div className="add_grp_image_div margin_bottom"> <img src={img_upload} className="add_grp_image"/> <input type="file" class ...

javascripthtmlcssreactjs

Tips for resizing a 100% div without displaying vertical scrollbars in the browser

I am facing an issue with a table that has three rows. I have a main #container div with a height of 100%, and inside it is a table with 3 rows. The first and last row contain fixed size content. However, in the second row, there is a #content div with a h ...

javascriptjquerycss

Order objects in a JavaScript array

Recently, I came across a list of student data fetched from an API: const Studentdata = { "StudentName1": { "active": true, "gender": "male" }, "StudentName2": { "active": false, "gender": "male" }, "S ...

javascriptreactjsfunctionobjectecmascript-6

Tips for dynamically appending a string to a predefined variable in React

When I was working on creating a text input space using the input type area and utilizing the onChange utility, everything was running smoothly. Now, my task is to incorporate an emoji bar and insert a specific emoji into the input space upon clicking it. ...

javascripthtmlcssreactjsuser-interface

Populate MongoDB collection with pre-existing product data

I'm working on a project using Meteor and React. I want to populate my Product collection with data so that when users run the app, they can see products on the client side. The fields would include: ProductName: String, ProductPrice: Number, ProductC ...

reactjsmongodbmeteor

Empty gaps separating two divs nested within another div within a div (unable to function)

I'm diving into the world of HTML, CSS, and JS as I embark on creating a weather application. My vision is to include the temperature, followed by the city and its corresponding weather (accompanied by an icon), and lastly additional details like humi ...

htmlcssflexbox

Utilizing iPad, Safari, and CSS to effortlessly fill a page with flexbox properties

Trying to create a flex layout that expands the main area to fill the entire height of the display, with a footer always at the bottom when the content is small. However, if the main content exceeds the display size, it should behave like a normal page and ...

htmlcssipadsafariflexbox

Comparing Animation Width with Background Image Size

I'm currently facing a challenge with making my animation resize automatically based on screen size, just like my background image does. The width of the animation seems to be inconsistent or doesn't stretch across the entire screen as I intended ...

htmlcss

What is the method for retrieving the font size of elements in the native view using appium?

Can the font size of text in the native view be retrieved using appium? I am aware of using driver.findElement(By.id("by-id")).getCssValue("font-size"); for web views. Is there a similar method for native views? ...

javacssseleniumappium

Tips for including multiple spaces within a cell of a table

I've come across an issue while working on a table and attempting to insert text with multiple spaces. For example, I want to add the text HELLO<1stSPACE><2ndSPACE>WORLD. However, when I enter it as HELLO WORLD, it only displays with a si ...

htmlcsshtml-table

Tips on adjusting the dimensions of a switch in kendo UI angular with CSS

Currently, I am utilizing angular in combination with Kendo ui. Is there a way to modify the dimensions of the switch button in Kendo UI Angular using CSS? ...

cssangularwebkendo-ui

How can I ensure that the background color of my HTML email blends seamlessly with the color of the email client's background?

As I embark on creating an HTML email template, I am venturing into the realm of developing for emails, which I know can be quite temperamental. The challenge I'm facing is in making sure that the background of my HTML email matches that of the email ...

cssemailhtml-emaildarkmodeapple-mail

Strategies for addressing the issue of assigning "xx" to intrinsic attributes and props in React with TypeScript

I'm facing an issue where I am unable to locate 'count' and assign {count: number; title:string} type to IntrinsicAttributes in a React and TypeScript environment. There are two components involved, ParentComponent and ChildComponent. In t ...

reactjstypescript

iOS7 webkit introduces a new feature called span word break

After upgrading my phone to iOS7 today, I came across a strange issue. (blog.niwyclin.org) This is just a test post on my website Everything looks good on the desktop browser. When I used Responsivator to check, it appeared perfect, like this (i.minus.c ...

htmlioscsswebkitios7

Divs that are floated and only partially visible at the end

My layout consists of 6 Divs floated left to create 6 columns. The width of all these floats combined may extend beyond the window width for most users, especially with the 6th column included. Is there a way for this 6th column to be partially visible ( ...

csscss-float