#JAVASCRIPT SIMPLEIMAGE FREE#

Once we get that object, we can target the marginright property…but it’s a string, “16px”. The reason for the two approaches is that different browsers call this object different things, so we have to try both ways. To get that value, we have to do what’s written on line 12 below, which tries two ways to get the externally defined style object for the card element. We want the style we wrote in a separate stylesheet. You can only use “()” if you define an inline style in the html, which we didn’t do. And for the card margin, it’s even trickier. Instead, you must use carousel.Offsetwidth. Unfortunately, you can’t do “carousel.Width()” to get the width of the carousel. One thing that’s a bit tricky in this step is the way we get these properties. To do that, we need to know the width of the visible part of the carousel, and the margin-right property assigned to the cards (without accounting for the margin, you wind up with the cards sliding into a final position that’s just a little off). Note, however, that you don’t always have to start from the document root (document.Queryselector()). Queryselector() method and our handy data attribute that we set up in the html. The first step we’ll take is to select the necessary elements using a common approach, the.

#JAVASCRIPT SIMPLEIMAGE FREE#

So if you see something you’d do differently, that’s totally cool and you should feel free to do so!

That way the parent class acts as a mask for any underlying cards in the carousel, and we only see 3 at a time.Īnd now for the moment, you’ve been waiting for, the javascript! As with the above html and css, there are many ways to make a carousel. In our parent class, it’s most important that the overflow is hidden, and that the width is explicitly set. Without dwelling on it for too long, let’s glance at the css we’ll need. People are more likely to leave a piece of markup alone if they don’t understand it, or if it looks important, which data attributes usually do. This approach reduces the risk of someday having a class name accidentally deleted or changed by someone else. Rather than using class names to target elements in the future, the html below uses data attributes, such as “target” and “action,” with respective values.

Javascript simpleimage