Add a carousel

- [Instructor] Image sliders or carousels have been a prominent feature of websites for several years now. This is primarily because they offer visitors an automated, rotating set of linked images, with or without text in a single location providing a quick glimpse and access to content on the rest of the site, all without leaving the current page. Bootstrap includes a handy carousel feature that's easy to insert and customize, so let's do that now. We'll start by making sure we're in Live view.

Then in the code we'll select and delete that placeholder image that we added earlier. This will leave our cursor flashing in between the opening and closing div tag with the class "container-fluid". To add the carousel, go to the Bootstrap components section of the inset panel and click the Carousel icon. When the pop-up positioning dialogue box appears click the Nest option and give the computer a second to load all the required code.

Once that code has been loaded you'll see the sample carousel image and dummy text of the first slide. To see how the carousel looks, save the file and preview it in a browser. Notice how the carousel image doesn't fill the page all the way to the edges? That's because Bootstrap CSS for the slider includes some padding and margin spacing. To make the slider go full width we must create a new CSS style. To find the right selector we'll look in the code.

Any time you insert a carousel Dreamweaver will automatically add a numbered ID style to it. So that will be the selector we'll use for our new style. Place your cursor here inside the ID "carousel1" and then click the Add Selector link in the CSS designer panel. Click your Up Arrow once on your keyboard so that you're just creating a style for "carousel1". Then press Enter or Return and you can begin to add the properties for this style.

Set the padding on all four sides to zero pixels. Set the margin top to -20 pixels. And set both left and right margins to -14 pixels. This will perfectly match the margins of the nav bar. Next we can add all of the images. In Code view we'll find and click on the first instance of the "Carousal_Placeholder.png" graphic and use the Falter icon in the Properties Inspector to select the "hero1.jpg" file from our manage sites images folder.

We'll repeat this process for images "2" and "3". For our carousel we need four images so we can make a quick duplicate for the third slider image by locating that div in the Dom panel, right clicking on it and choosing Duplicate. We can then go back into the code and edit "hero3" to "hero4". Save and preview in a browser.

Looks like the image isn't spanning the full width of the site like it is in our mock up, so we'll need a new style that makes the images scale up and down with the browser. You'll find the code for this style inside the Exercises folder inside the HTML folder. Here's what the CSS should look like for regular and linked carousel images. Copy and paste this into your CSS. Once you add the style to your CSS your images should scale beautifully.

Almost done. The carousel currently has three target circles and we have four slides. To add a fourth target circle we can duplicate one of the list items with the data-target "carousel1" ID and then set the number to "3". The last step in customizing our carousel to match our layout is to remove the header and caption from each slide. These can be deleted by hand in Code view or by selecting each carousel caption div through the Dom panel.

Save your file and preview in a browser once more. Looks great! The carousel is now complete and we're ready to move on to adding content and more styles using the Photoshop extractor.