Suggestion for FrontEnd lessons here in Laracasts

Hey guys I just have a suggestion for future lessons, in terms of new content for what potentially be a new lesson, and that's about working with images, creating an image slider and having it all in a good working dynamically, reusable component. TLDR: You can implement a JS library like Flickity inside your foreach and that will have you running images in no time, but it would be cool to see a Laravel solution (possibly with Alpine or Livewire?) that can make this happen.

Not long ago I implemented an image slider using vanilla Javascript and one of the initial walls I hit was, how do I work with my images, more precisely, how do I render an array of images in to the page and then navigate through them?

Initially I kept having troubles with rendering my images and this was mostly because I had an anon Blade component and I was trying to use the property on itself, but that never would've worked unless I had made that a global variable, probably with the help of a View composer. But anyway I found that I couldn't use {{ $images }} inside of the component, so I opted for using it directly on the page. With this I learnt that it is not recommended to use Model instances on the views, at least it's not that recommended or not willingly, probably due to security concerns? but that was my impression. In my case the matter was a bit more complicated because I was using Livewire and that added a layer of complexity because I had to discern when I was working with Livewire and when I was working with a Laravel Controller, I was using the data (once stored via a Controller) inside a Livewire view component. Again very complicated for my first attempt, I was also rendering this Livewire component inside index.blade.php which was the view attached to the index(). DId not used any variables for the Livewire component on the index, but it made things difficult for me. I realize Livewire might be out of the scope of learning about sliders, but I was trying to implement it in a Datatable.

So after I figured how to use that variable, I then started to think how I would show the images, I knew I had to use Javascript but on the first few attempts I remember using the Blade's loop variables, this because Blade provides the user with variables that can be implemented to an array. So I used a ternary operator and some variables like $loop->index, $loop->count, $loop->first and many more, my goal was to hide or show a specific position with Tailwind's hidden and, with a custom class, coming from the initial attempts from the Javascript I ended up using. But this "class-swap" also didn't worked.

What worked eventually was using good old Javascript and that's it, after reviewing and researching the almighty Google, I finally had come to a conclusion. I didn't used any JS libraries but I could've, and that would've been super helpful, but anway before I wrap this up, I must say that I had an image slider, but what about making it reusable? Yes, more work. I pulled it through with the help of someone on StackOverflow and finally the component was done, but:

1. If you ask me, I wouldn't do this again: I don't think it's a simple task, your best bet is to use a library like Flickity, or Splide, or Glide.

Anyway I was pretty happy with the results. I don't want to keep the post any longer than what it already is but I just hope someone considers this because it is very common thing to see on a webpage and I don't think there's one lesson about this on Laracasts also sliders, or carousels are pretty cool :-) I'd recommend anyone to checkout Flickity, it's super convenient, you can use HTML data-attributes so you don't need any Javascript.

Thanks for reading!