CSS Grid + Swiper Wrapper - wrong width calculated
  • 08-May-2023
Lightrun Team
Author Lightrun Team
Share
CSS Grid + Swiper Wrapper - wrong width calculated

CSS Grid + Swiper Wrapper – wrong width calculated

Lightrun Team
Lightrun Team
08-May-2023

Explanation of the problem

The issue reported is related to the Swiper library version 4.4.2 obtained from the CDNJS platform. The problem affects the Latest Chrome and Latest Safari browsers on macOS. A live example of the issue is available on CodePen, where a basic CSS grid setup with 3 columns has been created. The Swiper carousel is set up within the 3rd column with a width of 1fr. The expected behavior is that the Swiper wrapper should take up the remaining space of the container, displaying the correct number of slidesPerView. However, the actual behavior is that the wrapper overflows, ignoring the slidesPerView parameter and showing the width of the entire elements.

To provide more context on the issue, the code snippet below shows the HTML and CSS used to create the grid layout and the Swiper carousel:

<div class="wrapper">
  <div class="col-1"></div>
  <div class="col-2"></div>
  <div class="col-3">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide"></div>
        <div class="swiper-slide"></div>
        <div class="swiper-slide"></div>
      </div>
    </div>
  </div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 1200px;
  margin: 0 auto;
}

.col-3 {
  grid-column: 3;
}

.swiper-container {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  width: 300px;
  height: 300px;
  background: gray;
}

Troubleshooting with the Lightrun Developer Observability Platform

Getting a sense of what’s actually happening inside a live application is a frustrating experience, one that relies mostly on querying and observing whatever logs were written during development.
Lightrun is a Developer Observability Platform, allowing developers to add telemetry to live applications in real-time, on-demand, and right from the IDE.

  • Instantly add logs to, set metrics in, and take snapshots of live applications
  • Insights delivered straight to your IDE or CLI
  • Works where you do: dev, QA, staging, CI/CD, and production

Start for free today

Problem solution for CSS Grid + Swiper Wrapper – wrong width calculated

To solve this problem, there are two proposed solutions. The first solution is to add overflow: hidden to the parent element of Swiper, which in most cases will be the grid container. By setting overflow: hidden, the container will clip the overflowing content, including Swiper, preventing it from stretching beyond its designated area. This will ensure that Swiper correctly takes up the remaining space of the container, as intended.

Another proposed solution is to ensure that the immediate child of the grid column where Swiper is nested has overflow: hidden set. By setting overflow: hidden on the immediate child, Swiper will calculate its width correctly, no matter how deeply it is nested. It is important to note that this solution assumes proper grid column setup, as seen in the first solution, which involves setting the correct values for grid-template-columns.

In conclusion, the Swiper overflow issue when used within a CSS grid layout can be resolved by either adding overflow: hidden to the parent element or setting the immediate child of the grid column to overflow: hidden. Proper grid column setup is also important to ensure the correct behavior of Swiper. It is important to choose the solution that fits your particular scenario, taking into account the overall layout and hierarchy of your elements.

Other popular problems with nolimits4web Swiper

Problem: Slider not working correctly when moving to the right

One of the most commonly reported issues with the nolimits4web Swiper library is that the slider does not function correctly when moving to the right. This problem can be caused by the width of the slides being less than the width of the viewport. This can cause the slider to overslide when moving to the right, resulting in the incorrect display of slides.

Solution:

One solution to this issue is to modify the conditions of the loop fix method. By passing an argument to the method, the code can determine whether the user is trying to move to the right or the left. This allows the method to adjust the behavior of the slider accordingly. Additionally, a conditional statement can be added to the onTouchMove method to determine the swipe direction. This can be done by adding the following code:

var diff = swiper.isHorizontal() ? diffX : diffY;
if (!data.isMoved) {
    swiper.loopFix(diff > 0 ? 'left' : 'right');
}

Problem: Slider freezing

Another common issue with the nolimits4web Swiper library is that the slider can sometimes freeze. This can be caused by the loop fix method being called infinitely, which can cause the slider to become unresponsive.

Solution:

One solution to this issue is to comment out the following fragment of code:

if (needsLoopFix) {
    swiper.once('transitionEnd', function () {
        swiper.loopFix();
    });
}

This will prevent the loop fix method from being called infinitely and will help to prevent the slider from freezing.

Problem: Incorrectly display of slides

Another common problem with the nolimits4web Swiper library is that the slides can be displayed incorrectly. This can occur when the user tries to move to the left or right, and the loop fix method is not able to properly adjust the slider’s behavior.

Solution:

One solution to this issue is to add an argument to the loop fix method, which can be “left,” “right,” or undefined. This allows the method to determine the direction of the swipe and adjust the behavior of the slider accordingly. Additionally, modify the conditions of the loop fix method to take the argument into account. This can be done by adding the following code:

if ((typeof direction === 'undefined' || (typeof direction !== 'undefined' && direction === 'left')) && activeIndex < loopedSlides && !(activeIndex === previousIndex - 1 && previousIndex > loopedSlides / 2)) {
    // Fix For Negative Oversliding
} else if ((typeof direction === 'undefined' || (typeof direction !== 'undefined' && direction === 'right')) && (params.slidesPerView === 'auto' && activeIndex >= loopedSlides) || (activeIndex >= slides.length - loopedSlides)) {
    // Fix For Positive Oversliding
}

This will help to ensure that the loop fix method is able to properly adjust the behavior of the slider and prevent the display of incorrect slides.

A brief introduction to nolimits4web Swiper

nolimits4web Swiper is a popular JavaScript library for creating touch-enabled, responsive sliders and carousels. It is built with performance and flexibility in mind, and provides a wide range of customization options to suit the needs of any project.

The library utilizes the latest web technologies such as CSS3 transitions, transforms and animations to create smooth and visually pleasing transitions between slides. It also includes a variety of built-in navigation options, including pagination, navigation buttons, and scrollbar, as well as support for various touch and mouse events. Additionally, it is fully responsive and supports a wide range of screen sizes and devices. The library also provides a number of callbacks and APIs for integrating with other libraries and custom logic.

Most popular use cases for nolimits4web Swiper

  1. Implementing a responsive, touch-enabled carousel or slider on a website or web application. This can be achieved by initializing a new instance of the Swiper class and passing in a container element as well as options for configuring the behavior and appearance of the slider.
const swiperInstance = new Swiper(containerRef.current, {
    direction: 'horizontal',
    slidesPerView: 'auto',
    loopedSlides: 3,
    loop: true
});
  1. Creating a navigation system for a single page web application. The Swiper library allows for easy implementation of navigation between different sections of a webpage by assigning slide elements to correspond to different sections and using the built-in navigation methods to navigate between them.
  2. Developing a user interface for a mobile application. The Swiper library is optimized for touch-based interactions and can be used to create intuitive and responsive user interfaces for mobile apps. It also offers a wide range of customization options which can be used to create a unique and engaging experience for users.
Share

It’s Really not that Complicated.

You can actually understand what’s going on inside your live applications.

Try Lightrun’s Playground

Lets Talk!

Looking for more information about Lightrun and debugging?
We’d love to hear from you!
Drop us a line and we’ll get back to you shortly.

By submitting this form, I agree to Lightrun’s Privacy Policy and Terms of Use.