Arrows

Buy now  £29 Get support

Arrows can be inside, outside or turned off. Opacity of arrows can be changed.

Bright arrows outside

Discreet arrows inside

No arrows

Arrows with background


  1. <html>
  2.     <head>
  3.         <title>Magic Scroll: Arrows</title>
  4.        
  5.         <!-- link to magicscroll.css file -->      
  6.         <link rel="stylesheet" type="text/css" href="magicscroll/magicscroll.css" media="screen"/>      
  7.         <style type="text/css" />
  8.             #withbg.MagicScroll.msborder {
  9.                 background:#EDF6CA;
  10.                 border:1px solid #99CC33;
  11.             }
  12.             #withbg.MagicScroll.msborder .MagicScrollItem {
  13.                 background:#fff;
  14.                 border-right:1px solid #EDF6CA;
  15.                 border-left: none;
  16.             }
  17.         </style>
  18.         <!-- link to magicscroll.js file -->
  19.         <script src="magicscroll/magicscroll.js" type="text/javascript"></script>
  20.         <script type="text/javascript">
  21.             MagicScroll.extraOptions.outside = {
  22.                 'arrows': 'outside',
  23.                 'arrows-opacity' : 100
  24.             };
  25.             MagicScroll.extraOptions.inside = {
  26.                 'arrows': 'inside',
  27.                 'arrows-opacity' : 40,
  28.                 'arrows-hover-opacity' : 60
  29.             };
  30.             MagicScroll.extraOptions.noarrows = {
  31.                 'arrows': false
  32.             };
  33.             MagicScroll.extraOptions.withbg = {
  34.                 'arrows': 'outside',
  35.                 'arrows-opacity' : 100
  36.             };
  37.         </script>
  38.        
  39.     </head>
  40.     <body>
  41.        
  42.         <h3>Bright arrows outside</h3>
  43.         <div class="MagicScroll" id="outside">
  44.             <a href="#"><img src="images/shoes1.jpg" /></a>
  45.             <a href="#"><img src="images/shoes2.jpg" /></a>
  46.             <a href="#"><img src="images/shoes3.jpg" /></a>
  47.             <a href="#"><img src="images/shoes4.jpg" /></a>
  48.             <a href="#"><img src="images/shoes5.jpg" /></a>
  49.             <a href="#"><img src="images/shoes6.jpg" /></a>
  50.             <a href="#"><img src="images/shoes7.jpg" /></a>
  51.             <a href="#"><img src="images/shoes8.jpg" /></a>
  52.             <a href="#"><img src="images/shoes9.jpg" /></a>
  53.             <a href="#"><img src="images/shoes10.jpg" /></a>
  54.             <a href="#"><img src="images/shoes11.jpg" /></a>
  55.             <a href="#"><img src="images/shoes12.jpg" /></a>
  56.         </div>
  57.        
  58.         <h3>Discreet arrows inside</h3>
  59.         <div class="MagicScroll" id="inside">
  60.             <a href="#"><img src="images/shoes1.jpg" /></a>
  61.             <a href="#"><img src="images/shoes2.jpg" /></a>
  62.             <a href="#"><img src="images/shoes3.jpg" /></a>
  63.             <a href="#"><img src="images/shoes4.jpg" /></a>
  64.             <a href="#"><img src="images/shoes5.jpg" /></a>
  65.             <a href="#"><img src="images/shoes6.jpg" /></a>
  66.             <a href="#"><img src="images/shoes7.jpg" /></a>
  67.             <a href="#"><img src="images/shoes8.jpg" /></a>
  68.             <a href="#"><img src="images/shoes9.jpg" /></a>
  69.             <a href="#"><img src="images/shoes10.jpg" /></a>
  70.             <a href="#"><img src="images/shoes11.jpg" /></a>
  71.             <a href="#"><img src="images/shoes12.jpg" /></a>
  72.         </div>
  73.  
  74.         <h3>No arrows</h3>
  75.         <div class="MagicScroll msborder" id="noarrows">
  76.             <a href="#"><img src="images/shoes1.jpg" /></a>
  77.             <a href="#"><img src="images/shoes2.jpg" /></a>
  78.             <a href="#"><img src="images/shoes3.jpg" /></a>
  79.             <a href="#"><img src="images/shoes4.jpg" /></a>
  80.             <a href="#"><img src="images/shoes5.jpg" /></a>
  81.             <a href="#"><img src="images/shoes6.jpg" /></a>
  82.             <a href="#"><img src="images/shoes7.jpg" /></a>
  83.             <a href="#"><img src="images/shoes8.jpg" /></a>
  84.             <a href="#"><img src="images/shoes9.jpg" /></a>
  85.             <a href="#"><img src="images/shoes10.jpg" /></a>
  86.             <a href="#"><img src="images/shoes11.jpg" /></a>
  87.             <a href="#"><img src="images/shoes12.jpg" /></a>
  88.         </div>
  89.  
  90.         <h3>Arrows with background</h3>
  91.         <div class="MagicScroll msborder" id="withbg">
  92.             <a href="#"><img src="images/shoes1.jpg" /></a>
  93.             <a href="#"><img src="images/shoes2.jpg" /></a>
  94.             <a href="#"><img src="images/shoes3.jpg" /></a>
  95.             <a href="#"><img src="images/shoes4.jpg" /></a>
  96.             <a href="#"><img src="images/shoes5.jpg" /></a>
  97.             <a href="#"><img src="images/shoes6.jpg" /></a>
  98.             <a href="#"><img src="images/shoes7.jpg" /></a>
  99.             <a href="#"><img src="images/shoes8.jpg" /></a>
  100.             <a href="#"><img src="images/shoes9.jpg" /></a>
  101.             <a href="#"><img src="images/shoes10.jpg" /></a>
  102.             <a href="#"><img src="images/shoes11.jpg" /></a>
  103.             <a href="#"><img src="images/shoes12.jpg" /></a>
  104.         </div>
  105.        
  106.     </body>
  107. </html>