Portfolio for Gillian Maffit
Chapter 15

Creating a Sweet Content Slider

Chapter 15

In this chapter I learned how to create a content slider. I feel like this was an important thing to learn since I have seen this element on a lot of websites I view. The content slider I learned how to create uses a combination of HTML, CSS, and JavaScript. Content sliders come in many shapes and sizes and forms. Some are made up of multiple rows with the sliding happening both vertically and horizontally. Clicking on each link slides your content left and right depending on which content needs to be made visible.When you view a content slider, you only see one block of content at a time. The steps to creating a content slider are as follwed. First, wrap the content into a container whose size is the same as one block of the content. Once the container wraps the content, you clip the contents of everything around it to ensure only one block of your content is visible. The next step, which allows you to see the rest of your content, can be done in various ways. For the examples, I used a series of circular links that you can click. The last thing is to make the actual sliding work when each link is clicked. This involves some CSS tweaks along with some JavaScript. Below, I have the example from this chapter. Following the first example, I have the same this just with some edits done that can be seen and explained in the video on the side.


Before Video Edits:

After Video Edits: