#slider-bg {
margin: 0;
width : 960px;
background:#fff;
}
#slider-wrapper {
height: 324px;
margin: 0;
padding: 0;
position : relative;
width : 960px;
z-index: 1;
}
#slider {
position :relative;
width : 960px;
height:324px;
background:url(http://1.bp.blogspot.com/-QK5oawQYmgw/TnKXKsfCJhI/AAAAAAAAAwo/ERwg8G28PkM/s1600/loading.gif) no-repeat 50% 50%;
}
#slider img {
position :absolute;
top:0px;
right:0px;
display :none;
}
#slider a {
border:0;
display :block;
}
.nivo-controlNav {
position :absolute;
right:260px;
bottom:-42px;
display :none;
}
.nivo-controlNav a {
display :block;
width : 22px;
height:22px;
background:url(http://1.bp.blogspot.com/-C1WG2UmXhro/TnKXR2k5p9I/AAAAAAAAAww/byTpwmACcuw/s1600/l-slider-bullet-normal.png) no-repeat;
text-indent:-9999px;
border:0;
margin-left:3px;
float :right;
}
.nivo-controlNav a.active {
background-position :0 -22px;
}
.nivo-directionNav a {
display :block;
width : 50px;
height:61px;
text-indent:-9999px;
border:0;
}
a.nivo-nextNav {
left:-18px;
background:url('http://4.bp.blogspot.com/-WsXTx93UHVg/TnKXmbB6HUI/AAAAAAAAAxA/v7SrBe9gb1s/s1600/l-slidernav-right.png') no-repeat;
}
a.nivo-nextNav:hover{
background-position :0 -61px;
}
a.nivo-prevNav {
right:-18px;
background:url('http://3.bp.blogspot.com/-b_9PHTHIkxo/TnKXYq7sfQI/AAAAAAAAAw4/D5NUGheZIYo/s1600/l-slidernav-left.png') no-repeat;
}
a.nivo-prevNav:hover{
background-position :0 -61px;
}
.nivo-caption {
text-shadow:none;
font-family: Helvetica, Arial, sans-serif;
}
.nivo-caption a {
color:#efe9d1;
text-decoration:underline;
}
#sliderContent {
margin:50px 50px 0 0;
position : absolute;
text-align:center;
background-color:#FFFFCC;
color:#333333;
font-weight:bold;
padding: 10px;
}
#openCloseWrap a {
display : block;
font-size: 13px;
font-weight: bold;
height: 22px;
margin: 0;
position : absolute;
left: 22px;
text-indent: -10000px;
top: 59px;
width : 26px;
}
.nivoSlider {
position :relative;
}
.nivoSlider img {
position :absolute;
top:0px;
right:0px;
}
.nivoSlider a.nivo-imageLink {
position :absolute;
top:0px;
right:0px;
width : 100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:6;
display :none;
}
.nivo-slice {
display :block;
position :absolute;
z-index:5;
height:100%;
}
.nivo-box {
display :block;
position :absolute;
z-index:5;
}
.nivo-caption {
position :absolute;
right:0px;
bottom:0px;
color:#fff;
opacity:0.8; /* Overridden by captionOpacity setting */
width : 100%;
z-index:8;
}
.nivo-caption p {
padding:5px;
margin:0;
text-align:center;
font:italic 29px/32px Georgia;
color:#fff;
font-weight:bold;
}
.nivo-caption p h3{
font-size:22px;
font-style:italic;
color:#f23a66;
font-weight:bold;
line-height:30px;
}
.nivo-caption a {
display :inline !important;
}
.nivo-html-caption {
display :none;
}
.nivo-directionNav a {
position :absolute;
top:45%;
z-index:9;
cursor:pointer;
}
.nivo-prevNav {
right:0px;
}
.nivo-nextNav {
left:0px;
}
.nivo-controlNav a {
position :relative;
z-index:9;
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js' type='text/javascript'/>
<script src='http://jquerywallbase.googlecode.com/files/jquery.tools.min-liquid.js'/>
<script src='http://jquerywallbase.googlecode.com/files/jquery.nivo.slider.pack-Liquid.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'boxRandom,boxRain,boxRainGrow', // Specify sets like: 'fold,fade,sliceDown'
slices: 15, // For slice animations
boxCols: 8, // For box animations
boxRows: 4, // For box animations
animSpeed: 500, // Slide transition speed
pauseTime: 3000, // How long each slide will show
startSlide: 0, // Set starting Slide (0 index)
directionNav: true, // Next & Prev navigation
directionNavHide: false, // Only show on hover
controlNav: true, // 1,2,3... navigation
controlNavThumbs: false, // Use thumbnails for Control Nav
controlNavThumbsFromRel: false, // Use image rel for thumbs
controlNavThumbsSearch: '.jpg', // Replace this with...
controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
keyboardNav: true, // Use left & right arrows
pauseOnHover: true, // Stop animation while hovering
manualAdvance: false, // Force manual transitions
captionOpacity: 0, // Universal caption opacity
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // Triggers when slider has loaded
});
});
//]]>
</script>
ضع هذا الكود فى اضافه Html الموجوده فى الهيدر ان اردت لتكون بانر متحرك , او يمكنك اضافتها مباشره من تحرير القالب بعد كلاس الهيدر