<html>
<head>
<title>Magic Scroll: Arrows</title>
<!-- link to magicscroll.css file -->
<link rel="stylesheet" type="text/css" href="magicscroll/magicscroll.css" media="screen"/>
<style type="text/css" />
#withbg.MagicScroll.msborder {
background:#EDF6CA;
border:1px solid #99CC33;
}
#withbg.MagicScroll.msborder .MagicScrollItem {
background:#fff;
border-right:1px solid #EDF6CA;
border-left: none;
}
</style>
<!-- link to magicscroll.js file -->
<script src="magicscroll/magicscroll.js" type="text/javascript"></script>
<script type="text/javascript">
MagicScroll.extraOptions.outside = {
'arrows': 'outside',
'arrows-opacity' : 100
};
MagicScroll.extraOptions.inside = {
'arrows': 'inside',
'arrows-opacity' : 40,
'arrows-hover-opacity' : 60
};
MagicScroll.extraOptions.noarrows = {
'arrows': false
};
MagicScroll.extraOptions.withbg = {
'arrows': 'outside',
'arrows-opacity' : 100
};
</script>
</head>
<body>
<h3>Bright arrows outside</h3>
<div class="MagicScroll" id="outside">
<a href="#"><img src="images/shoes1.jpg" /></a>
<a href="#"><img src="images/shoes2.jpg" /></a>
<a href="#"><img src="images/shoes3.jpg" /></a>
<a href="#"><img src="images/shoes4.jpg" /></a>
<a href="#"><img src="images/shoes5.jpg" /></a>
<a href="#"><img src="images/shoes6.jpg" /></a>
<a href="#"><img src="images/shoes7.jpg" /></a>
<a href="#"><img src="images/shoes8.jpg" /></a>
<a href="#"><img src="images/shoes9.jpg" /></a>
<a href="#"><img src="images/shoes10.jpg" /></a>
<a href="#"><img src="images/shoes11.jpg" /></a>
<a href="#"><img src="images/shoes12.jpg" /></a>
</div>
<h3>Discreet arrows inside</h3>
<div class="MagicScroll" id="inside">
<a href="#"><img src="images/shoes1.jpg" /></a>
<a href="#"><img src="images/shoes2.jpg" /></a>
<a href="#"><img src="images/shoes3.jpg" /></a>
<a href="#"><img src="images/shoes4.jpg" /></a>
<a href="#"><img src="images/shoes5.jpg" /></a>
<a href="#"><img src="images/shoes6.jpg" /></a>
<a href="#"><img src="images/shoes7.jpg" /></a>
<a href="#"><img src="images/shoes8.jpg" /></a>
<a href="#"><img src="images/shoes9.jpg" /></a>
<a href="#"><img src="images/shoes10.jpg" /></a>
<a href="#"><img src="images/shoes11.jpg" /></a>
<a href="#"><img src="images/shoes12.jpg" /></a>
</div>
<h3>No arrows</h3>
<div class="MagicScroll msborder" id="noarrows">
<a href="#"><img src="images/shoes1.jpg" /></a>
<a href="#"><img src="images/shoes2.jpg" /></a>
<a href="#"><img src="images/shoes3.jpg" /></a>
<a href="#"><img src="images/shoes4.jpg" /></a>
<a href="#"><img src="images/shoes5.jpg" /></a>
<a href="#"><img src="images/shoes6.jpg" /></a>
<a href="#"><img src="images/shoes7.jpg" /></a>
<a href="#"><img src="images/shoes8.jpg" /></a>
<a href="#"><img src="images/shoes9.jpg" /></a>
<a href="#"><img src="images/shoes10.jpg" /></a>
<a href="#"><img src="images/shoes11.jpg" /></a>
<a href="#"><img src="images/shoes12.jpg" /></a>
</div>
<h3>Arrows with background</h3>
<div class="MagicScroll msborder" id="withbg">
<a href="#"><img src="images/shoes1.jpg" /></a>
<a href="#"><img src="images/shoes2.jpg" /></a>
<a href="#"><img src="images/shoes3.jpg" /></a>
<a href="#"><img src="images/shoes4.jpg" /></a>
<a href="#"><img src="images/shoes5.jpg" /></a>
<a href="#"><img src="images/shoes6.jpg" /></a>
<a href="#"><img src="images/shoes7.jpg" /></a>
<a href="#"><img src="images/shoes8.jpg" /></a>
<a href="#"><img src="images/shoes9.jpg" /></a>
<a href="#"><img src="images/shoes10.jpg" /></a>
<a href="#"><img src="images/shoes11.jpg" /></a>
<a href="#"><img src="images/shoes12.jpg" /></a>
</div>
</body>
</html>