SwiperJS continuously applies additional right margin to every slide

My Swiper carousel seems to be adding an unnecessary 5px margin-right to each slide, resulting in the cards not fitting into one frame.

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

I attempted to fix this by setting the margin-right to 0px for the .swiper-slide class using !important, but it didn't work as expected.

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

Another temporary solution that I tried was adjusting the slidesPerView and spaceBetween properties in the Swiper component, but the problem keeps re-emerging every time I refresh the page.

<Swiper
    slidesPerView={1}
    spaceBetween={0} // gets overwritten by SwiperJS?
>
...
</Swiper>

At this point, I'm stuck and out of ideas on how to resolve this issue. Any suggestions or help would be greatly appreciated.

cssreactjssassswiper.js

Answer №1

To tackle this issue, I utilized media queries and flex-basis with percentages, along with adding margin-right: 0px !important; to the CSS code.

.gallery {
    & .image-item {
        margin-right: 0px !important;
        flex-basis: 20%;
    }

    // resolving box-shadow cutoff
    & .image-item:hover {
        box-shadow: inset 0 0 5px 0 rgba(0, 0, 0, 0.7);
        -webkit-box-shadow: inset 0 0 5px 0 rgba(0, 0, 0, 0.7);
        -moz-box-shadow: inset 0 0 5px 0 rgba(0, 0, 0, 0.7);
    }
}

@media (max-width: 992px) {
  .gallery {
    & .image-item {
      flex-basis: 25%;
    }
  }
}

@media (max-width: 768px) {
  .gallery {
    & .image-item {
      flex-basis: 33.33%;
    }
  }
}

// additional media queries for different screen sizes can be added here

Answer №2

When customizing your Swiper carousel, keep an eye out for configuration settings that impact its design. Check out parameters relating to spacing, margins, or padding. For instance, the spaceBetween option dictates the distance between each slide, while the slidesPerView setting controls how many slides are visible concurrently. Test out various values for these settings to troubleshoot any layout issues.

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

Encountering CORS problems after transitioning from localhost to Heroku

I developed a chat application with the client side written in Reactjs and the backend in Nodejs/Express. Initially, everything worked perfectly when using localhost:3000 for the client and localhost:5000 for the server. However, after deploying the server ...

node.jsreactjsexpressherokuaxios

I am experiencing issues with md-no-focus-style not functioning correctly in my configuration

I have a button that triggers the opening of my navigation bar: https://i.sstatic.net/nMr0i.jpg When I click on it, a hitmarker appears: https://i.sstatic.net/OLQaE.jpg The issue is that even after clicking on a navigation item and transitioning to the ...

htmlcssangularjsangular-material

Error: The property 'language' is undefined and cannot be read

Struggling to execute the App-test.js file provided by React Native in the __test__ directory: import 'react-native'; import React from 'react'; import App from '../src/app'; // Note: test renderer must be required after rea ...

javascriptreactjsreact-native

When the page is refreshed, the Canvas element will appear completely white and display a white rectangle (specifically on Chrome)

Currently in the process of developing a website with React and Next JS, I encountered an issue while trying to build a 3D scene using Three JS wrapped in React-Three/Fiber. Whenever I reload the website or development server on Google Chrome, I notice whi ...

reactjsnext.jsthree.jsreact-three-fiber

Strange behaviors when using setinterval with classes

Currently working on enhancing a slider functionality, and I have observed that everything is functioning smoothly - function Slider(element) { this.i = 0; this.element = element; var self = this; this.timer = window.setInterval(functi ...

javascriptjquerycssoopvelocity.js

Tips for adjusting Material UI component properties based on props

Below is my React JS code using MUI's TextField. I want to implement the error and helperText properties only when the error prop has a value. By default, the error prop is set to null. import React from 'react' import { TextField } from &ap ...

reactjsvalidationmaterial-uireact-forms

Error: The SpringBoot API returned a SyntaxError because an unexpected token < was found at the beginning of the JSON response

I am currently following a tutorial on Spring Boot React CRUD operations which can be found here. However, I have encountered an issue when trying to fetch JSON data from the REST API and display it in my project. Despite following the steps outlined in th ...

javascriptreactjsjsonspringspring-boot

Unable to establish connection with Uploadthing due to a timeout error

I am facing timeout errors while setting up the upload feature. app/api/uploadthing/core.ts import { createUploadthing, type FileRouter } from "uploadthing/next"; import { auth } from "@clerk/nextjs"; const handleAuth = () => { c ...

javascriptreactjsnext.jsupload

Multiple components are returned with switch case

I am trying to iterate over an object and display a result based on Object.entries. However, the loop currently stops at the first return statement. Is there a way for me to capture and display all components returned simultaneously, perhaps using a vari ...

javascriptreactjstypescript

What steps can I take to eliminate the warning "Warning: Prop `style` did not match" that appears when I bring in the Image component in Next.js?

Hi there! I'm encountering a warning when trying to import an image using the Image component in nextjs. The warning message reads: Warning: Prop style did not match. Server: "display: block; max-width: 100%; width: initial; height: initial; ba ...

javascriptreactjswebnext.js

Using React to Build Customized Navigation Bars with Bootstrap Styles

Is there a way to adjust the layout within the navigation bar? I would like to create three columns of equal size. https://i.sstatic.net/wH7yW.pngThis is how I envision it looking: https://i.sstatic.net/DNTUE.png Below is my code snippet: <Navbar fi ...

reactjsbootstrap-4react-bootstrap

Elements within the DIV tag are not displaying in a linear arrangement as intended

I'm having trouble creating a navbar with Bootstrap 4. The items in my div tag are not inline, and I can't align my nav item to the right. Here is the HTML code: <nav class="navbar navbar-inverse "> <div style="display:inline"> ...

htmlcsstwitter-bootstrapbootstrap-4

Oops, push was rejected because the Node.js app failed to compile. The push attempt has failed

I have been encountering issues while trying to deploy my react website on Heroku, although I have successfully pushed it to GitHub. Despite updating my Node version, the problem persists. I have attempted solutions suggested in similar questions on this ...

node.jsreactjsherokunpm

Exploring and extracting values from nested arrays of objects in JavaScript and React

Hey there, I am having trouble getting the data from the backend server to display on a chart library. Can you please take a look at my code and help me out? const data = [ { id: "americano", data: [{x: "10",y: 10,}, {x: &quo ...

javascriptreactjsfor-loopchartsheatmap

Error in ProductDetails.js line 25: Attempting to access properties of an undefined variable while trying to read 'images'

ProductDetails.js:25 Uncaught TypeError: Unable to access attributes of an unknown entity (images) {product.images && product.images.map((item, i) => ( ))} ...

reactjscarousel

Changing the look of your website with PHP and a drop-down selection bar

Recently, I implemented a drop-down menu that allows users to choose a theme for the website. While this feature works fine, I'm facing difficulty in loading the selected theme upon pressing the "Apply" button as I am fairly new to PHP. I am aware tha ...

phpcssformsdrop-down-menucookies

Unable to revert input to its previous state after setting the value attribute in ReactJS

It may seem strange, but I set the value attribute of the input tag to a random state. However, I am unable to type anything into the input field. The input field is meant to be cleared after clicking, but unfortunately, nothing happens. (I apologize if ...

javascriptreactjs

In IE9, users can select background elements by clicking on specifically positioned links

Trying to turn an li element into a clickable link by overlaying it with an a element set to 100% height and width. While this solution works in Chrome and FF, IE9 is causing issues as other elements behind the link remain selectable, rendering the link un ...

cssinternet-explorer-9

Is there a way to transfer a dynamic route ID from a page to an API?

Script is written in app/shop/[id]/page.tsx export default function Shop({ children, sections = [] }) { const [shopData, setShopData] = useState(null); const params = useParams() // Extract the id from the route const { id } = params; useEffec ...

reactjsnext.js

Is it possible to nest a parsys within another parsys in this context?

On my webpage, I have a paragraph system (parsys) with a component that contains two inner paragraph systems. When I try to add a rich text component to each of these inner paragraph systems, the components overlap and become uneditable. Is it possible t ...

javahtmlcsscontent-management-systemaem