Swiper is encountering issues with resizing images correctly while the sidebar is in view

Question

Swiper is encountering issues with resizing images correctly while the sidebar is in view

I'm facing an issue with incorporating the Swiper slider on my webpage. While I have a sidebar displayed, the Swiper image does not resize properly when the screen resolution is set to 1680x1050. The image gets cut off, but when I hide the sidebar, the entire slide is displayed correctly.

For reference, you can view a demo at:

In the demo, there is a section with the Swiper slider and another section with an image and text where resizing works seamlessly - this is exactly what I am aiming to achieve with Swiper.

I have attempted adjusting settings in the main.css file, but unfortunately, I have not had any success in resolving the issue. Would someone be able to assist me with this problem? Thank you very much!

jquery html css

Answer 1

Answer №1

I'm not entirely sure if I understand, but the only way I can view a cropped image is when I navigate to the website by typing the following address in my browser: .

However, when I refresh the page, the image is no longer cropped. This could be related to the implementation of the Swiper in your ready/load events without access to your Javascript, it's hard to pinpoint the exact issue.

Upon further investigation... It seems like the Swiper initializes before the menu is opened, causing it to use 100% of the window width.

On the other hand, when I refresh the page, the image is not cropped because it dynamically adjusts the width based on window.width - menu.width. However, when I click on the menu, the slider shows part of the next slide, indicating that the Swiper is initialized after the menu is opened.

To resolve this, you may need to reinitialize the Swiper every time the menu is opened or closed, similar to how it behaves when the window is resized. Perhaps calling mySwiper.updateSize() in your Javascript file whenever these events occur could solve the issue.

Update:

I suggest moving the initialization logic to your Javascript file and calling mySwiper.updateSize() whenever the window is resized or the menu is toggled. This approach might resolve the cropping issue.

Update 2:

Finally, using mySwiper.update() instead of mySwiper.updateSize() at the end of the process seemed to work effectively.

Answer 2

I'm not entirely sure if I understand, but the only way I can view a cropped image is when I navigate to the website by typing the following address in my browser: .

However, when I refresh the page, the image is no longer cropped. This could be related to the implementation of the Swiper in your ready/load events without access to your Javascript, it's hard to pinpoint the exact issue.

Upon further investigation... It seems like the Swiper initializes before the menu is opened, causing it to use 100% of the window width.

On the other hand, when I refresh the page, the image is not cropped because it dynamically adjusts the width based on window.width - menu.width. However, when I click on the menu, the slider shows part of the next slide, indicating that the Swiper is initialized after the menu is opened.

To resolve this, you may need to reinitialize the Swiper every time the menu is opened or closed, similar to how it behaves when the window is resized. Perhaps calling mySwiper.updateSize() in your Javascript file whenever these events occur could solve the issue.

Update:

I suggest moving the initialization logic to your Javascript file and calling mySwiper.updateSize() whenever the window is resized or the menu is toggled. This approach might resolve the cropping issue.

Update 2:

Finally, using mySwiper.update() instead of mySwiper.updateSize() at the end of the process seemed to work effectively.

Answer 3

Answer №2

Encountered the same problem, but managed to find a solution using React Hooks. Hopefully this will assist someone else.

Start by importing swiper:

import SwiperCore, { Autoplay, Navigation, Pagination } from "swiper";

Initialize swiper instance using useEffect:

useEffect(() => {
    swiper = new SwiperCore(".swiper-container", {
      spaceBetween: 0,
      slidesPerView: 1,
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      updateOnWindowResize: true,
      loop: true,
      speed: 1200,
      pagination: {
        clickable: true,
        el: ".swiper-pagination",
      },
      autoplay: {
        delay: 4500,
        disableOnInteraction: false,
      },
    });
  }, []);

Also utilize another useEffect to observe the sidebar display. showLeftSideBar is a boolean parameter that changes based on the state:

useEffect(() => {
    if (swiper !== null) {
      swiper.update();
    }
  }, [showLeftSideBar]);

Showcasing the component code with Material UI:

<Box className={"swiper-container"}>
  <Box className={"swiper-wrapper"}>
      <SwiperSlide className={"swiper-slide"}>
        <Box>1</Box>
      </SwiperSlide>
      <SwiperSlide className={"swiper-slide"}>
        <Box>2</Box>
      </SwiperSlide>
      <SwiperSlide className={"swiper-slide"}>
        <Box>3</Box>
      </SwiperSlide>
  </Box>
  <Box className={"swiper-button-next"}>
    <ChevronRightIcon />
  </Box>

  <Box className={"swiper-button-prev"}>
    <ChevronLeftIcon />
  </Box>

  <Box className={"swiper-pagination"}></Box>
</Box>

This approach should resolve the issue at hand.

Answer 4

Encountered the same problem, but managed to find a solution using React Hooks. Hopefully this will assist someone else.

Start by importing swiper:

import SwiperCore, { Autoplay, Navigation, Pagination } from "swiper";

Initialize swiper instance using useEffect:

useEffect(() => {
    swiper = new SwiperCore(".swiper-container", {
      spaceBetween: 0,
      slidesPerView: 1,
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      updateOnWindowResize: true,
      loop: true,
      speed: 1200,
      pagination: {
        clickable: true,
        el: ".swiper-pagination",
      },
      autoplay: {
        delay: 4500,
        disableOnInteraction: false,
      },
    });
  }, []);

Also utilize another useEffect to observe the sidebar display. showLeftSideBar is a boolean parameter that changes based on the state:

useEffect(() => {
    if (swiper !== null) {
      swiper.update();
    }
  }, [showLeftSideBar]);

Showcasing the component code with Material UI:

<Box className={"swiper-container"}>
  <Box className={"swiper-wrapper"}>
      <SwiperSlide className={"swiper-slide"}>
        <Box>1</Box>
      </SwiperSlide>
      <SwiperSlide className={"swiper-slide"}>
        <Box>2</Box>
      </SwiperSlide>
      <SwiperSlide className={"swiper-slide"}>
        <Box>3</Box>
      </SwiperSlide>
  </Box>
  <Box className={"swiper-button-next"}>
    <ChevronRightIcon />
  </Box>

  <Box className={"swiper-button-prev"}>
    <ChevronLeftIcon />
  </Box>

  <Box className={"swiper-pagination"}></Box>
</Box>

This approach should resolve the issue at hand.

Swiper is encountering issues with resizing images correctly while the sidebar is in view

Answer №1

Answer №2

Similar questions

What is the best way to maintain scrollbars on mobile devices?

Tips for dynamically resizing the content area using CSS without the need for javascript

Adjust the size of a div element after updating its content using Mootools

Tips for showing a table during onfocus event?

The navigation bar seems to be malfunctioning as it is unable to direct users

I am looking to have the first option in the dropdown menu appear as a placeholder text

Is it feasible to activate a Bootstrap Tooltip from a different element?

Any tips on showing inline input within an li element?

Executing AJAX function via a dropdown button

How to effectively manage an overflowing navigation bar

execute ajax within a standalone javascript function

What is the best way to locate a particular JSON key value pair through JavaScript?

How can we adjust the flex values to ensure the label displays properly on a narrow container width?

Configure UL element as a dropdown on mobile devices and expand it to full width on desktop screens

Can someone guide me on replicating this design with Bootstrap?

``Is there a reason why JavaScript/jQuery events are not functioning properly within a PHP foreach

Each JSON document is returned as a single string rather than individual objects

What is the best way to conceal an HTML element on a particular page that is already styled as (visibility: visible), but only if its child has a specific class assigned to it?

Different ways to automatically trigger a function in JavaScript

Unable to decipher Material UI class names