search

ismail9k / vue3-carousel

Vue 3 carousel component
https://ismail9k.github.io/vue3-carousel/
MIT License
661 stars 164 forks source link

carousel/slide width not updating on page change #315

Closed nico-herrera closed 11 months ago

nico-herrera commented 11 months ago

Describe the bug When changing pages the slide is pushed over about 1/3 of a slide and does not readjust when running carouselRef.updateSlideWidth() or restartCarousel()

Expected behavior Carousel width to update on page visit

Screenshots Current problem: Screenshot 2023-06-06 at 9 30 34 AM

How it should look: Screenshot 2023-06-06 at 9 31 07 AM

Desktop (please complete the following information):

Additional context I have looked through the other issues but none work for me, i am on Nuxt ^3.3.3 and using vue3-carousel ^0.3.1

ismail9k commented 11 months ago

Hey Nico, in order to help you more could you share with me a working example that regenerates the issue?

nico-herrera commented 11 months ago

Hey there, yes i just got the deployment (bit old but issue is clear) https://abe-staging.azureedge.net/pup-star

Start at home hover over Franchises in Navigation bar click Pup Starz scroll down once page loads to bottom carousel and you will see

The carousel that is not working is nested in another carousel.

nico-herrera commented 11 months ago

Just wanted to share some new information, the nested carousel is actually not working because the parent carousel is not adjusting to the correct width of the viewport. I am running both updateSlideWith and restartCarousel methods on @init and it is still not working.

ismail9k commented 11 months ago

Hey @nico-herrera I've checked deeply your example, however, I could not find the main source of the issue, there're lots of styles and elements that could interfere with the carousel logic. Running updateSlideWith, will recalculate the carousel width based on its parent width; and since the parent width is not correct it will not fix the issue. I've created an isolated Nuxt app and used a nested carousel, but the issue is not reproducible after routing, so I guess it's a very special use case for your app. I am not sure how I can further help you with your issue, btw It's a very great website!

nico-herrera commented 11 months ago

Hey @ismail9k , thanks for taking the time to look into this! I agree there's a lot going on, it's not my own codebase so tracking down all the styling has been difficult. Ive found a temporary fix by reassigning the slide with to 33% of the window for the carousel of 3 and using a different option for anything else. I appreciate your response and help!