Posted on Oct 4 • Originally published at lynxdev.hashnode.dev Sliders, also known as carousels, are a popular tool for modern websites. They enable efficient transmission of information within a limited space.Developers often rely on frameworks to build sliders. Although productive, this method does not contribute much to your growth as a developer.Therefore, in this tutorial, we’ll adopt a more traditional approach to this project by using plain HTML, CSS, and JavaScript.Codepen here:Before proceeding, I want to introduce two fundamental concepts that this project relies on.Firstly, when you link a label Element to an input element, like this:Clicking that label on the webpage passes the focus to the linked input element, as shown below:This behavior is consistent even when you reposition either of the elements using CSS:The output:Furthermore, you can apply this concept to other input types, such as checkboxes, numbers, and text fields. This linking expands the clickable area of the input element, and, as you will discover later, it allows for some neat tricks.Secondly, using CSS pseudo-classes and combinators, you can dynamically change the styling of an element based on the current state of another element.Pseudo-classes allow you to style specific states of elements. For example, :hover targets an element’s state when you hover over it with your mouse. All pseudo-classes begin with a single colon (:).Several pseudo-classes in CSS allow you to target various states of elements, but I’ll draw your attention to the :checked pseudo-class in this tutorial. :checked is used to target the state when you toggle on a radio input or checkbox. For example, let’s consider our previous input element:This output:You can see that the browser applied the styles only after you toggled the radio on.Alternatively, combinators establish the connection between selectors. There are four types of combinators in CSS:Here, we’ll focus on the general sibling combinator. The general sibling combinator allows you to style sibling elements in your HTML. For example, consider the following CSS rule:This selector initially identifies any element in our HTML with a class of .child1. It then applies the specified styles to any of its younger siblings with a class of .child2, as demonstrated below:You should note the following about any two elements connected in this way:Putting it all together, and still on our input and label elements from before, we have:The output:As you can see, we dynamically changed the styling of a sibling element(label) based on the :checked state of the input element.With all that out of the way, we can continue with our program.Our first task is to create a section of class slider within the body element.Within this section, we’ll add:Our HTML section is now complete. You can copy this into your editor. As you can see, our webpage is starting to take shape:You can adapt most of the styling of this project to your specific use case. However, in this section, I’ll explain the fundamental style decisions that make this project work.Firstly, let’s remove the default margins, paddings, and box-sizing present on each element using the global selector (*). This improves control over element styling and reduces variations across browsers,Next, the :root selector allows you to create custom variables that can reused throughout your style sheet. We’ll use color: #333; numerous times in our style sheet, and creating a custom variable is essential to avoid repetition.Note that we can later access this custom variable using color: var(--primaryColor);.Now, for our body element:Here, we set the following properties:Our webpage should look like this:This will serve as a container to showcase our slides.The output:Note that the borders are only present for visualization purposes, and we’ll remove them later.In this section, we’ll arrange the slides horizontally using Flexbox.Moreover, this section serves as the dynamic part of our project. To achieve this, it needs to have absolute positioning so we can adjust it relative to its relatively positioned parent(.slider).In this section, we’ll style each of our slides. We’ll start with the general layout by styling all elements with a class of .slide. We’ll then target each slide using the :nth-child pseudo-class.The output:For our navigation, let’s style each label to look like radio inputs.Here’s what the navigation should look like:As mentioned earlier, the :checked pseudo-class allows access to the checked state of radio inputs. And when used with the general sibling combinator (~), grants access to their younger siblings:Starting with .slides-flex:In CSS, when you use a percentage value to position an element, that value is relative to the width of its parent element. So, when you set left: -100%;, it shifts the element to the left, outside its parent element, at a distance equal to 100% of its parent’s width, as demonstrated below:As a reminder, we previously defined the width of .slides-flex to be four times(400%) that of .slider. Therefore, setting left: -100%; simply shifts .slides-flex by one-quarter of its width to the left, bringing a new slide to focus.Looking at the image below, clicking each button after the first subtracts an additional 100% from the position of.slides-flex, bringing the slide at that position into focus.Now for .navigation, so we can know what slide we’re in:Notice how, first, we selected the parent element of the buttons, which is a sibling to the radio inputs. Then, we accessed each button using the descendant combinator (space).Now, when we click any button, it changes its background color then brings a corresponding slide into focus, as shown below:Rounding up, to ensure that only the selected slide is visible, let’s uncomment the line overflow: hidden; in our .slider styling. This change hides content outside the boundaries of the parent element, which, in this case, includes all other slides.We can also comment out the border styling while at it:The output:Finally, if you look at the image above, you’ll see that upon reload, no label is checked, and users won’t know what slide they are currently on. To avoid this, let’s add the checked attribute to our #radio1. This checks the first radio input on every reload, indicating that we are currently on the first slide.The output:That concludes the CSS part. So far, we’ve implemented the sliding animations and manual navigation. Regrettably, for the sake of brevity, we must pause here. I’ll release a sequel to this article covering the JavaScript part, allowing us to achieve the:In this tutorial, we’ve learned that not all webpage functionality needs to rely solely on JavaScript. By utilizing CSS pseudo-classes and combinators, we dynamically modified our webpage elements—a task that might otherwise have cost us several lines of JavaScript code.In the end, if you’ve learned anything new, consider dropping a like and sharing so others can benefit as well. Until next time.Find out more on:Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse stereobooster - Sep 17 Yogesh Chavan - Sep 23 Ksenia Kondrashova - Sep 28 Ethan - Sep 4 Once suspended, lynxdev32 will not be able to comment or publish posts until their suspension is removed. Once unsuspended, lynxdev32 will be able to comment and publish posts again. Once unpublished, all posts by lynxdev32 will become hidden and only accessible to themselves. If lynxdev32 is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to Ayobami Ajayi. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag lynxdev32: lynxdev32 consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging lynxdev32 will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.