teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

ソースの追記

2017/09/29 05:48

投稿

退会済みユーザー
answer CHANGED
@@ -1,2 +1,135 @@
1
1
  manualControls を使えばオリジナルのコントロールが作れるようです。
2
- [http://demo.html-coding.co.jp/sbc/2012/C04-08/flexslider/](http://demo.html-coding.co.jp/sbc/2012/C04-08/flexslider/)
2
+ [http://demo.html-coding.co.jp/sbc/2012/C04-08/flexslider/](http://demo.html-coding.co.jp/sbc/2012/C04-08/flexslider/)
3
+
4
+
5
+ 追記しました。
6
+ ```
7
+ <div id="main" role="main">
8
+ <section class="slider">
9
+ <div id="f1" class="flexslider carousel">
10
+ <ul class="slides">
11
+ <li>
12
+ <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
13
+ </li>
14
+ <li>
15
+ <img src="images/kitchen_adventurer_lemon.jpg" />
16
+ </li>
17
+ <li>
18
+ <img src="images/kitchen_adventurer_donut.jpg" />
19
+ </li>
20
+ <li>
21
+ <img src="images/kitchen_adventurer_caramel.jpg" />
22
+ </li>
23
+ <li>
24
+ <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
25
+ </li>
26
+ <li>
27
+ <img src="images/kitchen_adventurer_lemon.jpg" />
28
+ </li>
29
+ <li>
30
+ <img src="images/kitchen_adventurer_donut.jpg" />
31
+ </li>
32
+ <li>
33
+ <img src="images/kitchen_adventurer_caramel.jpg" />
34
+ </li>
35
+ <li>
36
+ <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
37
+ </li>
38
+ <li>
39
+ <img src="images/kitchen_adventurer_lemon.jpg" />
40
+ </li>
41
+ <li>
42
+ <img src="images/kitchen_adventurer_donut.jpg" />
43
+ </li>
44
+ <li>
45
+ <img src="images/kitchen_adventurer_caramel.jpg" />
46
+ </li>
47
+ </ul>
48
+ </div>
49
+
50
+ <div id="f2" class="flexslider carousel">
51
+ <ul class="slides">
52
+ <li>
53
+ <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
54
+ </li>
55
+ <li>
56
+ <img src="images/kitchen_adventurer_lemon.jpg" />
57
+ </li>
58
+ <li>
59
+ <img src="images/kitchen_adventurer_donut.jpg" />
60
+ </li>
61
+ <li>
62
+ <img src="images/kitchen_adventurer_caramel.jpg" />
63
+ </li>
64
+ <li>
65
+ <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
66
+ </li>
67
+ <li>
68
+ <img src="images/kitchen_adventurer_lemon.jpg" />
69
+ </li>
70
+ <li>
71
+ <img src="images/kitchen_adventurer_donut.jpg" />
72
+ </li>
73
+ <li>
74
+ <img src="images/kitchen_adventurer_caramel.jpg" />
75
+ </li>
76
+ <li>
77
+ <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
78
+ </li>
79
+ <li>
80
+ <img src="images/kitchen_adventurer_lemon.jpg" />
81
+ </li>
82
+ <li>
83
+ <img src="images/kitchen_adventurer_donut.jpg" />
84
+ </li>
85
+ <li>
86
+ <img src="images/kitchen_adventurer_caramel.jpg" />
87
+ </li>
88
+ </ul>
89
+ </div>
90
+ </section>
91
+ </div>
92
+ <button onclick="javascript:hoge();">ここ</button>
93
+
94
+
95
+ <script type="text/javascript">
96
+ $(function(){
97
+ SyntaxHighlighter.all();
98
+ });
99
+ $(window).load(function(){
100
+
101
+ $('#f1').flexslider({
102
+ animation: "slide",
103
+ animationLoop: false,
104
+ itemWidth: 210,
105
+ itemMargin: 5,
106
+ pausePlay: true,
107
+ mousewheel: true,
108
+ start: function(slider){
109
+ $('body').removeClass('loading');
110
+ }
111
+ });
112
+
113
+ $('#f2').flexslider({
114
+ animation: "slide",
115
+ animationLoop: false,
116
+ itemWidth: 210,
117
+ itemMargin: 5,
118
+ pausePlay: true,
119
+ mousewheel: true,
120
+ start: function(slider){
121
+ $('body').removeClass('loading');
122
+ }
123
+ });
124
+
125
+
126
+ });
127
+
128
+ function hoge()
129
+ {
130
+ $('#f1').flexslider("next");
131
+ $('#f2').flexslider("next");
132
+ }
133
+
134
+ </script>
135
+ ```