Tailwind image carousel3/21/2023 Our indicators will be circles that change color based on whether they are in the active viewport or not. Without this, the image divs would shrink automatically and the overflow-x-scroll property on the scrolling-content div wouldn’t do anything useful.Īt this point, we’ve got a simple scrolling image gallery, nice work! Now we’ll get into JavaScript land by adding indicators that show the user which images are currently on screen and that function as navigation buttons to scroll the content to the clicked indicator. This ensures the image divs don’t resize themselves to fit the viewport width using the CSS property flex-shrink: 0. Setting flex-shrink-0 to the individual image divs.That sets the div to flex the child divs and adds the horizontal scrolling behavior we’re looking for with the CSS property overflow-x: scroll Adding flex overflow-x-scroll to the scrolling-content div.Update the content of to include some basic container classes. We’ll start with a flex container to hold our slider’s header, which will be static, and the slider itself, which will scroll horizontally. Not quite what we want, but a good starting point. Open up slider.html and you’ll see some giant pictures of shoes. Go ahead and copy and paste the below into a file called slider.html or use a more exciting name. In a real project, you should probably use a build system but we don’t need all that to demonstrate the concept! You don’t need any knowledge of how Stimulus works, but if you’re brand new you might want to read the Stimulus Handbook to help solidify some concepts.įor simplicity, we’re just going to use a plain old HTML file and pull in Tailwind and Stimulus from a CDN. If you’ve never seen Tailwind before, some of the classes we add for styling might feel a little odd. I’m writing this assuming a solid understanding of HTML and CSS, and some level of comfort with JavaScript. To accomplish this, we’ll start with a plain HTML file, pull in Tailwind CSS to make things look nice, and use Stimulus to build interactivity for our position indicators and navigation buttons. Here’s what it will look like when we’re finished. Clicking on the indicators will scroll the corresponding item into view. As they scroll, indicators below the slider will update to show which items are visible on the screen. We’ll have a list of items of an arbitrary length, and our slider will allow folks to scroll to see every item in the list. Today we’re building a component that is common but deceptively tricky to get right - a horizontal slider with a position indicator and navigation buttons. Building a horizontal slider with Stimulus and Tailwind CSS
0 Comments
Leave a Reply.AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |