jQuery 로 구동되는것이구요.

코드는 대충 저 사이트에서 js 파일만 뽑아보니 다음과 같습니다.


(function($) {

    var NivoSlider = function(element, options){
//Defaults are below
var settings = $.extend({}, $.fn.nivoSlider.defaults, options);

        //Useful variables. Play carefully.
        var vars = {
            currentSlide: 0,
            currentImage: '',
            totalSlides: 0,
            running: false,
            paused: false,
            stop: false
        };
   
        //Get this slider
        var slider = $(element);
        slider.data('nivo:vars', vars);
        slider.css('position','relative');
        slider.addClass('nivoSlider');
       
        //Find our slider children
        var kids = slider.children();
        kids.each(function() {
            var child = $(this);
            var link = '';
            if(!child.is('img')){
                if(child.is('a')){
                    child.addClass('nivo-imageLink');
                    link = child;
                }
                child = child.find('img:first');
            }
            //Get img width & height
            var childWidth = child.width();
            if(childWidth == 0) childWidth = child.attr('width');
            var childHeight = child.height();
            if(childHeight == 0) childHeight = child.attr('height');
            //Resize the slider
            if(childWidth > slider.width()){
                slider.width(childWidth);
            }
            if(childHeight > slider.height()){
                slider.height(childHeight);
            }
            if(link != ''){
                link.css('display','none');
            }
            child.css('display','none');
            vars.totalSlides++;
        });
       
        //If randomStart
        if(settings.randomStart){
        settings.startSlide = Math.floor(Math.random() * vars.totalSlides);
        }
       
        //Set startSlide
        if(settings.startSlide > 0){
            if(settings.startSlide >= vars.totalSlides) settings.startSlide = vars.totalSlides - 1;
            vars.currentSlide = settings.startSlide;
        }
       
        //Get initial image
        if($(kids[vars.currentSlide]).is('img')){
            vars.currentImage = $(kids[vars.currentSlide]);
        } else {
            vars.currentImage = $(kids[vars.currentSlide]).find('img:first');
        }
       
        //Show initial link
        if($(kids[vars.currentSlide]).is('a')){
            $(kids[vars.currentSlide]).css('display','block');
        }
       
        //Set first background
        slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat');

        //Create caption
        slider.append(
            $('<div class="nivo-caption"><p></p></div>').css({ display:'none', opacity:settings.captionOpacity })
        );
       
        // Cross browser default caption opacity
        $('.nivo-caption', slider).css('opacity', 0);

// Process caption function
var processCaption = function(settings){
var nivoCaption = $('.nivo-caption', slider);
if(vars.currentImage.attr('title') != '' && vars.currentImage.attr('title') != undefined){
var title = vars.currentImage.attr('title');
if(title.substr(0,1) == '#') title = $(title).html();

if(nivoCaption.css('opacity') != 0){
nivoCaption.find('p').stop().fadeTo(settings.animSpeed, 0, function(){
$(this).html(title);
$(this).stop().fadeTo(settings.animSpeed, 1);
});
} else {
nivoCaption.find('p').html(title);
}
nivoCaption.stop().fadeTo(settings.animSpeed, settings.captionOpacity);
} else {
nivoCaption.stop().fadeTo(settings.animSpeed, 0);
}
}

        //Process initial  caption
        processCaption(settings);
       
        //In the words of Super Mario "let's a go!"
        var timer = 0;
        if(!settings.manualAdvance && kids.length > 1){
            timer = setInterval(function(){ nivoRun(slider, kids, settings, false); }, settings.pauseTime);
        }

        //Add Direction nav
        if(settings.directionNav){
            slider.append('<div class="nivo-directionNav"><a class="nivo-prevNav" title="Prev"></a><a class="nivo-nextNav" title="Next"></a></div>');
           
            //Hide Direction nav
            if(settings.directionNavHide){
                $('.nivo-directionNav', slider).hide();
                slider.hover(function(){
                    $('.nivo-directionNav', slider).show();
                }, function(){
                    $('.nivo-directionNav', slider).hide();
                });
            }
           
            $('a.nivo-prevNav', slider).live('click', function(){
                if(vars.running) return false;
                clearInterval(timer);

jquery 부분을 제외하면 대부분 css에서 컨트롤 하지만 모던브라우저가 아니면 표현하지 못합니다.
css media 부분이 가로폭에 따라 대응하는 스타일이죠~

저도 자주 쓰긴 합니다만, ie7, 8같이 표현 못하는 경우는 걍 min-width로 고정시켜버리면 문제는 끝...이라...-0-;