Rotating banner simplest way with jquery and css

Rotating banner appeals most of the client and it's quite time consuming for developers to judge which library they need to use and do modification in them according to their requirements. In this article we are going to create the simplest and fully working rotating banner by writing just two three css classes and 4 5 lines of JavaScript code. Big question is that whether it will work with responsive pages, yes we will write two line of css class which will achieve it.

First we will add our html, I promise it will be simplest html even the biggner will write it in a minute

<div id="slider" >
    <div>
        <img src="http://www.bigfishdiary.com/images/1.jpg" />
    </div>
    <div>
        <img src="http://www.bigfishdiary.com/images/2.jpg" />
    </div>
    <div>
        <img src="http://www.bigfishdiary.com/images/3.jpg" />
    </div>
    <div>
        <img src="http://www.bigfishdiary.com/images/4.jpg" />
    </div>
</div>

I added all the image path from a live website, we can also use from our application folder, that is easy we all know that how to use an image from application's some folder.

Do you see any complicated code, nothing, simple html only with the very first (parent) div have a class slideshow, that's it. This code is not only to slide the image but the div, so whatever you will put inside these div will slide. so you can put the image or any rich text or whatever you want.

We need some css to manage the show/hide and styling the content, so a tiny peace of it is here

#slider { 
    margin: 0px auto; 
    position: relative; 
    width: 100%; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4);
}

img {
    height: auto;
    max-width: 100%!important;
}

#slider > div { 
    position: absolute;   
}

It's all very simple css, which we use in our day by day life, there is nothing which want me to explain, if you have any question let me know.

And Finally we need some script which will do the rotation of our banner. Can you guess how many lines of code you need to rotate it, just 5 lines and here is it

<script>
    $("#slider > div:gt(0)").hide();
    $("#slider").height($("#slider > div > img").height());
    setInterval(function () {
        $('#slider > div:first')
          .fadeOut(1000)
          .next()
          .fadeIn(1000)
          .end()
          .appendTo('#slider');
    }, 3000);
</script>

Do you think it is more than 5 line, then pass all the parameter in one line and then it will not go more than 5 lines. In this code I am trying to set the height of the slider with the height of image, yes it is becuse the image position will be absolute, so the other content bellow that image will go inside the image, that's why I try to set the height of slider.

$("#slider").height($("#slider > div > img").height());

If you want to write the JavaScript code on the page to test then here is the complete MVC page code

@{
    ViewBag.Title = "Home Page";
}

<div id="slider">
    <div>
        <img src="http://www.bigfishdiary.com/images/1.jpg" />
    </div>
    <div>
        <img src="http://www.bigfishdiary.com/images/2.jpg" />
    </div>
    <div>
        <img src="http://www.bigfishdiary.com/images/3.jpg" />
    </div>
    <div>
        <img src="http://www.bigfishdiary.com/images/4.jpg" />
    </div>
</div>

@section scripts{
<script>
    $("#slider > div:gt(0)").hide();
    $("#slider").height($("#slider > div > img").height());
    setInterval(function () {
        $('#slider > div:first')
          .fadeOut(1000)
          .next()
          .fadeIn(1000)
          .end()
          .appendTo('#slider');
    }, 3000);
</script>
}

Run the code and try to resize the page and refresh, we will see the images are adjusting themselves according to the page size, so it can work on every device even on mobile. And it is just because of our img class, since it is and element tag so will be applied for all the images in our application.

See live demo here

Other blogs you may like

6 Lesser Known Things about CSS

![alt text][1] CSS keeps updating itself, in a way that you need to keep up with the changing features and tones of this stylesheet. You need to know the new syntax, and also the no-code methods that you can ideally use. Here you will be introduced to some of the lesser known facts of CSS that... By Deepa Ranganathan   On 25 Sep 2015  Viewed: 835

5 CSS Customizations for Your Wordpress Website

<center>![Customizations for Your Wordpresst][1]</center> Have you just started using Wordpress? If yes, then there are a few things that you may want to play around with. Customizing a Wordpress theme at beginner level actually means customizing your stylesheets to make the design look... By Deepa Ranganathan   On 06 May 2015  Viewed: 411

Show faded image and clear on mouse hover

To show blurred, faded or washed-out image by using CSS and clear effect on mouse over on the image we need to use simply two CSS opacity and filter: alpha See following image, by default all will be faded on page load and once user will mouse over on any image that will look like the third... By Jason Olivera   On 06 Apr 2013  Viewed: 1,881

CSS selectors - we must know

**1. Universal Selector: *** *{margin:0; padding:0} Most of the designers use * selector to remove the margin and padding, but we should avoid it because it is too heavy. *.class1 and .class are equivalent. *.#content and # content are equivalent. **2. Descendant selectors: X ... By Ali Adravi   On 30 Jan 2013  Viewed: 554

What is !important in CSS and what is the purposse of it?

As we know CSS styles works from top to bottom, suppose you have created two class with the same name or define the style of any element at two places, which one will apply on your page, can you guess which one will apply, yes you are right the last one because CSS works from top to... By Mike .Net   On 28 Jan 2013  Viewed: 487