Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now
Light
Dark
System
Ask  Question

Sliders BUG


I really like this:
https://keenthemes.com/metronic/tailwind/demo1/public-profile/profiles/nft
But:
1) You cant scroll the cards with mouse on desktop (on mobile you can scroll theme).
2) Is possible to have this, outside a card will be cool for mobile.
<div class="flex gap-5 scrollable-x">
<div class="card shadow-none border-0 mb-5">
<div class="rounded-t-xl w-[280px] h-[240px] bg-cover bg-center" >
</div>
<div class="card-border card-rounded-b px-3.5 pt-5 pb-3.5">
<div class="pb-6">
<a class="font-media/images/600x600/ block font-medium text-gray-900 hover:text-primary text-md leading-4 mb-2" href="#">
Artistic Expressions
</a>
<div class="text-2sm text-gray-700">
Token ID:
<span class="text-2sm font-medium text-gray-800">
67890
</span>
</div>
</div>
<div class="grid grid-cols-2 items-center">
<div class="flex flex-col gap-2">
<span class="text-2sm text-gray-700">
Current bid
</span>
<div class="flex items-center gap-1">
<i class="ki-filled ki-xmr text-lg text-brand leading-none">
</i>
<span class="text-sm font-semibold text-gray-900 leading-none tracking-tight">
3.2 XMR
</span>
</div>
</div>
<div class="flex flex-col justify-self-end text-right gap-2">
<span class="text-2sm text-gray-700">
Ending in
</span>
<span class="text-2sm font-semibold text-gray-900 leading-none tracking-tight">
14h 30m 49s
</span>
</div>
</div>
</div>
</div>
<div class="card shadow-none border-0 mb-5">
<div class="rounded-t-xl w-[280px] h-[240px] bg-cover bg-center" >
</div>
<div class="card-border card-rounded-b px-3.5 pt-5 pb-3.5">
<div class="pb-6">
<a class="font-media/images/600x600/ block font-medium text-gray-900 hover:text-primary text-md leading-4 mb-2" href="#">
Digital Harmony
</a>
<div class="text-2sm text-gray-700">
Token ID:
<span class="text-2sm font-medium text-gray-800">
54321
</span>
</div>
</div>
<div class="grid grid-cols-2 items-center">
<div class="flex flex-col gap-2">
<span class="text-2sm text-gray-700">
Current bid
</span>
<div class="flex items-center gap-1">
<i class="ki-filled ki-xmr text-lg text-brand leading-none">
</i>
<span class="text-sm font-semibold text-gray-900 leading-none tracking-tight">
4.1 XMR
</span>
</div>
</div>
<div class="flex flex-col justify-self-end text-right gap-2">
<span class="text-2sm text-gray-700">
Ending in
</span>
<span class="text-2sm font-semibold text-gray-900 leading-none tracking-tight">
11h 15m 00s
</span>
</div>
</div>
</div>
</div>
<div class="card shadow-none border-0 mb-5">
<div class="rounded-t-xl w-[280px] h-[240px] bg-cover bg-center" >
</div>
<div class="card-border card-rounded-b px-3.5 pt-5 pb-3.5">
<div class="pb-6">
<a class="font-media/images/600x600/ block font-medium text-gray-900 hover:text-primary text-md leading-4 mb-2" href="#">
Geometric Patterns
</a>
<div class="text-2sm text-gray-700">
Token ID:
<span class="text-2sm font-medium text-gray-800">
81023
</span>
</div>
</div>
<div class="grid grid-cols-2 items-center">
<div class="flex flex-col gap-2">
<span class="text-2sm text-gray-700">
Current bid
</span>
<div class="flex items-center gap-1">
<i class="ki-filled ki-xmr text-lg text-brand leading-none">
</i>
<span class="text-sm font-semibold text-gray-900 leading-none tracking-tight">
3.8 XMR
</span>
</div>
</div>
<div class="flex flex-col justify-self-end text-right gap-2">
<span class="text-2sm text-gray-700">
Ending in
</span>
<span class="text-2sm font-semibold text-gray-900 leading-none tracking-tight">
10h 13m 32s
</span>
</div>
</div>
</div>
</div>
<div class="card shadow-none border-0 mb-5">
<div class="rounded-t-xl w-[280px] h-[240px] bg-cover bg-center" >
</div>
<div class="card-border card-rounded-b px-3.5 pt-5 pb-3.5">
<div class="pb-6">
<a class="font-media/images/600x600/ block font-medium text-gray-900 hover:text-primary text-md leading-4 mb-2" href="#">
Futuristic Sculptures
</a>
<div class="text-2sm text-gray-700">
Token ID:
<span class="text-2sm font-medium text-gray-800">
71045
</span>
</div>
</div>
<div class="grid grid-cols-2 items-center">
<div class="flex flex-col gap-2">
<span class="text-2sm text-gray-700">
Current bid
</span>
<div class="flex items-center gap-1">
<i class="ki-filled ki-xmr text-lg text-brand leading-none">
</i>
<span class="text-sm font-semibold text-gray-900 leading-none tracking-tight">
4.3 XMR
</span>
</div>
</div>
<div class="flex flex-col justify-self-end text-right gap-2">
<span class="text-2sm text-gray-700">
Ending in
</span>
<span class="text-2sm font-semibold text-gray-900 leading-none tracking-tight">
10h 30m 00s
</span>
</div>
</div>
</div>
</div>
<div class="card shadow-none border-0 mb-5">
<div class="rounded-t-xl w-[280px] h-[240px] bg-cover bg-center" >
</div>
<div class="card-border card-rounded-b px-3.5 pt-5 pb-3.5">
<div class="pb-6">
<a class="font-media/images/600x600/ block font-medium text-gray-900 hover:text-primary text-md leading-4 mb-2" href="#">
Enchanted Realms
</a>
<div class="text-2sm text-gray-700">
Token ID:
<span class="text-2sm font-medium text-gray-800">
67670
</span>
</div>
</div>
<div class="grid grid-cols-2 items-center">
<div class="flex flex-col gap-2">
<span class="text-2sm text-gray-700">
Current bid
</span>
<div class="flex items-center gap-1">
<i class="ki-filled ki-xmr text-lg text-brand leading-none">
</i>
<span class="text-sm font-semibold text-gray-900 leading-none tracking-tight">
5.3 XMR
</span>
</div>
</div>
<div class="flex flex-col justify-self-end text-right gap-2">
<span class="text-2sm text-gray-700">
Ending in
</span>
<span class="text-2sm font-semibold text-gray-900 leading-none tracking-tight">
15h 43m 23s
</span>
</div>
</div>
</div>
</div>
</div>


user
Test Ammissione 1 year ago
Tailwind 4
3 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)

user
Sean Author 1 year ago

Hi,

Sorry for the late reply. Could you please elaborate on your feedback? The horizontal scrollbar is not scrollable at all or barely scrollable?

Regards,
Sean


user
Test Ammissione 1 year ago

If you click on the card with the mouse you cant scrool it likes sliders o swipe, if you click on the scrool bar down work.
Do you understand?


user
Sean Author 1 year ago

Hi,

Noted, got your point.

Currently, our widget uses standard browser scroll to scroll the content.

In the upcoming updates, we do have plans to add a carousel component to scroll the content more smoothly.

Regards.


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(