Add a body selector and set the following: Set the font family to sans-serif. Add a class called text-center and set it to align text to the center. Create an id called slideshow: Set the margin to 80px (up/down) and auto (left/right). Set the position to relative. Set the height and width to 240px. Set the padding to 10px. set the box shadow with the following:
CSS
Add a body selector and set the following:
Set the font family to sans-serif.
Add a class called text-center and set it to align text to the center.
Create an id called slideshow:
Set the margin to 80px (up/down) and auto (left/right).
Set the position to relative.
Set the height and width to 240px.
Set the padding to 10px.
set the box shadow with the following:
height offset: 0
vertical offset: 0
blur: 20px
color: rgba color of black with an opacity of 0.4 (HINT: Make sure to apply the opacity to the box-shadow, not the image.)
Create another id of slideshow with a child of div:
Set the position to absolute.
Set the top, left, right, and bottom to 10px.
HTML
At the top of your HTML page, create an h1 tag with a class of text-center. The content of that h1 tag should say Lesson 11 Project.
In the body of your HTML, create the following:
Create a div with an id of slideshow.
Inside that id, create 3 div tags.
Inside each div tag, add an img tag.
Go to the web and find 3 images that are 240px by 240px.
In each image tag, add one of your found images.
JavaScript
- Using the jQuery selector, set your slideshow with a child of div to a gt selector of 0. (If you need a refresher on using selectors in jQuery, review jQuery Selectors(opens in a new tab).)
- Apply the hide method to it.
- Then create a setInterval method and inside it, add an anonymous function.
- Set the function to locate the id for slideshow and its children. Use the "first" pseudo class to get the first one.
- Apply the fadeOut method at 1000 ms.
- Apply the next().
- Apply the fadeIn method at 1000 ms.
- Apply the end() method.
- Apply the appendTo method with an id of slideshow.
- Set the interval time to 3000.
Step by step
Solved in 2 steps
