teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問WordPressにスライダーを実装したのですが、next、prevがうまく動作しません。

編集履歴

質問編集履歴

2

質問の箇所変更

2021/02/06 01:33

投稿

kuro-blog
kuro-blog

スコア0

test CHANGED
@@ -1 +1 @@
1
- WordPressにスライダーを実装したのですが、next、prevのパーマリンクの設定がわかりません
1
+ WordPressにスライダーを実装したのですが、next、prevがうまく動作しません。
test CHANGED
@@ -1,4 +1,6 @@
1
- ここの＃に入れるコードがわかりません。
1
+ WordPressにスライダーを実装したのですが、next、prevがうまく動作しません。
2
+
3
+
2
4
 
3
5
 
4
6
 
@@ -8,11 +10,153 @@
8
10
 
9
11
  jQuery('#slides').append('<ul id="pager"><li><a href="#" class="prev">＜</a></li><li><a href="#" class="next">＞</a></li></ul>');
10
12
 
11
-
13
+ var pager = jQuery('#pager'),
14
+
15
+ slidesWrap = jQuery('#slides'),
16
+
17
+ slides = jQuery('#slides-inner'),
18
+
19
+ slideKiji = slides.find('.slidekiji'),
20
+
21
+ slidenav = jQuery('#slides-nav'),
22
+
23
+ current = 0,
24
+
25
+ number = slideKiji.length;
26
+
27
+
28
+
29
+ slideKiji.each(function(i) {
30
+
31
+ jQuery(this).css({
32
+
33
+ left: '100' * i + '%'
34
+
35
+ });
36
+
37
+ slidenav.append('<a href="#"></a>');
38
+
39
+ });
40
+
41
+
42
+
43
+ function navUpdate() {
44
+
45
+ slidenav.find('a').removeClass('active');
46
+
47
+ slidenav.find('a').eq(current).addClass('active');
48
+
49
+ }
50
+
51
+
52
+
53
+ function slider(index) {
54
+
55
+ if (index < 0) {
56
+
57
+ index = number - 1;
58
+
59
+ }
60
+
61
+ if (index > number - 1) {
62
+
63
+ index = 0;
64
+
65
+ }
66
+
67
+ slides.animate({
68
+
69
+ left: '-100' * index + '%'
70
+
71
+ });
72
+
73
+ current = index;
74
+
75
+ navUpdate();
76
+
77
+ }
78
+
79
+
80
+
81
+ pager.find('a').click(function(event) {
82
+
83
+ event.preventDefault();
84
+
85
+ if (jQuery(this).hasClass('prev')) {
86
+
87
+ slider(current - 1);
88
+
89
+ } else {
90
+
91
+ slider(current + 1);
92
+
93
+ }
94
+
95
+ });
96
+
97
+
98
+
99
+ slidenav.find('a').click(function(event) {
100
+
101
+ event.preventDefault();
102
+
103
+ var navIndex = jQuery(this).index();
104
+
105
+ navUpdate();
106
+
107
+ slider(navIndex);
108
+
109
+ });
110
+
111
+
112
+
113
+ var start;
114
+
115
+
116
+
117
+ function timerStart() {
118
+
119
+ start = setInterval(function() {
120
+
121
+ slider(current + 1);
122
+
123
+ }, 5000);
124
+
125
+ }
126
+
127
+
128
+
129
+ function timerStop() {
130
+
131
+ clearInterval(start);
132
+
133
+ }
134
+
135
+
136
+
137
+ slider(current);
138
+
139
+
140
+
141
+ timerStart();
142
+
143
+
144
+
145
+ slideKiji.on({
146
+
147
+ mouseover: timerStop,
148
+
149
+ mouseout: timerStart
150
+
151
+ });
152
+
153
+ });
154
+
155
+
12
156
 
13
157
  ```
14
158
 
15
-
159
+
16
160
 
17
161
  すべてのコード
18
162
 
@@ -92,160 +236,4 @@
92
236
 
93
237
  ```
94
238
 
95
-
96
-
97
- ```JavaScript
98
-
99
- jQuery(function($) {
100
-
101
- jQuery('#slides').append('<ul id="pager"><li><a href="#" class="prev">＜</a></li><li><a href="#" class="next">＞</a></li></ul>');
102
-
103
- var pager = jQuery('#pager'),
104
-
105
- slidesWrap = jQuery('#slides'),
106
-
107
- slides = jQuery('#slides-inner'),
108
-
109
- slideKiji = slides.find('.slidekiji'),
110
-
111
- slidenav = jQuery('#slides-nav'),
112
-
113
- current = 0,
114
-
115
- number = slideKiji.length;
116
-
117
-
118
-
119
- slideKiji.each(function(i) {
120
-
121
- jQuery(this).css({
122
-
123
- left: '100' * i + '%'
124
-
125
- });
126
-
127
- slidenav.append('<a href="#"></a>');
128
-
129
- });
130
-
131
-
132
-
133
- function navUpdate() {
134
-
135
- slidenav.find('a').removeClass('active');
136
-
137
- slidenav.find('a').eq(current).addClass('active');
138
-
139
- }
140
-
141
-
142
-
143
- function slider(index) {
144
-
145
- if (index < 0) {
146
-
147
- index = number - 1;
148
-
149
- }
150
-
151
- if (index > number - 1) {
152
-
153
- index = 0;
154
-
155
- }
156
-
157
- slides.animate({
158
-
159
- left: '-100' * index + '%'
160
-
161
- });
162
-
163
- current = index;
164
-
165
- navUpdate();
166
-
167
- }
168
-
169
-
170
-
171
- pager.find('a').click(function(event) {
172
-
173
- event.preventDefault();
174
-
175
- if (jQuery(this).hasClass('prev')) {
176
-
177
- slider(current - 1);
178
-
179
- } else {
180
-
181
- slider(current + 1);
182
-
183
- }
184
-
185
- });
186
-
187
-
188
-
189
- slidenav.find('a').click(function(event) {
190
-
191
- event.preventDefault();
192
-
193
- var navIndex = jQuery(this).index();
194
-
195
- navUpdate();
196
-
197
- slider(navIndex);
198
-
199
- });
200
-
201
-
202
-
203
- var start;
204
-
205
-
206
-
207
- function timerStart() {
208
-
209
- start = setInterval(function() {
210
-
211
- slider(current + 1);
212
-
213
- }, 5000);
214
-
215
- }
216
-
217
-
218
-
219
- function timerStop() {
220
-
221
- clearInterval(start);
222
-
223
- }
224
-
225
-
226
-
227
- slider(current);
228
-
229
-
230
-
231
- timerStart();
232
-
233
-
234
-
235
- slideKiji.on({
236
-
237
- mouseover: timerStop,
238
-
239
- mouseout: timerStart
240
-
241
- });
242
-
243
- });
244
-
245
-
246
-
247
- ```
248
-
249
-
250
-
251
239
  よろしくお願いいたします。

1

入力方法編集

2021/02/06 01:32

投稿

kuro-blog
kuro-blog

スコア0

test CHANGED
File without changes
test CHANGED
@@ -2,17 +2,21 @@
2
2
 
3
3
 
4
4
 
5
+ ```JavaScript
6
+
5
7
  jQuery(function($) {
6
8
 
7
9
  jQuery('#slides').append('<ul id="pager"><li><a href="#" class="prev">＜</a></li><li><a href="#" class="next">＞</a></li></ul>');
8
10
 
9
11
 
10
12
 
11
-
13
+ ```
12
-
14
+
15
+
16
+
13
- ｐｈｐのすべてのコード
17
+ すべてのコード
18
+
14
-
19
+ ```php
15
-
16
20
 
17
21
  <div id="slider-area">
18
22
 
@@ -86,9 +90,11 @@
86
90
 
87
91
 
88
92
 
93
+ ```
94
+
95
+
96
+
89
- JavaScriptすべてのコード
97
+ ```JavaScript
90
-
91
-
92
98
 
93
99
  jQuery(function($) {
94
100
 
@@ -236,4 +242,10 @@
236
242
 
237
243
  });
238
244
 
245
+
246
+
247
+ ```
248
+
249
+
250
+
239
251
  よろしくお願いいたします。