【TIPS】サムネイルプレビュー付きスライダー
サムネイルプレビュー付きスライダー【2パターン】のコードまとめ。
まず、共通の設定部分になるＣＳＳファイルをリンクさせる。
【 html 】
1
<head>
4
<noscript>
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
65
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js">
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
65
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js">
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/
関連記事他のスライドショー関連の記事
