I have good news for you. Things are about to get even more awesome. Not only do I have new variations on that theme, my style of coding has... evolved, since.
We're still going to make a carousel today, but this one will be a single slide one. You will be able to slide left and slide right, and if you do nothing, the carousel moves all on its own.
Ready? Let's do it.
Before we begin, I'm reusing the pictures of my nephew Paul. He's a lot bigger now, and an absolute nightmare to keep up with. Save these pictures in the img folder. |
| 00.jpg |
 |
| 01.jpg |
 |
| 02.jpg |
 |
| 03.jpg |
 |
| 04.jpg |
Here's the starting HTML. Note that in the CSS, I've set a few defaults, such as font size. All divs have a red outline.
<!DOCTYPE html>
<html>
<head>
<title>Slide Carousel</title>
<style>
div {outline: 1px solid #FF0000;}
body
{
font-size: 12px;
font-family: verdana;
}
</style>
<script>
</script>
</head>
<body>
</body>
</html>
<html>
<head>
<title>Slide Carousel</title>
<style>
div {outline: 1px solid #FF0000;}
body
{
font-size: 12px;
font-family: verdana;
}
</style>
<script>
</script>
</head>
<body>
</body>
</html>
Add a div, and give it the id of carouselContainer.
<body>
<div id="carouselContainer">
</div>
</body>
<div id="carouselContainer">
</div>
</body>
Here, we are going to style carouselContainer, define its size and set its margin. The size should not be all that important for the purposes of getting the carousel to work, but I think a 800 by 600 display makes the pictures look good.
div {outline: 1px solid #FF0000;}
body
{
font-size: 12px;
font-family: verdana;
}
#carouselContainer
{
width: 800px;
height: 600px;
margin: 0 auto 0 auto;
}
body
{
font-size: 12px;
font-family: verdana;
}
#carouselContainer
{
width: 800px;
height: 600px;
margin: 0 auto 0 auto;
}
A good start!
It's time to make your viewport. Add this div into the carouselContainer div. The id shall be viewport.
<div id="carouselContainer">
<div id="viewport">
</div>
</div>
<div id="viewport">
</div>
</div>
Style this div. It will take up 80% of its parent's width and all of its parent's height, and be floated left.
#carouselContainer
{
width: 800px;
height: 600px;
margin: 0 auto 0 auto;
}
#viewport
{
width: 80%;
height: 100%;
float: left;
}
{
width: 800px;
height: 600px;
margin: 0 auto 0 auto;
}
#viewport
{
width: 80%;
height: 100%;
float: left;
}
See that smaller rectangle that now appears on inside the carouselContainer div? That's the viewport div.
Now let's add the margins. Add a div before the viewport div, and after. They will be styled using the margin CSS class.
<div id="carouselContainer">
<div class="margin">
</div>
<div id="viewport">
</div>
<div class="margin">
</div>
</div>
<div class="margin">
</div>
<div id="viewport">
</div>
<div class="margin">
</div>
</div>
Here, let's write the margin CSS class. It will take up 10% of its parent's width, all of its height and float left. Added some font specification in there too.
#carouselContainer
{
width: 800px;
height: 600px;
margin: 0 auto 0 auto;
}
.margin
{
width: 10%;
height: 100px;
float: left;
text-align: center;
font-size: 5em;
}
#viewport
{
width: 80%;
height: 100%;
float: left;
}
{
width: 800px;
height: 600px;
margin: 0 auto 0 auto;
}
.margin
{
width: 10%;
height: 100px;
float: left;
text-align: center;
font-size: 5em;
}
#viewport
{
width: 80%;
height: 100%;
float: left;
}
The margins each take up 10% width, and the viewport div takes up 80%. Altogether, they fill up the carouselContainer div nicely.
I'm going to deal with buttons next!
This one's pretty straightforward. I'm adding input buttons in each div that is styled using margin. One points left and one points right.
<div id="carouselContainer">
<div class="margin">
<input type="button" value="◄"/>
</div>
<div id="viewport">
</div>
<div class="margin">
<input type="button" value="►"/>
</div>
</div>
<div class="margin">
<input type="button" value="◄"/>
</div>
<div id="viewport">
</div>
<div class="margin">
<input type="button" value="►"/>
</div>
</div>
Pretty basic.
Styling these buttons is really up to personal taste. So set whatever colors you want, and feel free to get fancy using the hover pseudoselector. This is pretty much a matter of aesthetics. Though I'd strongly recommended setting a top margin. In this case, I've given it 250 pixels.
.margin
{
width: 10%;
height: 100px;
float: left;
text-align: center;
font-size: 5em;
}
.margin input[type="button"]
{
color: rgba(0, 0, 0, 1);
cursor: pointer;
margin-top: 250px;
width: 50px;
height: 50px;
border-radius: 50%;
border: 0px solid red;
background-color: rgba(255, 200, 0, 1);
color: rgba(255, 255, 255, 1);
}
.margin input[type="button"]:hover
{
background-color: rgba(255, 200, 0, 0.5);
}
#viewport
{
width: 80%;
height: 100%;
float: left;
}
{
width: 10%;
height: 100px;
float: left;
text-align: center;
font-size: 5em;
}
.margin input[type="button"]
{
color: rgba(0, 0, 0, 1);
cursor: pointer;
margin-top: 250px;
width: 50px;
height: 50px;
border-radius: 50%;
border: 0px solid red;
background-color: rgba(255, 200, 0, 1);
color: rgba(255, 255, 255, 1);
}
.margin input[type="button"]:hover
{
background-color: rgba(255, 200, 0, 0.5);
}
#viewport
{
width: 80%;
height: 100%;
float: left;
}
There you go. You'll notice that once you set the top margin, the heights of the containing divs collapse. Maybe one day we'll examine this phenomenon, but for now it really doesn't matter. We wanted the margin CSS class to take up horizontal space, and it's done so.
Now for the viewport...
Append a div within the viewport div, and give it an id of contentContainer.
<div id="carouselContainer">
<div class="margin">
<input type="button" value="◄"/>
</div>
<div id="viewport">
<div id="contentContainer">
</div>
</div>
<div class="margin">
<input type="button" value="►"/>
</div>
</div>
<div class="margin">
<input type="button" value="◄"/>
</div>
<div id="viewport">
<div id="contentContainer">
</div>
</div>
<div class="margin">
<input type="button" value="►"/>
</div>
</div>
Style it. It should take up twice its parent's width, and all of its height. Also, give it a soothing green background so we see what we're dealing with here.
#viewport
{
width: 80%;
height: 100%;
float: left;
}
#contentContainer
{
width: 200%;
height: 100%;
background-color: #004400;
}
{
width: 80%;
height: 100%;
float: left;
}
#contentContainer
{
width: 200%;
height: 100%;
background-color: #004400;
}
You'll see that the div overflows its bounds. This is deliberate, because it's part of the setup.
Now, within the contentContainer div, create two divs with ids content0 and content1 respectively. The first one will be styled using the CSS class content.
<div id="viewport">
<div id="contentContainer">
<div id="content0" class="content"></div>
<div id="content1"></div>
</div>
</div>
<div id="contentContainer">
<div id="content0" class="content"></div>
<div id="content1"></div>
</div>
</div>
Now style content. It will take up half of its parent's width (which will be 100% of viewport's width because contentContainer takes up twice as much width as viewport), all of its height and has a deep blue background for visualization. Make sure it floats left, too.
#contentContainer
{
width: 200%;
height: 100%;
background-color: #004400;
}
.content
{
width: 50%;
height: 100%;
float: left;
background-color: #000044;
}
{
width: 200%;
height: 100%;
background-color: #004400;
}
.content
{
width: 50%;
height: 100%;
float: left;
background-color: #000044;
}
There, now you see half of contentContainer appears to be deep blue!
Now style content1 as well.
<div id="viewport">
<div id="contentContainer">
<div id="content0" class="content"></div>
<div id="content1" class="content"></div>
</div>
</div>
<div id="contentContainer">
<div id="content0" class="content"></div>
<div id="content1" class="content"></div>
</div>
</div>
Now that both divs are styled, the whole of contentContainer appears deep blue.
No comments:
Post a Comment