4
Contributors
8
Replies
53
Views
3 Years
Discussion Span
Last Post by grafic.web
0

I've always liked Nivo Slider. However, there are countless slides out there. You can also build a simple one on your own.

0

that slider is free if its not for a wordpress site.

From there site...

The Nivo Slider jQuery plugin is open source and released under the MIT license. This means you can use it almost anywhere and for almost any kind of project, including personal and commercial websites and themes you make. It also means you can give back to the community by contributing your own improvements to the slider via GitHub.

However, don't just go by my one recommendation. I like it but you may find something else out there that may fit better for you. Many of these sliders are free to incorporate into your projects. If you have the time, I'd recommend you do a search find a few that look appealing to you and test them out. Since they are client side, they are very easy to integrate into your project on a test page.

1

This is not my slider, but I've used in a few projects before.. work good for just a very simple image slider.

//html
<ul id="html-slider">
    <li><img src="" alt="" /></li>
    <li><img src="" alt="" /></li>
    <li><img src="" alt="" /></li>
</ul>
<div id="counter"></div>

//CSS
    #html-slider {
        height:200px;
        list-style:none;
        margin:;
        padding:0;
        overflow:hidden;
        position:relative;
    }

    #html-slider li {
        display:none;
        left:0;
        position:absolute;
        top:0;
    }

    #html-slider li:first-child {
        display:inline-block;
    }

//Jquery
(function($){
    $.fn.PageSlider = function(interval){
    var slides;
    var cnt;
    var amount;
    var i;

    function run(){
    $(slides[i]).fadeOut(1000);
    i++;
    if(i >= amount) i=0;
    $(slides[i]).fadeIn(1000);

    cnt.text(i+1+ '/' + amount);
    setTimeout(run, interval);
    }


    slides = $("#page-slider").children();
    cnt = $("#counter");
    amount = slides.length;
    i=0;

    cnt.text(i+1+ '/' + amount);
    setTimeout(run, interval);
    };
})(jQuery);

jQuery(window).load(function(){
$("#html-slider").PageSlider(3000);
});

Edited by gabrielcastillo: updated html tag

0

Nice job on this slider. However, change line 49 to:

slides = $("#html-slider").children();
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.