Create content rotator with knockout.js and CSS3

There are number of ready made content rotators or content sliders on net. Here is another example how can you make one with knockout.js, few lines of JavaScript and some CSS.

Let’s say that we want to display list of discounted products on sidebar that rotates every few seconds, First, let’s make HTML with knockout template for our slides.

<div class="rotator" data-bind="template: {name:'slideTemplate', foreach:viewModel.Items}">
</div>

<script id="slideTemplate" type="text/html">
    <div class="slide" data-bind="css : {active : active()}">
        <div class="slideContent">
            <span><!--ko text: name--><!--/ko--></span>
            <div> only <span data-bind="text: price"></span>€!</div>
        </div>
    </div>
</script>
<div class="clearfix"></div>

First, there is HTML script element inside which we are placing our slides content. Two elements are binded to view model: name and price. That script is repeated for each product in our view model, which is defined in div with class “rotator”. It is simple HTML, just for demonstration, with product name and price. Off course, you can add product picture, add to basket URL or anything else you want.

Now, add some CSS to decorate view:

.rotator {
    display: block;
}

.slide {
    width: 100px;
    height: 100px;
    min-height: 200px;
    min-width: 200px;
    text-align: center;
    background-color: silver;
    display: none;
}

.slideContent > span {
    text-align: center;
    width: 100%;
    line-height: 100px;
}

.rotator > div {
    display: inline;
}

.rotator > div.active {
    display: block;
}

.slideContent {
    text-align: center;
    width: 200px;
}

.clearfix {
    float: none;
    clear: both;
}

Here is what our slide should look like:

And finally, add JavaScript which handles our slide rotation.

var viewModelProducts =  ko.observableArray();
function ViewModel() 
    {
        var self = this;
        self.Index = 0;
        self.Items = viewModelProducts;
        
        self.moveNext = function(e, d) {            
            self.Items()[self.Index].active(false);
            self.Index++;
            if (self.Index > self.Items().length-1)
                self.Index = 0;
            self.Items()[self.Index].active(true);
        }
    };
var viewModel = new ViewModel();
var data = [
    {
        name: 'T-shirt',
        price: 12
    },
    {
        name: 'Mouse Pad',
        price: 1
    },
    {
        name: 'Mug',
        price: 7
    }
]
var viewModel = new ViewModel();

$( document ).ready(function() {   
    // copy data to view model. you can use knockout mapping for this.
    data.forEach(function (d) {
        var vmd = {
            name: ko.observable(d.name),
            price: ko.observable(d.price),
            active: ko.observable(false)
        };
        viewModelProducts.push(vmd);        
    });

    //mode to first slide    
    viewModel.moveFirst();
    
    //apply knockout bindings
    ko.applyBindings(viewModel);

    //create function that changes active slide every 3 seconds
    setInterval(function() { 
        viewModel.moveNext();        
    }, 3000);
});

In script we are using scripted data for products, but you can retrieve it with AJAX.

That’s all that we need to have our content rotator! Here what it looks like now:

Now, we can play around and add some effects. There are lot’s of things that you can do with CSS3, but not all browsers supports all the features. Here we are going to add flip effect when slide changes. To do that, we need to add only few lines of CSS. Inactive slides are initially rotated by 180° and hidden with backface-visibility tag, Also, slide needs to be at same position as previous one, so position is added. Active slide has 0° rotation.

.rotator > div {
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

Speed and effect for flip transaction is defined with tags:

    transition: 0.6s;
    transform-style: preserve-3d;

And finally we need to add perspective tag in top container div.

    perspective: 1000;

Few more things like adding buttons for moving back and forward is also added to code, so final results is here:

Here is JsFiddle link for final version: http://jsfiddle.net/spuljko/tah33vuL/