BKWLD / vue-ssr-carousel

A performance focused Vue carousel designed for SSR/SSG environments.
https://vue-ssr-carousel.netlify.app
MIT License
133 stars 16 forks source link

Cloned slides in infinite mode is rendering without binded data #88

Open ErriourMe opened 2 years ago

ErriourMe commented 2 years ago

Nuxt 2.16, vue-ssr-carousel 1.4.2 (PR #84 too). I have slides with this content:

Code of carousel ```
{{ item.price }}
```
Code of WorkItem component ``` ```

It is assumed that left and right margins ("gutter" property) are added to the design so that the previous and next slides are visible. But in infinite mode I'm getting cloned component without any data. Because of this, the previous slide takes data by default from the component, which affects the display of content. In my case, this is a slide shift to the left, which causes a void to appear, and blinking when scrolling.

Even if I remove the code col-20 col-md-6 col-xl-4 col-xxl-4 from the default prop data, which adds an indent, I will still get an unloaded image when the site first loads.

Images of current problem How it is now: ![image](https://user-images.githubusercontent.com/43105218/187697332-9d119b48-9af0-4843-8c6c-a21c61113256.png) How it must be: ![image](https://user-images.githubusercontent.com/43105218/187698012-c605dd6d-9d2d-488c-8692-2c8d21563428.png) This problem is also visible in the page source code: ![image](https://user-images.githubusercontent.com/43105218/187700348-a5a6df2b-99e4-45d9-a744-7317bf3462d1.png)

I can't understand why it happens. This should to be fixed. Thanks!

weotch commented 2 years ago

Have you tried using the peeking props to accomplish this? They are intended for this use case (showing part of the next and previous slides).

ErriourMe commented 2 years ago

Yes, of course. It can be seen in the first picture. But the problem is that invisible slides (clones) are not rendering components with all parameters inside if this slides are visible through these indents (via peek prop).

All parameters that I use:

Parameters Data: ``` parameters: { showDots: false, showArrows: true, center: true, gutter: 0, loop: true, slidesPerPage: 5, paginateBySlide: true, peek: 'var(--works-gutter)', responsive: [ { maxWidth: 2100, slidesPerPage: 4, }, { maxWidth: 1500, slidesPerPage: 3, }, { maxWidth: 1200, slidesPerPage: 2, }, { maxWidth: 768, slidesPerPage: 1, }, ], }, ``` Peek via SCSS: ``` .works-scroll-block { --works-gutter: 90px; @media (max-width: 1700px) { --works-gutter: 60px; } @media (max-width: 1200px) { --works-gutter: 30px; } @media (max-width: 600px) { --works-gutter: 10px; } } ```

In any case, are the clones rendered incorrectly or is that what is planned?