feat: Drop image examples and carousel

[Jarsen136]

Thank you for your contribution to the KodaDot - One Stop Shop for Polkadot NFTs.

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

PR Type

• Bugfix
• Feature
• Refactoring

Needs Design check

• @exezbcz please review

Context

• Closes Drop image examples and carousel #6280
• Requires deployment <snek/rubick/worker>

Did your issue had any of the "$" label on it?

• My DOT address: Payout

Screenshot 📸

• My fix has changed UI

Copilot Summary

🤖 Generated by Copilot at a9dfde4

This pull request improves the image slider component for the unlockable campaign feature, by adding a looping feature, a text message, and custom styling. It also refactors some code, fixes some bugs, and adds some localization and constants. The main files affected are ImageSlider.vue, UnlockableContainer.vue, const.ts, en.json, and some style files.

🤖 Generated by Copilot at a9dfde4

Sing, O Muse, of the skillful coder who enhanced the image slider
With looping feature, text message, and custom styling for the arrows
He fetched and displayed the latest waifu images, DISPLAY_SLIDE_IMAGE_COUNT
And added the mint.unlockable.imageTip to the en.json file

[kodabot]

WARNING @Jarsen136 PR for issue #6280 which isn't assigned to you. Please be warned that this PR may get rejected if there's another assignee for issue #6280

[netlify]

✅ Deploy Preview for koda-canary ready!

Name	Link
🔨 Latest commit	e9aa60e
🔍 Latest deploy log	https://app.netlify.com/sites/koda-canary/deploys/649721816963c40008f161d0
😎 Deploy Preview	https://deploy-preview-6323--koda-canary.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.

[reviewpad]

AI-Generated Summary: This pull request introduces changes to drop image examples and enhance the carousel feature in the ImageSlider.vue and UnlockableContainer.vue components. It also adds necessary data and styles to const.ts, en.json, _carousel-arrows.scss, and global.scss files. The patch includes 58 new insertions and 13 deletions across 6 files.

[exezbcz]

looking good!

one thing to the carousel:

• it wont basically be a carousel, the images wont move, only 4 imgs total

limit the imgs displayed to only 4 and make it an infinite carousel

sorry for the confusion with an infinite one.

[prury]

@exezbcz is mobile ok to you or it should be aligned to the left?

[exezbcz]

@prury yeah, the copy that indicates that the preview is only one of many possible drops should not be 2 row

• then the preview on mobile should also be square - not changing the ar of 1:1

To reply to your original message: I don't really care :D Up to @Jarsen136 what he likes better

[codeclimate]

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

View more on Code Climate.

[Jarsen136]

I have made some updates according to the above comments. Pls check it. @exezbcz @prury

[exezbcz]

nice job! thanks