fix: 4956 move by 3 slides

[maderi21]

Thank you for your contribution to the KodaDot NFT gallery.

👇 _ Let's make a quick check before the contribution.

PR Type

• Bugfix
• Feature
• Refactoring

Context

• Closes Scrolling carousel by whole page #4956
• Requires deployment <>

Before submitting pull request, please make sure:

• My contribution builds clean without any errors or warnings
• I've merged recent default branch -- main and I've no conflicts
• I've tried to respect high code quality standards
• I've didn't break any original functionality
• I've posted a screenshot of demonstrated change in this PR

Optional

• I've tested it at </bsx/collection>
• I've tested PR on mobile
• I've written unit tests 🧪
• I've found edge cases

Had issue bounty label?

• Fill up your KSM address: Payout

Community participation

• Are you at KodaDot Discord?

Screenshot 📸

• My fix has changed something on UI; a screenshot is best to understand changes for others.

Urban.23._.Low.Carbon.NFTs.-.Google.Chrome.2023-02-10.16-39-06.mp4

[kodabot]

SUCCESS @maderi21 PR for issue #4956 which is assigned to you. Please wait for review and don't hesitate to grab another issue in the meantime!

[netlify]

✅ Deploy Preview for koda-nuxt ready!

Name	Link
🔨 Latest commit	231fed7
🔍 Latest deploy log	https://app.netlify.com/sites/koda-nuxt/deploys/63e9ef35e94c5a000835d44c
😎 Deploy Preview	https://deploy-preview-4967--koda-nuxt.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.

[exezbcz]

hey hey, good job

Lets remove the carousel indicator, now its misleading on which stage of the carousel you are and it does not even work on dark mode :D

Next thing are the arrows.

• hide them when you reach the end

I suppose we'll apply this behavior to all carousels.

[maderi21]

@exezbcz arrows are hiding now at the end, I'm only not sure about the last sentence

I suppose we'll apply this behavior to all carousels.

I've applied the arrow hiding to all carousels, however the slideIndex is set to 3 only for gallery item, quote from the issue spec:

Now I would suggest try it just at gallery item for now.

One note, maybe it would be good idea to set the sliding not based on an arbitrary number (3) but on the perView setting based on the breakpoints:

breakpoints: {
      '(min-width: 640px)': {
        slides: { perView: 1.5, spacing: 32 },
      },
      '(min-width: 768px)': {
        slides: { perView: 2.5, spacing: 32 },
      },
      '(min-width: 1024px)': {
        slides: { perView: 3, spacing: 32 },
      },
      '(min-width: 1280px)': {
        slides: { perView: 4, spacing: 32 },
      },
    },

set at 3 for now though, let me know if more adjustments are needed.

[exezbcz]

@exezbcz arrows are hiding now at the end, I'm only not sure about the last sentence

I suppose we'll apply this behavior to all carousels.

I've applied the arrow hiding to all carousels, however the slideIndex is set to 3 only for gallery item, quote from the issue spec:

Now I would suggest try it just at gallery item for now.

One note, maybe it would be good idea to set the sliding not based on an arbitrary number (3) but on the perView setting based on the breakpoints:

breakpoints: {
      '(min-width: 640px)': {
        slides: { perView: 1.5, spacing: 32 },
      },
      '(min-width: 768px)': {
        slides: { perView: 2.5, spacing: 32 },
      },
      '(min-width: 1024px)': {
        slides: { perView: 3, spacing: 32 },
      },
      '(min-width: 1280px)': {
        slides: { perView: 4, spacing: 32 },
      },
    },

set at 3 for now though, let me know if more adjustments are needed.

yup, correct, looks ok

We will put it on the landing page as well. The spec was restricted to gallery so we can decide whether its better :D

Changes:

• Can we add an opacity animation to the arrow so it doesn't disappear instantly?

otherwise good, nice job!

[maderi21]

Can we add an opacity animation to the arrow so it doesn't disappear instantly?

added 👍

[roiLeo]

Wouldn't it be better to create a step prop for CarouselIndex?
So that we can easily change the value

[codeclimate]

Code Climate has analyzed commit 231fed7 and detected 0 issues on this pull request.

View more on Code Climate.

[roiLeo]

✅ wfm

[yangwao]

pay 60 usd

[yangwao]

😍 Perfect, I’ve sent the payout
💵 $60 @ 30.69 USD/KSM ~ 1.955 $KSM
🧗 JHJGu2aWyAFBfcso8bR7ma82p15YAavyN6vQfJyWuhniNGa
🔗 0x377309e03da58dca69f07bd9e0358102b73d61ae19bb0d06bfb5810626b6cb01

🪅 Let’s grab another issue and get rewarded!
🪄 github.com/kodadot/nft-gallery/issues