Create an awesome full-width CSS and jQuery slideshow

Full-width images are in vogue. Take a look at Everything Everywhere’s natty new site and see how they use CSS positioning and sizing to keep their section pictures filling your screen. This sort of design looks spectacular on large screen all in one computers, because their larger screens can really make best use of the images you provide. But what if you want the picture to change? What if you have a full-width image that needs to cycle through a few? We’ll walk through doing that here.

How to create an awesome jQuery Slideshow

The HTML
In our head, let’s include

<script src=”http://code.jquery.com/jquery-1.8.0.min.js”></script>

And then on to the body. First up is a wrapper for all content:

<div class=”slideshowwrapperwrapper”>

And then inside that, we’ll put the slideshow wrapper itself:

<div class=”slideshowwrapper”><!–We’ll make this full liquid width, with a set height->

Then, we need the slideshow divs. Each one of these will be hidden in turn in the Javascript later on. Only the first needs an id, but they’ll be ‘stacked’ on top of one another using absolute positioning and hidden/shown sequentially.

<div id=”first” style=”height:726px; width:100%”>

<img src=”firstimage.jpeg” title=”First image” id=”slideshow” height=”726px” width=”100%”/><!–three images long, with iterative visibility transitions–>

</div>

<div style=”height:726px; width:100%”>

<img src=”secondimage.jpeg” title=”Second image” id=”slideshow” height=”726px” width=”100%”/><!–three images long, with iterative visibility transitions–>

</div>

<div style=”height:726px; width:100%”>

<img src=”thirdimage” title=”Third image” id=”slideshow” height=”726px” width=”100%”/><!–three images long, with iterative visibility transitions–>

</div>

</div>

</div>

The CSS

First up, let’s make out slideshowwrapperwrapper extend the full width of the page, even if it’s within a centrally located div to begin with:

.slideshowwrapperwrapper {

position:absolute;

left:-30%;

width:140%; <!–together the left and the additional width will make sure the wrapper stretches over the whole page. If you’re not using a central div, setting width=100% and left=0 would suffice.–>

height:690px;

margin-top:80px;

overflow:hidden; <!–we don’t want any excess image to ‘bleed’ in to the surrounding content around the slideshowwrapperwrapper–>

}

We want all our divs to be ‘stacked’ on top of one another, and made the full width of the slideshowwrapper. We’ll also make them invisible to start with, except for the first div.

.slideshowwrapper > div {

position: absolute;

display:none;

}

#first {

display:block;

}

We also want our slideshowwrapper to be centrally located in the slideshowwrapperwrapper:

.slideshowwrapper {position:relative;

width:100%;

height:726px;

overflow:hidden;

}

 

Any additional playing with the image settings (e.g. opacity) we can set using the #slideshow id, which is shared among the <img> elements in the slideshow:

#slideshow {

opacity:0.7; <!–this might help if you want to put text over your slideshow–>

}

The Javascript

The Javascript for this is actually relatively simple. Putting the <script> element at the base of the <body> (improving loading times):

<script type=”text/javascript”>

$(“#slideshow > div:gt(0)”).hide(); <!–get the first element called ‘slideshow’ and hide it–>

setInterval(function() {

$(‘.slideshowwrapper > div:first’)

.addClass(‘current’) <!–this is useful if you want to grab details off the image, or do something with it additional to displaying/hiding it–>

.css(‘display’, ‘block !important’) <!–we’ve made sure to override all the CSS ‘do not display’ code using !important–>

.show()

.fadeOut(2000) <!–this is the time it will take to fade in milliseconds (ms). So here it will take 3 full seconds for both parts of the transition (the fade out and the fade in). From a design perspective, a faster fade in than fade out adds a sense of quiet urgency to the slideshow. Reversing the timings makes it more relaxed.–>

.next() <!–selects the next div–>

.fadeIn(1000)

.end()

.removeClass(‘current’)

.appendTo(‘.slideshowwrapper’);

},  10000);

</script>

So there we have it! Have a play, and see what you think. I’d love to hear your comments in the drop box below.

VN:F [1.9.22_1171]
Rating: 5.3/10 (3 votes cast)
Create an awesome full-width CSS and jQuery slideshow, 5.3 out of 10 based on 3 ratings

8 Responses to “Create an awesome full-width CSS and jQuery slideshow”

  1. Tiffany

    Oct 02. 2012

    Thanks for sharing this knowledge. I am currently building exactly this kind of CSS and Javascript slideshow for a customer website. Thank you!

    VA:F [1.9.22_1171]
    Rating: -1 (from 1 vote)
    Reply to this comment
    • Avinash

      Oct 11. 2012

      Great Tiffany and happy that I could help you here sharing some programming work 🙂 Come again

      VN:F [1.9.22_1171]
      Rating: -1 (from 1 vote)
      Reply to this comment
  2. Hamid

    Oct 11. 2012

    Excellent post. I was checking continuously this weblog and I am impressed! Extremely useful info specifically the final phase 🙂 I take care of such information much. I used to be seeking this certain information for a very lengthy time. Thank you and good luck.

    VA:F [1.9.22_1171]
    Rating: -1 (from 1 vote)
    Reply to this comment
  3. jQuery

    Oct 14. 2012

    I was searchin exactly for this and how to create a great jQuery slideshow. Thank you very much for sharing! You got a new fan 🙂

    VA:F [1.9.22_1171]
    Rating: -1 (from 1 vote)
    Reply to this comment
    • Avinash

      Oct 14. 2012

      That’s so great! Thank you!!

      VN:F [1.9.22_1171]
      Rating: -1 (from 1 vote)
      Reply to this comment
  4. Jan

    Oct 18. 2012

    Your article perfectly shows what I needed to know to create an awsome jQuery slideshow with JS and CSS styles, thanks a lot avinash!

    VA:F [1.9.22_1171]
    Rating: -1 (from 1 vote)
    Reply to this comment
  5. Eva

    Oct 21. 2012

    Very nice work avinash. I am a web developer and used your code for a customer project. Thanks a lot for sharing with me

    VA:F [1.9.22_1171]
    Rating: -1 (from 1 vote)
    Reply to this comment
    • Avinash

      Oct 22. 2012

      You are very welcome Eva to use my code here! I am glad that I could help other web developers to find solutions quickly. Share the word 🙂

      VN:F [1.9.22_1171]
      Rating: -1 (from 1 vote)
      Reply to this comment

Leave a Reply