回答編集履歴

1

ソースの追記

2017/09/29 05:48

投稿

退会済みユーザー
test CHANGED
@@ -1,3 +1,269 @@
1
1
  manualControls を使えばオリジナルのコントロールが作れるようです。
2
2
 
3
3
  [http://demo.html-coding.co.jp/sbc/2012/C04-08/flexslider/](http://demo.html-coding.co.jp/sbc/2012/C04-08/flexslider/)
4
+
5
+
6
+
7
+
8
+
9
+ 追記しました。
10
+
11
+ ```
12
+
13
+ <div id="main" role="main">
14
+
15
+ <section class="slider">
16
+
17
+ <div id="f1" class="flexslider carousel">
18
+
19
+ <ul class="slides">
20
+
21
+ <li>
22
+
23
+ <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
24
+
25
+ </li>
26
+
27
+ <li>
28
+
29
+ <img src="images/kitchen_adventurer_lemon.jpg" />
30
+
31
+ </li>
32
+
33
+ <li>
34
+
35
+ <img src="images/kitchen_adventurer_donut.jpg" />
36
+
37
+ </li>
38
+
39
+ <li>
40
+
41
+ <img src="images/kitchen_adventurer_caramel.jpg" />
42
+
43
+ </li>
44
+
45
+ <li>
46
+
47
+ <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
48
+
49
+ </li>
50
+
51
+ <li>
52
+
53
+ <img src="images/kitchen_adventurer_lemon.jpg" />
54
+
55
+ </li>
56
+
57
+ <li>
58
+
59
+ <img src="images/kitchen_adventurer_donut.jpg" />
60
+
61
+ </li>
62
+
63
+ <li>
64
+
65
+ <img src="images/kitchen_adventurer_caramel.jpg" />
66
+
67
+ </li>
68
+
69
+ <li>
70
+
71
+ <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
72
+
73
+ </li>
74
+
75
+ <li>
76
+
77
+ <img src="images/kitchen_adventurer_lemon.jpg" />
78
+
79
+ </li>
80
+
81
+ <li>
82
+
83
+ <img src="images/kitchen_adventurer_donut.jpg" />
84
+
85
+ </li>
86
+
87
+ <li>
88
+
89
+ <img src="images/kitchen_adventurer_caramel.jpg" />
90
+
91
+ </li>
92
+
93
+ </ul>
94
+
95
+ </div>
96
+
97
+
98
+
99
+ <div id="f2" class="flexslider carousel">
100
+
101
+ <ul class="slides">
102
+
103
+ <li>
104
+
105
+ <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
106
+
107
+ </li>
108
+
109
+ <li>
110
+
111
+ <img src="images/kitchen_adventurer_lemon.jpg" />
112
+
113
+ </li>
114
+
115
+ <li>
116
+
117
+ <img src="images/kitchen_adventurer_donut.jpg" />
118
+
119
+ </li>
120
+
121
+ <li>
122
+
123
+ <img src="images/kitchen_adventurer_caramel.jpg" />
124
+
125
+ </li>
126
+
127
+ <li>
128
+
129
+ <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
130
+
131
+ </li>
132
+
133
+ <li>
134
+
135
+ <img src="images/kitchen_adventurer_lemon.jpg" />
136
+
137
+ </li>
138
+
139
+ <li>
140
+
141
+ <img src="images/kitchen_adventurer_donut.jpg" />
142
+
143
+ </li>
144
+
145
+ <li>
146
+
147
+ <img src="images/kitchen_adventurer_caramel.jpg" />
148
+
149
+ </li>
150
+
151
+ <li>
152
+
153
+ <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
154
+
155
+ </li>
156
+
157
+ <li>
158
+
159
+ <img src="images/kitchen_adventurer_lemon.jpg" />
160
+
161
+ </li>
162
+
163
+ <li>
164
+
165
+ <img src="images/kitchen_adventurer_donut.jpg" />
166
+
167
+ </li>
168
+
169
+ <li>
170
+
171
+ <img src="images/kitchen_adventurer_caramel.jpg" />
172
+
173
+ </li>
174
+
175
+ </ul>
176
+
177
+ </div>
178
+
179
+ </section>
180
+
181
+ </div>
182
+
183
+ <button onclick="javascript:hoge();">ここ</button>
184
+
185
+
186
+
187
+
188
+
189
+ <script type="text/javascript">
190
+
191
+ $(function(){
192
+
193
+ SyntaxHighlighter.all();
194
+
195
+ });
196
+
197
+ $(window).load(function(){
198
+
199
+
200
+
201
+ $('#f1').flexslider({
202
+
203
+ animation: "slide",
204
+
205
+ animationLoop: false,
206
+
207
+ itemWidth: 210,
208
+
209
+ itemMargin: 5,
210
+
211
+ pausePlay: true,
212
+
213
+ mousewheel: true,
214
+
215
+ start: function(slider){
216
+
217
+ $('body').removeClass('loading');
218
+
219
+ }
220
+
221
+ });
222
+
223
+
224
+
225
+ $('#f2').flexslider({
226
+
227
+ animation: "slide",
228
+
229
+ animationLoop: false,
230
+
231
+ itemWidth: 210,
232
+
233
+ itemMargin: 5,
234
+
235
+ pausePlay: true,
236
+
237
+ mousewheel: true,
238
+
239
+ start: function(slider){
240
+
241
+ $('body').removeClass('loading');
242
+
243
+ }
244
+
245
+ });
246
+
247
+
248
+
249
+
250
+
251
+ });
252
+
253
+
254
+
255
+ function hoge()
256
+
257
+ {
258
+
259
+ $('#f1').flexslider("next");
260
+
261
+ $('#f2').flexslider("next");
262
+
263
+ }
264
+
265
+
266
+
267
+ </script>
268
+
269
+ ```