Image Carrousel
I want to add image carrousel to my view page , how can I do that ? , I searched for plugins , but nothing found
17 Replies
I have creted a custom entry and use 'slick-carousel' and register the assets using : //code FilamentAsset::register([
Css::make('custom-stylesheet', DIR . '/../../resources/css/custom.css'),
]);
@Oumaima What was the solution for image carousel?
Can you please share the same
for sure ! you create a custom entry like this : https://filamentphp.com/docs/3.x/infolists/entries/custom
then , I installed this : https://kenwheeler.github.io/slick/
slick - the last carousel you'll ever need
slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more!
and register the assets in AppProvider like this : FilamentAsset::register([
Css::make('custom-stylesheet', DIR . '/../../resources/css/custom.css'),
]);
and create the carousel instance in the blade
Okay, Thanks a lot. Let me implement
Hey
I have implemented, but it's side effects on top bar
Yes, Got the solution on above issue:
Just need to put before loading styles:
@livewireStyles
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>
<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css"/>
And for scripts, put before loading scripts:
@livewireScripts
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
May it will use for you or other guy's
noooo please please do not use jQuery 😭
Since Alpine is bundled in, use that instead:
https://codesandbox.io/s/tailwind-alpine-js-carousel-ibrvzc
druidmaciek
CodeSandbox
Tailwind + Alpine.js Carousel - CodeSandbox
Tailwind + Alpine.js Carousel by druidmaciek
Okay, Thanks
I will implment that
But I required like this which available to slick
How I can achieve this one in tailwind and alpine Js, if any demo or idea?
https://codepen.io/KevinBatdorf/pen/gOPxojN
Instead of buttons, render images for the thumnails instead.
Okay, nice idea. Thanks
But as of now will done with JQuery of slick slider due to requirement.
Is it possible to open the carousel in a modal window from a table image? And How?