cara mengimplementasikan Nivo Slider pada opencart

Code: Select all

#slider {
	position:relative;
	margin:0px;
	background:#202834 url("../image/slide/loading.gif") no-repeat 50% 50%;
	/*
	-moz-box-shadow:0px 0px 10px #333;
	-webkit-box-shadow:0px 0px 10px #333;
	box-shadow:0px 0px 10px #333;
	*/
}
#slider img {
	position:absolute;
	top:0px;
	left:0px;
	display:none;
}
#slider a {
	border:0;
}
.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:60;
	display:none;
}
/* The slices in the Slider */
.nivo-slice {
	display:block;
	position:absolute;
	z-index:50;
	height:100%;
}
/* 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:89;
}
.nivo-caption p {
	padding:5px;
	margin:0;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
	position:absolute;
	top:45%;
	z-index:99;
	cursor:pointer;
}
.nivo-prevNav {
	position: absolute;
	left: 5px;
	top: 40%;
	width: 37px;
	height: 37px;
	display: block;
	text-indent: -9009px;
	background: url("../image/slide/b_previous.png") no-repeat;
}
.nivo-prevNav:hover {
	background-position: 0pt -37px;}
	
.nivo-nextNav {
	position: absolute;
	right: 5px;
	top: 40%;
	width: 37px;
	height: 37px;
	display: block;
	text-indent: -9009px;
	background: url("../image/slide/b_next.png") no-repeat;
}
.nivo-nextNav:hover {
	background-position: 0pt -37px;}
	
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav {
	position:absolute;
	left:47%;
	bottom:-15px;
}
.nivo-controlNav a {
	display:block;
	width:10px;
	height:10px;
	background:url("../image/slide/bullets.png") no-repeat;
	text-indent:-9999px;
	border:0;
	margin-right:3px;
	float:left;
}
.nivo-controlNav a.active {
	background-position:-10px 0;
}

Code: Select all

background:#202834 url("../image/slide/loading.gif") no-repeat 50% 50%;

Code: Select all

background: url("../image/slide/b_previous.png") no-repeat;

Code: Select all

background: url("../image/slide/b_next.png") no-repeat;

Code: Select all

background:url("../image/slide/bullets.png") no-repeat;

Code: Select all

<link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/nivo-slider.css" />

Code: Select all

<link rel="stylesheet" type="text/css" href="catalog/view/theme/<?php echo $template; ?>/stylesheet/stylesheet.css" />

Code: Select all

<script type="text/javascript" src="catalog/view/javascript/jquery.nivo.slider.pack.js"></script>

Code: Select all

<script type="text/javascript" src="catalog/view/javascript/jquery/tab.js"></script>

Code: Select all

<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect:'random', //Specify sets like: 'fold,fade,sliceDown'
slices:15,
animSpeed:500,
pauseTime:3000,
startSlide:0, //Set starting Slide (0 index)
directionNav:true, //Next & Prev
directionNavHide:true, //Only show on hover
controlNav:false, //1,2,3...
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.8, //Universal caption opacity
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){} //Triggers after all slides have been shown
});
});
</script>

Code: Select all

		<!-- slide --> 
		<div id="slider">
			<img alt="" src="catalog/view/theme/default/image/slide/slide1.jpg" /> 
			<img alt="" src="catalog/view/theme/default/image/slide/slide2.jpg" /> 
			<img alt="" src="catalog/view/theme/default/image/slide/slide3.jpg" /> 
		</div>									
		<!-- end slide -->

Code: Select all

<div class="div6">

Code: Select all

    <div class="left"></div>
    <div class="right"></div>