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.

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.

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

Why is my CSS and Bootstrap full-page image not displaying properly?

I've been struggling to get a full-page image to display on my website and resize responsively across different screens. I've searched through w3schools and Stack Overflow for solutions, but no matter what I try, it just doesn't seem to work ...

htmlcssreactjsimage

deploy a React application on a server running Nginx, utilizing port 443

We are currently running a React project on port 3000 using the 'yarn start' command. Our goal now is to implement SSL in order to access the project from port 443 instead of having port 3000 displayed in the URL. We attempted using the proxy pas ...

reactjsnginxnext.js

Generating HTML tables with charts using FireFox

I am encountering an issue: My table contains charts and tables that are displayed correctly in browsers. However, when I attempt to print it (as a PDF) in Mozilla Firefox, the third speedometer gets cut off, showing only 2.5 speedometers. Using the "s ...

javascripthtmlcssfirefoxhighcharts

What is the best way to utilize static methods for transferring authentication tokens to an API class?

Recently, I developed an API class to handle network calls in redux saga. The structure of the class is as follows: export default class ApiService { constructor(bearer) { this.instance = axios.create({ ... ...

javascriptreactjsecmascript-6reduxredux-saga

Encountering an issue when trying to dynamically import React Material UI Icons

Hey there, I'm currently working on dynamically loading icons from MUI using the following code snippet: import React from "react"; import * as MuiIcons from "@mui/icons-material"; console.log("MuiIcons: ", MuiIcons); co ...

reactjsmaterial-uivite

Ways to increase the font size of input text using bootstrap's css framework

I currently have a bootstrap textbox set up like this: <input type="text" class="span9" required name="input_text"/> My goal is to increase the height of my input box to 300px. The width, on the other hand, is being handled by span9. I utilized In ...

csstwitter-bootstraptextbox

looking to implement auto-scroll feature in flatlist using react native

I'm attempting to implement auto-scroll functionality in my FlatList, but I'm encountering a problem where the list does not scroll automatically. Additionally, whenever I try to manually scroll, it reverts back to index 0 every 5 seconds. Below ...

javascriptandroidreactjsreact-nativereact-native-flatlist

How can I style my tables to have different border spacing between the table head and table body?

When it comes to tables, I want to customize the column spacing in a specific way. I need space between columns in the table header but no gaps between columns in the table body. How can I achieve this by including border space only in the thead section? ...

htmlcss

MaxwidthLG in Material UI design

Hi there, I've encountered an issue with Material UI CSS. Even after attempting to override it, the desired effect is still not achieved. My goal is for the entire div to occupy the full page but this is the current result: https://i.stack.imgur.com/b ...

cssmaterial-uimaterial-design

Having trouble getting rid of the border-bottom?

I have been attempting to customize the appearance of the React Material UI tabs in order to achieve a design similar to this: https://i.stack.imgur.com/tBS1K.png My efforts involved setting box-shadow for the selected tab and removing the bottom border. ...

javascripthtmlcssreactjsmaterial-ui

Looking for a way to focus on an element similar to `event.target.focus()`

I am in the process of developing a dynamic list component that generates an empty text field every time an item is added to the list. The structure of the component is shown below: const DynamicInputList = ({ inputs, onChangeArray, label, name, errors }) ...

javascriptreactjsevent-handlingfocusonchange

The functionality of aos.css seems to be malfunctioning on a Django-powered website

I recently set up a django backend website and attempted to incorporate CSS in my HTML using the following code snippet. {% load static %} <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-wid ...

cssdjangoaos.js

Is there a way to securely store my JWT Token within my application's state?

userAction.js -> Frontend, Action export const login = (userID, password) => async (dispatch) => { try { dispatch({ type: USER_LOGIN_REQUEST }); const url = "http://localhost:8080/authenticate/"; const ...

javascriptreactjsjwt

prettyPhoto popup exceeds maximum width and height limitations

I am currently using the most up-to-date version from No Margin for Errors and I have set allow_resize to true. However, the size of the display is still too large. Is there a way to set a maximum width/height? I have already configured the viewport as fo ...

javascriptjqueryhtmlcssprettyphoto

I am encountering an issue with my getResourcesDetail function in Next JS

I'm encountering an issue when trying to use getResourcesDetail in my /resource/[slug]/page.tsx file. I am receiving the error message "Error: Cannot read properties of null (reading 'title')". After attempting to address this by adding a q ...

reactjsnext.js

What is the process for creating two columns with an input box beneath them?

I am facing a challenge with my code. I am struggling to create the desired design where there are two columns and below them an input box that will be displayed when a button is pressed. The design I am aiming for can be viewed here: enter image descripti ...

javascripthtmlcss

FATAL ERROR: Insufficient mark-compacts nearing heap capacity. Allocation unsuccessful - JavaScript heap exceeded its memory capacity

My CI/CD Pipeline consistently fails when attempting to create a production build (npm run build) of my React Project on an Ubuntu Machine with 2 GB Ram and 25 GB Storage. Interestingly, the build is successful when executed on a Windows Machine with 8 GB ...

node.jsreactjsubuntudigital-ocean

Issue encountered when attempting to install React modules

Attempted to install sass-loader, as well as node-sass using both yarn and npm; however, encountered identical errors. Various methods were tried: yarn add <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="057664767628696a646160 ...

javascriptreactjsnpmyarnpkg

In Next.js 14, the cache cookie is obtained when navigating to pages, but only if there is no hard refresh

I am currently in the process of developing a small booking application using Next.js 14 without implementing any authentication. Within this app, there is a page called /events that displays a list of events, each with a "Book" button that triggers a func ...

reactjsnext.jscookiesserver-side-rendering

Drag and drop surprise: When items are dragged onto the screen, a magical box will appear. But watch as the box disappears when the item is dragged

I am a newcomer to knockout JavaScript and am currently utilizing Knockout drag and drop functionality in my project. Initially, I have two divisions - one is visible while the other has a display property set to none. During the drag enter function, I wan ...

jqueryhtmlcssknockout.js