Teochew Thunder: Web Tutorial: The Louver Carousel (Part 1/2)

Hey guys, and welcome to yet another carousel tutorial!

I know I know, you're all probably thinking, enough already! This is the last one for the entire year, I promise. Just want to get this out of the way while the carousel code is still fresh in memory.

Today, we'll be modifying the Slide Carousel code to produce a Louver Carousel. And if you're wondering what in the loving heck a Louver Carousel is, well, read on!

The Effect

Instead of sliding from left to right, the carousel will transition each image in slices, like a louver.

Kind of like this!

This is really a variant on the Slide Carousel, so we'll be reusing the same code.

First, take the code and make some changes. We'll want to change the title, of course.

<!DOCTYPE html>
<html>
<head>
<title>Louver Carousel</title>

Change this because we want red outlines to show us boundaries.

div {outline: 1px solid #FF0000;}

Change this to 100%. We won't need that large a width because we won't be sliding in and out of the viewport.

#contentContainer
{
   width: 100%;
   height: 100%;
   background-color: #004400;
}

We won't need background-position for this. I'll explain why later. And instead of cover, let's set it to 100% for both height and width.

.content
{
   width: 50%;
   height: 100%;
   float: left;
   background-color: #000044;
   background-size: 100% 100%;
   /*background-position: 50% 50%;*/
   background-repeat: no-repeat;
   padding-top: 1em;
}

We won't need this at all. The drawback of this special effect is that you can't really embed HTML content in there.

/*
.content div
{
   padding: 1em;
   background-color: rgba(255, 255, 255, 0.5);
   color: rgba(0, 0, 0, 1);
   font-weight: bold;
   width: 80%;
   border-radius: 5px;
   margin: 0 auto 0 auto;
}
*/

In the carousel object, there's a slides array. You won't need the content property.

slides:
[
   {
        bg: "00.jpg",
        /*
        content: "<div><h2>Phasellus ullamcorper</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent fringilla molestie pellentesque. Aliquam auctor scelerisque mattis. Donec maximus ipsum non eros gravida suscipit. Sed vulputate massa orci, non placerat lectus suscipit mollis. Fusce faucibus lorem eu lectus mattis, et dictum urna semper. Maecenas massa magna, commodo at pulvinar ac, lacinia nec augue. Nullam pretium consectetur ultricies. In a mattis justo. Suspendisse potenti. Vivamus scelerisque, urna imperdiet faucibus facilisis, orci elit dictum ex, blandit rutrum metus diam eget mi. Phasellus ullamcorper eu purus eu venenatis. Nullam vestibulum dolor vel felis facilisis, ac rutrum tellus rutrum. Sed vehicula elementum erat, eget mattis tortor rhoncus a. Phasellus ut nisl volutpat, dictum lectus ut, dictum lectus.</p><h2>Quisque pharetra</h2><p>Lorem ipsum vel felis facilisis, ac rutrum tellus rutrum. Sed vehicula elementum erat, eget mattis tortor rhoncus a.</p><p>Vestibulum porta mattis quam a gravida. Aliquam quis quam nulla.</p></div>"
        */
   },
   {
        bg: "01.jpg",
        /*
        content: "<div><h2>Phasellus mattis</h2><p>Lorem ipsum vel felis facilisis, ac rutrum tellus rutrum. Sed vehicula elementum erat, eget mattis tortor rhoncus a.</p></div>"
        */
   },
   {
        bg: "02.jpg",
        /*
        content: "<div><h2>In diam nisi erat</h2><p>Vestibulum porta mattis quam a gravida. Aliquam quis quam nulla. Pellentesque nisi erat, elementum ut maximus sed, euismod vel dui. Curabitur vitae dui nec justo rhoncus imperdiet. In diam risus, egestas dictum viverra vel, pretium sed nisl.</p></div>"
        */
   },
   {
        bg: "03.jpg",
        /*
        content: "<div><h2>Nullam ullamcorper</h2><p>Lorem ipsum scelerisque, urna imperdiet faucibus facilisis, orci elit dictum ex, blandit rutrum metus diam eget mi. Phasellus ullamcorper eu purus eu venenatis. Nullam vestibulum dolor vel felis facilisis, ac rutrum tellus rutrum. Sed vehicula elementum erat, eget mattis tortor rhoncus a. Phasellus ut nisl volutpat, dictum lectus ut, dictum lectus.</p><h2>Quisque pharetra</h2><p><img src='img/03.jpg' height='150' align='right' />Vestibulum porta mattis quam a gravida. Aliquam quis quam nulla. Pellentesque nisi erat, elementum ut maximus sed, euismod vel dui. Curabitur vitae dui nec justo rhoncus imperdiet. In diam risus, egestas dictum viverra vel, pretium sed nisl. Nam mi risus, imperdiet sed purus id, posuere feugiat nibh. Curabitur dignissim ipsum eget est pretium, ut luctus leo dapibus. Praesent in vehicula felis. Nullam quis faucibus justo. Praesent ac turpis tempor elit lobortis sodales laoreet pulvinar velit. Nam vel leo arcu. Cras magna nulla, lacinia in turpis vel, efficitur sagittis sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. In congue consectetur lacus, ac venenatis elit gravida at.</p></div>"
        */
   },
   {
        bg: "04.jpg",
        /*
        content: "<div><h2>Quisque pharetra</h2><p>Quisque eget aliquam urna. Integer tortor justo, fringilla ut diam in, ornare maximus sem. Nam dictum mauris nisl, id posuere sem sodales sit amet. Sed ac nulla ut nunc molestie vestibulum id a ipsum. Duis nec elementum libero. Etiam porttitor turpis eu venenatis porta. Quisque pharetra diam vel dui porta luctus. Duis sed odio viverra, molestie orci et, hendrerit erat. Duis ut tortor nec orci suscipit finibus nec non massa. </p></div>"
        */
   }
],

In the HTML, we'll add some stuff. First, embed a div into contentContainer and give it a class of louverContentContainer. Then embed another div within that div, and give it a class of louverContent. Then move the divs content0 and content1 inside it.

Then remove the ids. Make the divs styled by content0 and content1 instead.

Fill contentContainer with nine other copies of what we just did.

Now we're all set! Well, kind of. We need to add styling for all these new elements. There are ten louvers, so each louver will take up 10% of the container's total width. Create louverContentContainer, and set the width to 10% and height to 100%. Make the background-color brown (or whatever color, it won't matter in the end) float the thing left, and set the overflow property to hidden.

#contentContainer
{
   width: 100%;
   height: 100%;
   background-color: #004400;
}

.louverContentContainer
{
   width: 10%;
   height: 100%;
   background-color: #440000;
   float: left;
   overflow: hidden;
}

.content
{
   width: 50%;
   height: 100%;
   float: left;
   background-size: 100% 100%;
   background-repeat: no-repeat;
   padding-top: 1em;
}

Then create louverContent. Width will be twice the size of its parent, so set it to 200%. Height is 100%. Why, you may ask? Because we're prepping each div styled using louverContent to slide from left to right simultaneously. Instead of one big div as in the Slide Carousel, we want these guys to slide in louvers.

#contentContainer
{
   width: 100%;
   height: 100%;
   background-color: #004400;
}

.louverContentContainer
{
   width: 10%;
   height: 100%;
   background-color: #440000;
   float: left;
   overflow: hidden;
}

.louverContent
{
   width: 200%;
   height: 100%;
}

.content
{
   width: 50%;
   height: 100%;
   float: left;
   background-color: #000044;
   background-size: 100% 100%;
   background-repeat: no-repeat;
   padding-top: 1em;
}

Take a look at what's going on here. You'll see that it's deep blue beause that's the background color we set for content. But if we remove the background color of content, then it should default to brown, which is its parent's background color.

And here's why you don't need background-position for the content CSS class. Because we're going to use the nth-of-type pseudoselector on louverContentContainer, cascading the property down to louverContent and content.

#contentContainer
{
   width: 100%;
   height: 100%;
   background-color: #004400;
}

.louverContentContainer
{
   width: 10%;
   height: 100%;
   float: left;
   overflow: hidden;
}

.louverContent
{
   width: 200%;
   height: 100%;
}

.content
{
   width: 50%;
   height: 100%;
   float: left;
   background-color: #000044;
   background-size: 100% 100%;
   background-repeat: no-repeat;
   padding-top: 1em;
}

.louverContentContainer:nth-of-type(1) .louverContent .content
{
        background-position: 0% 50%;
}

.louverContentContainer:nth-of-type(2) .louverContent .content
{
        background-position: 10% 50%;
}

.louverContentContainer:nth-of-type(3) .louverContent .content
{
        background-position: 20% 50%;
}

.louverContentContainer:nth-of-type(4) .louverContent .content
{
        background-position: 30% 50%;
}

.louverContentContainer:nth-of-type(5) .louverContent .content
{
        background-position: 40% 50%;
}

.louverContentContainer:nth-of-type(6) .louverContent .content
{
        background-position: 50% 50%;
}

.louverContentContainer:nth-of-type(7) .louverContent .content
{
        background-position: 60% 50%;
}

.louverContentContainer:nth-of-type(8) .louverContent .content
{
        background-position: 70% 50%;
}

.louverContentContainer:nth-of-type(9) .louverContent .content
{
        background-position: 80% 50%;
}

.louverContentContainer:nth-of-type(10) .louverContent .content
{
        background-position: 90% 50%;
}

Got all that? Great!

We've pretty much fxed up the HTML and CSS. You won't see much now, but hopefully when we get to the JavaScript, things will make more sense.

JavaScript for the Louver Carousel, coming right up!

Teochew Thunder

Pages

Wednesday 9 September 2020

Web Tutorial: The Louver Carousel (Part 1/2)

The Effect

Got all that? Great!

Next

No comments:

Post a Comment

Teochew Thunder

Upcoming Web Tutorials

Features

Reviews