cara mengimplementasikan Nivo Slider pada opencart

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

/* The Nivo Slider styles */
#slider {
	position:relative;
	margin:0px;
	background:#202834 url("../gambar/loading.gif") no-repeat 50% 50%;
}
#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("../gambar/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("../gambar/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("../gambar/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

<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">
$(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:false, //Only show on hover
controlNav:true, //1,2,3...
controlNavThumbs:true, //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

<?php echo $header; ?>
<?php echo $column_left; ?><?php echo $column_right; ?>
<div id="content">
<div class="style2"><?php echo $welcome; ?></div>
 <br>
  <?php foreach ($modules as $module) { ?>
  <?php echo ${$module['code']}; ?>
  <?php } ?>
</div>
<?php echo $footer; ?>

Code: Select all

.style2 {
	font-size: 28px;
	color: #68514c;
	font-family: Georgia, "Times New Roman", Times, serif;
	text-align: center;
}

Code: Select all

<h1>Welcome to our store!</h1>
<p>&nbsp;</p>
<div class="headbg">&nbsp;</div>

<div id="slider">
<img alt="" src="catalog/view/theme/default/slider/satu.jpg" /> <img alt="" src="catalog/view/theme/default/slider/dua.jpg" /> <img alt="" src="catalog/view/theme/default/slider/tiga.jpg" /> <img alt="" src="catalog/view/theme/default/slider/empat.jpg" /></div>

Code: Select all

#content h1, .heading {
	color: #68514c;
	font-size: 28px;
	font-family: Georgia,"Times New Roman",Times,serif;
	text-transform: normal;
	margin: 0px;
}

Code: Select all

.headbg {
height:35px;
margin-top: -50px;
background: url("../gambar/headbg.png") no-repeat;
background-position: center bottom;}

Code: Select all

Line: 40
Error: Object doesn't support this property or method