Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

centeredSlides with centeredSlidesBounds don't work correct when slidesPerView: 'auto' and width of the swiper bigger then width of slides #7696

Merged
merged 1 commit into from
Aug 26, 2024

Conversation

AzA-95
Copy link
Contributor

@AzA-95 AzA-95 commented Aug 22, 2024

Demo here https://jsfiddle.net/pbL17azg/
Try run demo and resize window to breakpoin to 800px or bigger and click to (Slide arrow) to reproduce bug
Added video for visuality bug.
https://github.com/user-attachments/assets/f93246c5-50d9-4bdf-9a98-83300189418d

Bug reproduction if the swiper width bigger then the total width of slides and has option slidesPerView with value 'auto' .

…slidesPerView: 'auto' and width of the swiper-container bigger then width of slides
@nolimits4web
Copy link
Owner

Merged, thanks!

@michellavezzo
Copy link

michellavezzo commented Aug 28, 2024

I think this broke my slide,

The correct width is not being respected and the card is cut at the right side.

image
        effect: "coverflow",
        centeredSlides: true,
        slidesPerView: 3,
        initialSlide: 2,
        preventClicks: true,
        loop: true,
        preventClicksPropagation: true,
        coverflowEffect: {
            rotate: -23,
            stretch: 0,
            depth: 350,
            modifier: 1,
            slideShadows: false,
        },
        navigation: {
            nextEl: '.plans-swiper-button-next',
            prevEl: '.plans-swiper-button-prev',
        },
        
       ```

@AzA-95
Copy link
Contributor Author

AzA-95 commented Sep 18, 2024

I think this broke my slide,

This PR didn't broke your slide, because changes in the PR not applied on your code. The PR changes applied only with slider options (centeredSlides with centeredSlidesBounds)
See if conidition here d3bf90e#diff-511c7704bb690cc909d1f14ac2dbf0281502f49307c8be99979e7552c0eb5263R252

effect: "coverflow", centeredSlides: true, slidesPerView: 3, initialSlide: 2, preventClicks: true, loop: true, preventClicksPropagation: true, coverflowEffect: { rotate: -23, stretch: 0, depth: 350, modifier: 1, slideShadows: false,}, navigation: { nextEl: '.plans-swiper-button-next', prevEl: '.plans-swiper-button-prev',},

In your code options I see only option(centeredSlides: true without centeredSlidesBounds)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants