From OXIDwiki

A short tutorial how to use the Nivo-Slider instead of the default slider coming with Community Edition 4.5

• download Nivoslider at:  http://nivo.dev7studios.com/
• create galleryslider.tpl in folder /out/azure/tpl/widget with following content (maybe you need to replace "azure" with your own template folder name):
  

[{assign var=oBanners value=$oView->getBanners() }]
[{assign var="currency" value=$oView->getActCurrency()}]
[{if $oBanners}]
  <div id="slider">
        [{foreach from=$oBanners item=oBanner }]
        [{assign var=oArticle value=$oBanner->getBannerArticle() }]
             [{assign var=sBannerLink value=$oBanner->getBannerLink() }]
            [{if $sBannerLink }]
            <a href="[{ $sBannerLink }]">
            [{/if}]
            [{*if $oArticle }]
            <span class="promoBox">
                <strong class="promoPrice">[{ $oArticle->getFPrice() }] [{ $currency->sign}]</strong>
                <strong class="promoTitle">[{ $oArticle->oxarticles__oxtitle->value }]</strong>
            </span>
            [{/if *}]
            [{assign var=sBannerPictureUrl value=$oBanner->getBannerPictureUrl() }]
            [{if $sBannerPictureUrl }]
            <img src="[{ $sBannerPictureUrl }]" height="360" width="600" alt="[{ $oArticle->oxarticles__oxtitle->value }]">
            [{/if }]
            [{if $sBannerLink }]
            </a>
            [{/if}]
        [{/foreach }]
  </div>
[{/if }] 

• include into base.tpl:
  [{oxscript include='js/nivoslider.js'}] // be sure to use the correct filename from the package
• create another file with following content:

$(document).ready(function()
{
    var IE = /*@cc_on!@*/false;
    /* init events in content */
    var thisParent = thisParent || $("body");
    if(IE == false);
    initEvents(thisParent);

});

/* Init basic events and effects */
function initEvents(thisParent)
{
  initNivoSlider();
}


function initNivoSlider(){
  $('#slider').nivoSlider({
          effect: 'random',
          slices: 15,
      boxCols: 12, // For box animations
      boxRows: 6, // For box animations          
          animSpeed: 1000,
          pauseTime: 3800,
          startSlide: 0, //Set starting Slide (0 index)
          directionNav: false, //Next & Prev
          directionNavHide: false, //Only show on hover
          controlNav: false, //1,2,3...
          controlNavThumbs: false, //Use thumbnails for Control Nav
          controlNavThumbsSearch: '.jpg', //Replace this with...
          controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
          keyboardNav: false, //Use left & right arrows
          pauseOnHover: false, //Stop animation while hovering
          manualAdvance: false, //Force manual transitions
          captionOpacity: 0.8, //Universal caption opacity
          beforeChange: function(){},
          afterChange: function(){},
          slideshowEnd: function(){} //Triggers after all slides have been shown
      });
} 

• save this file as initnivo.js and include as well into base.tpl aufrufen (where all the other scripts are included):
  [{oxscript include='js/initnivo.js'}]
• add the Nivoslider-CSS to the Oxid-CSS:

/*
 * jQuery Nivo Slider v2.5.1
 * http://nivo.dev7studios.com
 *
 * Copyright 2011, Gilbert Pellegrom
 * Free to use and abuse under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * March 2010
 */
 
 
/* The Nivo Slider styles */
.nivoSlider {
    position:relative;
}
.nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    border:0;
    padding:0;
    margin:0;
    z-index:6;
    display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
    display:block;
    position:absolute;
    z-index:5;
    height:100%;
}
.nivo-box {
    display:block;
    position:absolute;
    z-index:5;
}
/* Caption styles */
.nivo-caption {
    position:absolute;
    left:0px;
    bottom:0px;
    background:#000;
    color:#fff;
    opacity:0.8; /* Overridden by captionOpacity setting */
    width:100%;
    z-index:8;
}
.nivo-caption p {
    padding:5px;
    margin:0;
}
.nivo-caption a {
    display:inline !important;
}
.nivo-html-caption {
    display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
    position:absolute;
    top:45%;
    z-index:9;
    cursor:pointer;
}
.nivo-prevNav {
    left:0px;
}
.nivo-nextNav {
    right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
    position:relative;
    z-index:9;
    cursor:pointer;
}
.nivo-controlNav a.active {
    font-weight:bold;
} 

• include following code into the template where you want to show the slider:
  [{include file="widget/galleryslider.tpl" }]
• Create promotions as banners in backend and enjoy! :-)

Thanks Chris/coarsy!
http://www.oxid-esales.com/forum/member.php?u=8736