Simple Image Slider Using JQuery and CSS

Introduction


Creating an image slider is one of the most important thing one needs while developing a website. You may need to implement image slider for many reasons, here I will show you the simplest example of creating a image slider using only JQuery and CSS. This is the simplest way to implement this instead of using others JQuery library for Image Slider



Behind The Scene


Here I am taking a simple html web page in which I will place a single div containing your images, those are for slider. Give an id to the div that will be used in the JQuery function we will write for the slider.
 <div id="s_show" class="divMain" style="margin-top: 5px; height: 155px;">
   <img class=" active" width="100%" src="images/home-1.jpg" style="opacity: 1;">
   <img class=" " width="100%" src="images/home-2.jpg" style="opacity: 1;">
   <img class=" " width="100%" src="images/home-4.jpg" style="opacity: 1;">
 </div>
Now add a floder to th root folder and named it as "images"  inside this folder put the images you want to show, and the JQuery files "jquery-1.4.1.js", "jquery-1.4.1.min.js".

Now add the following line of styles to the page .
 <style type="text/css">
 #s_show {
  position: relative;
  height: 350px;
 }
 #s_show IMG{
  position: absolute;
  top: -4px;
  left: 0px;
  z-index: 8;
  opacity: 0.0;
  height: 200px;
  width: 100%;
 }
 #s_show IMG.active{
  z-index: 10;
  opacity: 1.0;
 }
 #s_show IMG.last-active{
  z-index: 9;
 }
 .divMain{
  width: 721.2px;
  margin: 40px auto 0 auto;
  padding: 20px 35px;
  background: #FFFFFF;
 }
 .section{
  border: 1px groove #9FD0F6;
  border-right-width: 5px;
  width: 255px;
  float: left;
  background: #FFFFFF;
  margin-right: 5px;
  height: 155px;
 } 
</style> 
Fine, now add the below given script to the head section of the web page. And also add the "jquery-1.4.1.js" and "jquery-1.4.1.min.js" files to the header section of the page.

<script src="images/jquery-1.4.1.js" type="text/javascript"></script>
<script src="images/jquery-1.4.1.min.js" type="text/javascript"></script>

<script type="text/javascript">
function slideShow() {
 var $active = $('#s_show IMG.active');
 if ($active.length == 0) $active = $('#s_show IMG:last');
 var $next = $active.next().length ? $active.next()
 : $('#s_show IMG:first');
 $active.addClass('last-active');
 $next.css({ opacity: 0.0 })
 .addClass('active')
 .animate({ opacity: 1.0 }, 1000, function () {
 $active.removeClass('active last-active');
 });
 }
 
$(function () {
 setInterval("slideShow()", 3000);
});
</script> 
Now you are done with your own image slider. For complete project download it form the above link and just run it.

Happy Coding...

19 comments:

  1. Hello it's me, I am also visiting this website regularly, this site is truly good and the visitors are truly sharing pleasant thoughts.

    My site - how to lose weight quickly

    ReplyDelete
  2. My coder is trying to persuade me to move to .
    net from PHP. I have always disliked the idea because of the costs.
    But he's tryiong none the less. I've been using WordPress
    on a number of websites for about a year and am worried about switching to another platform.
    I have heard great things about blogengine.net.

    Is there a way I can import all my wordpress posts into it?
    Any help would be greatly appreciated!

    Look at my site; solar panel perth

    ReplyDelete
  3. It's going to be finish of mine day, however before finish I am reading this great post to improve my know-how.

    My homepage: television

    ReplyDelete
  4. Thanks for sharing your thoughts on dvd recorder combo.
    Regards

    Here is my webpage keravanbandy.net

    ReplyDelete
  5. fantastic put up, very informative. I'm wondering why the other specialists of this sector don't understand this.

    You must continue your writing. I'm sure, you've a great readers' base already!

    Take a look at my website ... usb Video Recorder

    ReplyDelete
  6. Thank you for any other informative blog. Where else could
    I get that kind of information written in such a perfect way?
    I have a mission that I am just now operating on, and I have been at the
    glance out for such information.

    Here is my webpage; portable video recorder

    ReplyDelete
  7. An imprеѕsivе shaгe! I've just forwarded this onto a coworker who was conducting a little homework on this. And he in fact ordered me breakfast simply because I found it for him... lol. So let me reword this.... Thank YOU for the meal!! But yeah, thanks for spending time to discuss this issue here on your web site.

    Feel free to visit my website :: Gardening tips

    ReplyDelete
  8. Howdy ωould you mind ѕtating which blοg
    platform you’re ωοгκіng ωith?
    I’m
    plannіng to ѕtаrt my own blog ѕoon but I’m hаving a hаrd timе ѕеlеctіng between BlogEngine/Worԁprеss/B2evolution and Drupal.
    Τhe rеasοn I ask іs because yοuг layοut seеms different thеn most blοgs and I’m looκіng fоr something unique.

    Ρ.S Ϻy apologies foг being оff-toρic but ӏ had to asκ!


    Fеel frеe tο ѕurf to my wеb
    ѕitе ... losing weight after 50

    ReplyDelete
  9. Wаy coοl! Some very vаlid pοіnts!
    I apρreciate you pеnning thiѕ write-up anԁ the reѕt of the websіte іѕ аlso really good.


    My homepagе ... core strength woгkouts -
    -

    ReplyDelete
  10. Hi there! This article couldn’t be written any better! Going through this
    post reminds me of my previous roommate! He always kept preaching
    about this. I most certainly will forward this article to him.
    Fairly certain he will have a good read.
    Thank you for sharing!

    Have a look at my web blog what is going green

    ReplyDelete
  11. Hеllο! I could havе swoгn I’ѵe been to thіѕ blog bеfore but after
    broωѕing through sοme оf the posts I realіzed it’ѕ neω to me.
    Nonеtheleѕs, I’m dеfinіtely
    hаpρу I found іt and I’ll be book-mаrκіng it and сheckіng back frеquently!


    Feel fгee tο surf to my homеpаge;
    losing weight

    ReplyDelete
  12. I am really inѕpiгed wіth your
    writing tаlеnts and аlso ωith the lаyout οn your blog.

    Is that this a paid toрic or ԁid yοu customizе it your self?
    Εіtheг way stay up the excellent quality writing, it’s unсommon to peer
    a great weblog liκe thiѕ one nowadaуѕ.

    .

    Have а loоk at my web blοg; organic harbor

    ReplyDelete
  13. Aw, thiѕ was а very gooԁ post.

    Taking the time anԁ actual effort to prοԁuce a reallу gooԁ aгticle… but what can I
    say… I put things off a lοt and ԁon't seem to get nearly anything done.

    my site - at home core workout

    ReplyDelete
  14. Heyа i аm foг the first tіme here.
    I found thіs boarԁ and I in finԁing It
    гeally helρful & it helρed me out muсh.
    I am hoping to offer one thing agaіn and aіԁ
    οtheгs ѕuch aѕ уou аiԁeԁ mе.


    Also visіt mу blοg :: pilates core training

    ReplyDelete
  15. I know this web page gives quality dependent articles and other material,
    is there any other site which offers such stuff in quality?


    Here is my website - wedding videos glasgow

    ReplyDelete
  16. Hi there! This post could not be written any
    better! Reading through this post reminds me of my previous roommate!
    He constantly kept talking about this. I most certainly will
    forward this information to him. Fairly certain he will have a very
    good read. Thanks for sharing!

    Visit my blog gardening

    ReplyDelete
  17. This is a topic that's near to my heart... Cheers! Where are your contact details though?

    Have a look at my site ... gardening tips

    ReplyDelete
  18. Hello! Sоmeone in my Facеbook gгoup shared
    this sitе with us so I camе to takе a look.
    І’m
    ԁefinitеly loving the information. I’m boоkmаrking and will be twеeting this tο my
    followers! Fantаstic blog and teггific
    dеsign.

    Look into mу web-site losing weight after 50 :: http://www.synology-forum.ru
    ::

    ReplyDelete
  19. It іs apprοpriate
    timе to make а fеw planѕ for the future аnd it’s time to be happy.
    I hаve learn this publiѕh and іf I may just I dеsire to recommend you few
    fаѕcinatіng issues or
    suggeѕtions. Perhaps you cаn writе
    subsequent articlеs regardіng this aгticlе.



    Herе iѕ my blog ... losing weight

    ReplyDelete