My Vector Space

  人生は寄り道してなんぼ

【TIPS】サムネイルプレビュー付きスライダー

  slideshow-with-thumbnail-preview-capture-4

 

 サムネイルプレビュー付きスライダー【2パターン】

 

 まず、共通の設定部分になるCSSファイルをリンクさせる。

 【 html 】
 1
  <head>
 2
      <link rel="stylesheet" type="text/css" href="css/demo.css" />
 3
      <link rel="stylesheet" type="text/css" href="css/style.css" />
 4
      <noscript>
 5
          <link rel="stylesheet" type="text/css" href="css/noscript.css" />
 6
      </noscript>
 7
  </head>

    次に、パターンごとのhtmlとスクリプトを記述していく。    

effect-1

   横からスライドするエフェクト

 【 html 】
 1
  <div id="ei-slider" class="ei-slider">
 2
      <ul class="ei-slider-large">
 3
          <li>
 4
              <img src="images/large/1.jpg" alt="image01" />
 5
              <div class="ei-title">
 6
                  <h2>Creative</h2>
 7
                  <h3>Duet</h3>
 8
              </div>
 9
          </li>
 10
          <li>
 11
              <img src="images/large/2.jpg" alt="image02" />
 12
              <div class="ei-title">
 13
                  <h2>Friendly</h2>
 14
                  <h3>Devil</h3>
 15
              </div>
 16
          </li>
 17
          <li>
 18
              <img src="images/large/3.jpg" alt="image03"/>
 19
              <div class="ei-title">
 20
                  <h2>Tranquilent</h2>
 21
                  <h3>Compatriot</h3>
 22
              </div>
 23
          </li>
 24
          <li>
 25
              <img src="images/large/4.jpg" alt="image04"/>
 26
              <div class="ei-title">
 27
                  <h2>Insecure</h2>
 28
                  <h3>Hussler</h3>
 29
              </div>
 30
          </li>
 31
          <li>
 32
              <img src="images/large/5.jpg" alt="image05"/>
 33
              <div class="ei-title">
 34
                  <h2>Loving</h2>
 35
                  <h3>Rebel</h3>
 36
              </div>
 37
          </li>
 38
          <li>
 39
              <img src="images/large/6.jpg" alt="image06"/>
 40
              <div class="ei-title">
 41
                  <h2>Passionate</h2>
 42
                  <h3>Seeker</h3>
 43
              </div>
 44
          </li>
 45
          <li>
 46
              <img src="images/large/7.jpg" alt="image07"/>
 47
              <div class="ei-title">
 48
                  <h2>Crazy</h2>
 49
                  <h3>Friend</h3>
 50
              </div>
 51
          </li>
 52
      </ul><!-- ei-slider-large -->
 53
      <ul class="ei-slider-thumbs">
 54
          <li class="ei-slider-element">Current</li>
 55
          <li><a href="#">Slide 1</a><img src="images/thumbs/1.jpg" alt="thumb01" /></li>
 56
          <li><a href="#">Slide 2</a><img src="images/thumbs/2.jpg" alt="thumb02" /></li>
 57
          <li><a href="#">Slide 3</a><img src="images/thumbs/3.jpg" alt="thumb03" /></li>
 58
          <li><a href="#">Slide 4</a><img src="images/thumbs/4.jpg" alt="thumb04" /></li>
 59
          <li><a href="#">Slide 5</a><img src="images/thumbs/5.jpg" alt="thumb05" /></li>
 60
          <li><a href="#">Slide 6</a><img src="images/thumbs/6.jpg" alt="thumb06" /></li>
 61
          <li><a href="#">Slide 7</a><img src="images/thumbs/7.jpg" alt="thumb07" /></li>
 62
      </ul><!-- ei-slider-thumbs -->
 63
  </div><!-- ei-slider -->
 64
 
 66
  </script>
 67
  <script type="text/javascript" src="js/jquery.eislideshow.js"></script>
 68
  <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
 69
  <script type="text/javascript">
 70
      $(function() {
 71
          $('#ei-slider').eislideshow({
 72
              easing : 'easeOutExpo',
 73
              titleeasing : 'easeOutExpo',
 74
              itlespeed : 1200
 75
          });
 76
      });
 77
  </script>
effect-2

   ふわっと切り替わるエフェクト

 【 html 】
 1
  <div id="ei-slider" class="ei-slider">
 2
      <ul class="ei-slider-large">
 3
          <li>
 4
              <img src="images/large/6.jpg" alt="image06" />
 5
              <div class="ei-title">
 6
                  <h2>Creative</h2>
 7
                  <h3>Duet</h3>
 8
              </div>
 9
          </li>
 10
          <li>
 11
              <img src="images/large/1.jpg" alt="image01" />
 12
              <div class="ei-title">
 13
                  <h2>Friendly</h2>
 14
                  <h3>Devil</h3>
 15
              </div>
 16
          </li>
 17
          <li>
 18
              <img src="images/large/2.jpg" alt="image02"/>
 19
              <div class="ei-title">
 20
                  <h2>Tranquilent</h2>
 21
                  <h3>Compatriot</h3>
 22
              </div>
 23
          </li>
 24
          <li>
 25
              <img src="images/large/3.jpg" alt="image03"/>
 26
              <div class="ei-title">
 27
                  <h2>Insecure</h2>
 28
                  <h3>Hussler</h3>
 29
              </div>
 30
          </li>
 31
          <li>
 32
              <img src="images/large/4.jpg" alt="image04"/>
 33
              <div class="ei-title">
 34
                  <h2>Loving</h2>
 35
                  <h3>Rebel</h3>
 36
              </div>
 37
          </li>
 38
          <li>
 39
              <img src="images/large/5.jpg" alt="image05"/>
 40
              <div class="ei-title">
 41
                  <h2>Passionate</h2>
 42
                  <h3>Seeker</h3>
 43
              </div>
 44
          </li>
 45
          <li>
 46
              <img src="images/large/7.jpg" alt="image07"/>
 47
              <div class="ei-title">
 48
                  <h2>Crazy</h2>
 49
                  <h3>Friend</h3>
 50
              </div>
 51
          </li>
 52
      </ul><!-- ei-slider-large -->
 53
      <ul class="ei-slider-thumbs">
 54
          <li class="ei-slider-element">Current</li>
 55
          <li><a href="#">Slide 6</a><img src="images/thumbs/6.jpg" alt="thumb06" /></li>
 56
          <li><a href="#">Slide 1</a><img src="images/thumbs/1.jpg" alt="thumb01" /></li>
 57
          <li><a href="#">Slide 2</a><img src="images/thumbs/2.jpg" alt="thumb02" /></li>
 58
          <li><a href="#">Slide 3</a><img src="images/thumbs/3.jpg" alt="thumb03" /></li>
 59
          <li><a href="#">Slide 4</a><img src="images/thumbs/4.jpg" alt="thumb04" /></li>
 60
          <li><a href="#">Slide 5</a><img src="images/thumbs/5.jpg" alt="thumb05" /></li>
 61
          <li><a href="#">Slide 7</a><img src="images/thumbs/7.jpg" alt="thumb07" /></li>
 62
      </ul><!-- ei-slider-thumbs -->
 63
  </div><!-- ei-slider -->
 64
 
 66
  </script>
 67
  <script type="text/javascript" src="js/jquery.eislideshow.js"></script>
 68
  <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
 69
  <script type="text/javascript">
 70
      $(function() {
 71
          $('#ei-slider').eislideshow({
 72
              animation : 'center',
 73
              autoplay : true,
 74
              slideshow_interval : 3000,
 75
              titlesFactor : 0
 76
          });
 77
      });
 78
  </script>

 

 

参考サイト

http://tympanus.net/codrops/2011/11/21/elastic-image-slideshow-with-thumbnail-preview/

 

 

関連記事他のスライドショー関連の記事

PAGE TOP