tiwakawa / myslider Goto Github PK

1. Load js files
<script src="jquery.js" type="text/javascript"></script>
<script src="myslider.js" type="text/javascript"></script>

2. Code HTML
<div id="slider">
  <ul>
    <li><img src="image1.jpg" alt="image1" width="270" height="360" /></li>
    <li><img src="image2.jpg" alt="image2" width="270" height="360" /></li>
    <li><img src="image3.jpg" alt="image3" width="270" height="360" /></li>
    <li><img src="image4.jpg" alt="image4" width="270" height="360" /></li>
    <li><img src="image5.jpg" alt="image5" width="270" height="360" /></li>
  </ul>
</div>

<div id="thumbnail">
  <ul>
    <li><img src="image1.jpg" alt="image1" width="90" height="120" /></li>
    <li><img src="image2.jpg" alt="image2" width="90" height="120" /></li>
    <li><img src="image3.jpg" alt="image3" width="90" height="120" /></li>
    <li><img src="image4.jpg" alt="image4" width="90" height="120" /></li>
    <li><img src="image5.jpg" alt="image5" width="90" height="120" /></li>
  </ul>
</div>

<script type="text/javascript">
$(function() {
  $("#slider").mySlider({
    auto: true,
    vertical: true,
    loop: true,
    speed: 2000,
    puase: 1000,
  });
});
</script>