サムネイルプレビュー付きスライダー【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
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/
関連記事
他のスライドショー関連の記事
PICK UP
TIPS記事セレクション