fix: Cycling trough examples not working properly on drops

[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

Needs QA check

• @kodadot/qa-guild please review

Context

• Closes Cycling trough examples not working properly on drops #7593
• 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 2f10b81

Improved the functionality and code quality of the image slider component for unlockable collections. Refactored the component to use the useKeenSlider hook and the slider methods from keen-slider.

🤖 Generated by Copilot at 2f10b81

Oh we're the keenest crew on the web, me hearties
We use the useKeenSlider hook with ease
We simplify the code and we fix the bugs
And we navigate the slider as we please

[kodabot]

SUCCESS @Jarsen136 PR for issue #7593 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-canary ready!

Name	Link
🔨 Latest commit	2f10b81
🔍 Latest deploy log	https://app.netlify.com/sites/koda-canary/deploys/65258f352870d90008073a87
😎 Deploy Preview	https://deploy-preview-7598--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 configuration.

[codeclimate]

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

View more on Code Climate.

[reviewpad]

AI-Generated Summary: This pull request includes changes in the ImageSlider.vue component. The modifications handle issues in the cycling through examples on drops. The primary changes involve repurposing the previous implemented custom slider logic and instead leveraging built-in prev() and next() functions for navigation. The fixed bug transforms the click events on "arrow-left" and "arrow-right" to use these methods to navigate through the slides. In addition to this, it also changes the import statement for useKeenSlider from the ES module to the regular Vue module. The previously calculated sliderSettings have been removed in favor of this simpler approach. With these changes, the code becomes cleaner and easier to maintain.

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.8% Duplication

[yangwao]

pay 30 usd

[yangwao]

😍 Perfect, I’ve sent the payout
💵 $30 @ 3.78 USD/DOT ~ 7.937 $DOT
🧗 16SjUbGKSdjCdWTy3NNT3JxbRVGGqD4mwkHpc6BD9U2Rp29Z
🔗 0x3ed3c8c8dbc0a5673907df903dae61916eb1fe3da718d241661bead59a68c276

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