Fix peeking with disabled state

[weotch]

Fixes #95

[codesandbox]

  Open in CodeSandbox Web Editor | VS Code | VS Code Insiders

[netlify]

✅ Deploy Preview for vue-ssr-carousel ready!

Name	Link
🔨 Latest commit	dbdff2c
🔍 Latest deploy log	https://app.netlify.com/sites/vue-ssr-carousel/deploys/632e23a133e24b0008123c1e
😎 Deploy Preview	https://deploy-preview-102--vue-ssr-carousel.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[weotch]

@fgrasu can you let me know if this fixes your issue from #95? You can use this branch if you change your version constraint to vue-ssr-carousel: BKWLD/vue-ssr-carousel#dbdff2cc

[cypress]

---

Test summary

14 • 0 • 0 • 0

---

Run details

Project	vue-ssr-carousel
Status	Passed
Commit	dbdff2c
Started	Sep 23, 2022 9:23 PM
Ended	Sep 23, 2022 9:25 PM
Duration	02:16 💡
OS	Linux Ubuntu - 20.04
Browser	Electron 102

View run in Cypress Dashboard ➡️

---

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

[fgrasu]

hi @weotch, thanks for working on this issue. it's a partially fix, if you remove the :slides-per-pages="4" from default props or if you have another slidesPerPage in responsive, something like this:

then the carousel is still broken.
btw, I used your branch as a version like you said but I didn't get the changes, I applied the style changes manually. maybe I did something wrong idk.

[weotch]

I couldn't reproduce the issue you're mentioning with those props.

It looks wonky, but that's just because it's trying to cram 10 in that space.

[fgrasu]

Oh.. I was thinking that, if the slidesPerPage value is higher that the carousel length, it should take the carousel length value instead. that way will not look wonky, it will display 2 slides to fill the viewport (without peeking, if any is set, because doesn't make sense in this case).
In your code above, can you try to delete the :slides-per-pages="4" from default props? there are no slides displayed. Can you reproduce that?

[weotch]

Oh.. I was thinking that, if the slidesPerPage value is higher that the carousel length, it should take the carousel length value instead. that way will not look wonky, it will display 2 slides to fill the viewport (without peeking, if any is set, because doesn't make sense in this case).

I think with same layouts, you'd want the width of the slides to be consistent, even if there weren't enough to fill the carousel width. Like maybe you don't want to scale up a slide to 100% if there was only one. If you are rendering your slides with a v-for, I think you could accomplish what you're after with:

<ssr-carousel :slides-per-page='Math.min(10, slides.length)'>
  <slide v-for='for slide in slides' />
</ssr-carousel>

In your code above, can you try to delete the :slides-per-pages="4" from default props? there are no slides displayed. Can you reproduce that?

Still seems fine to me, unless codesandbox isn't updating like it should.

[fgrasu]

It seems like if you set peek="0" with 0 as a string you might have some issues. that's why you couldn't reproduce my scenario. :peek="0" will work just fine.
Thanks for patience. I'm good with your PR solution