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

Hi guys. I'm back for the JavaScript portion. We'll be making some changes to the carousel object.

Change contentContainer to louverContent because that makes more sense.

currentSlideIndex: 0,
louverContent: undefined,
c0: undefined,
c1: undefined,
canMove: true,

In the begin() method, modify this line. Obviously, now we have to change contentContainer to louverContent. We want to use the getElementsByClassName() method because louverContent is a CSS class.

this.louverContent = document.getElementsByClassName("louverContent");

Instead of the getElementById() method, use getElementsByClassName(). Again, because content0 and content1 are no longer ids, but CSS classes.

this.c0 = document.getElementsByClassName("content0");
this.c1 = document.getElementsByClassName("content1");

The rest of the logic for begin(), canMove(), slide() and sliderButtonClick() remains the same. For setTransitionSpeed() and setMargin(), however, it's time to change stuff. Basically, take all this away.

setTransitionSpeed: function(interval)
{
    //this.contentContainer.style.webKitTransition = interval + "s all";
    //this.contentContainer.style.transition = interval + "s all";
},
setMargin: function(margin)
{
    //this.contentContainer.style.marginLeft = margin + "%";
},

You want to set the transition and marginLeft property for all divs styled using louverContent, via For loops.

setTransitionSpeed: function(interval)
{
    for (var i = 0; i < this.louverContent.length; i++)
    {
        this.louverContent[i].style.webKitTransition = interval + "s all";
        this.louverContent[i].style.transition = interval + "s all";
    }
},
setMargin: function(margin)
{
    for (var i = 0; i < this.louverContent.length; i++)
    {
        this.louverContent[i].style.marginLeft = margin + "%";
    }
},

Next is the setContent() function. Take away everything to do with setting innerHTML because there's no longer any HTML content to set.

setContent: function(next, dir)
{
    if (dir == "left")
    {
        //this.c0.innerHTML = this.slides[this.currentSlideIndex].content;
        this.c0.style.backgroundImage = "url(img/" + this.slides[this.currentSlideIndex].bg + ")";

        //this.c1.innerHTML = this.slides[next].content;
        this.c1.style.backgroundImage = "url(img/" + this.slides[next].bg + ")";
    }

    if (dir == "right")
    {
        //this.c0.innerHTML = this.slides[next].content;
        this.c0.style.backgroundImage = "url(img/" + this.slides[next].bg + ")";

        //this.c1.innerHTML = this.slides[this.currentSlideIndex].content;
        this.c1.style.backgroundImage = "url(img/" + this.slides[this.currentSlideIndex].bg + ")";
    }
},

Encapsulate the whole thing in a For loop, iterating over each element of c0 (or c1, if that's your fancy.) Basically, we want to run this for as many louvers as we've got.

setContent: function(next, dir)
{
    for (var i = 0; i < this.c0.length; i++)
    {
        if (dir == "left")
        {
            //this.c0.innerHTML = this.slides[this.currentSlideIndex].content;
            this.c0.style.backgroundImage = "url(img/" + this.slides[this.currentSlideIndex].bg + ")";

            //this.c1.innerHTML = this.slides[next].content;
            this.c1.style.backgroundImage = "url(img/" + this.slides[next].bg + ")";
        }

        if (dir == "right")
        {
            //this.c0.innerHTML = this.slides[next].content;
            this.c0.style.backgroundImage = "url(img/" + this.slides[next].bg + ")";

            //this.c1.innerHTML = this.slides[this.currentSlideIndex].content;
            this.c1.style.backgroundImage = "url(img/" + this.slides[this.currentSlideIndex].bg + ")";
        }
    }
},

And of course, each instance of c0 and c1 must use i to point to the current element.

setContent: function(next, dir)
{
    for (var i = 0; i < this.c0.length; i++)
    {
        if (dir == "left")
        {
            //this.c0.innerHTML = this.slides[this.currentSlideIndex].content;
            this.c0[i].style.backgroundImage = "url(img/" + this.slides[this.currentSlideIndex].bg + ")";

            //this.c1.innerHTML = this.slides[next].content;
            this.c1[i].style.backgroundImage = "url(img/" + this.slides[next].bg + ")";
        }

        if (dir == "right")
        {
            //this.c0.innerHTML = this.slides[next].content;
            this.c0[i].style.backgroundImage = "url(img/" + this.slides[next].bg + ")";

            //this.c1.innerHTML = this.slides[this.currentSlideIndex].content;
            this.c1[i].style.backgroundImage = "url(img/" + this.slides[this.currentSlideIndex].bg + ")";
        }
    }
},

Oh crap, what happened?!

That's because each louver is showing the current image at 100% width and height. And since each louver is 10% of each picture's width, this results in a distorted picture. So make the following change...

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

Much better.

Remove the red outlines.

div {outline: 0px solid #FF0000;}

Yay! See the transitions!

That's it!

Paul is six years old now, and these pictures aren't really relevant anymore. But they still bring me great joy. So much joy that I still use them in web tutorials.

With much louver,
T___T