質問編集履歴

3

必要の無い部分を修正しました。

2018/04/08 17:34

投稿

yukochan
yukochan

スコア26

test CHANGED
File without changes
test CHANGED
@@ -78,35 +78,11 @@
78
78
 
79
79
  <script src="<?php print get_template_directory_uri(); ?>/js/swiper.js"></script>
80
80
 
81
- <script>
81
+ <script>
82
82
 
83
- function slideSwiper(index) {
83
+ var swiper = new Swiper('.swiper-container');
84
84
 
85
- swiper.slideTo(index);
86
-
87
- }
88
-
89
-
90
-
91
- var swiper; //グローバル変数
92
-
93
-
94
-
95
- //Swiper生成
96
-
97
- var mySwiper = new Swiper('.swiper-container', {
98
-
99
- navigation: {
100
-
101
- nextEl: '.swiper-button-next',
102
-
103
- prevEl: '.swiper-button-prev',
104
-
105
- },
106
-
107
- });
108
-
109
- </script>
85
+ </script>
110
86
 
111
87
 
112
88
 
@@ -140,7 +116,7 @@
140
116
 
141
117
 
142
118
 
143
-
119
+ ```
144
120
 
145
121
 
146
122
 

2

cssの一部削除

2018/04/08 17:34

投稿

yukochan
yukochan

スコア26

test CHANGED
File without changes
test CHANGED
@@ -140,30 +140,6 @@
140
140
 
141
141
 
142
142
 
143
- /**/
144
-
145
- .swiper-pagination-thumb{
146
-
147
- width: 100px;
148
-
149
- height: 60px;
150
-
151
- display: inline-block;
152
-
153
- background-size: contain;
154
-
155
- background-repeat: no-repeat;
156
-
157
- background-position: center;
158
-
159
- border: 3px solid #eee;
160
-
161
- margin: 5px;
162
-
163
- cursor: pointer;
164
-
165
- }
166
-
167
143
 
168
144
 
169
145
 

1

JavaScript、css部分のコードも記載しました。余分な処理(ページネーション部分などを削除しました)

2018/04/08 07:43

投稿

yukochan
yukochan

スコア26

test CHANGED
File without changes
test CHANGED
@@ -13,6 +13,8 @@
13
13
  ヒントでも何でもいいのでご教授お願いします・・・。
14
14
 
15
15
 
16
+
17
+ JavaScript、css部分のコードも記載しました。
16
18
 
17
19
 
18
20
 
@@ -34,7 +36,7 @@
34
36
 
35
37
 
36
38
 
37
- ```php
39
+ ```phpとhtml (wordpressの出力部分)
38
40
 
39
41
 
40
42
 
@@ -64,17 +66,107 @@
64
66
 
65
67
  </div>
66
68
 
67
- //↓ページネーションとか
68
-
69
- <div class="swiper-button-next swiper-button-white"></div>
70
-
71
- <div class="swiper-button-prev swiper-button-white"></div>
72
-
73
69
  </div>
74
70
 
71
+ ```
72
+
73
+
74
+
75
+ ```footerのjs記述部分
76
+
77
+
78
+
75
- <div class="swiper-pagination-thumbs"></div>
79
+ <script src="<?php print get_template_directory_uri(); ?>/js/swiper.js"></script>
80
+
81
+ <script>
82
+
83
+ function slideSwiper(index) {
84
+
85
+ swiper.slideTo(index);
86
+
87
+ }
88
+
89
+
90
+
91
+ var swiper; //グローバル変数
92
+
93
+
94
+
95
+ //Swiper生成
96
+
97
+ var mySwiper = new Swiper('.swiper-container', {
98
+
99
+ navigation: {
100
+
101
+ nextEl: '.swiper-button-next',
102
+
103
+ prevEl: '.swiper-button-prev',
104
+
105
+ },
106
+
107
+ });
108
+
109
+ </script>
110
+
111
+
76
112
 
77
113
  ```
114
+
115
+
116
+
117
+ ```CSS
118
+
119
+
120
+
121
+ .swiper-container {
122
+
123
+ width: 100%;
124
+
125
+ height: 200px;
126
+
127
+ }
128
+
129
+ .swiper-slide {
130
+
131
+ background-size: contain;
132
+
133
+ background-repeat: no-repeat;
134
+
135
+ background-position: center;
136
+
137
+
138
+
139
+ }
140
+
141
+
142
+
143
+ /**/
144
+
145
+ .swiper-pagination-thumb{
146
+
147
+ width: 100px;
148
+
149
+ height: 60px;
150
+
151
+ display: inline-block;
152
+
153
+ background-size: contain;
154
+
155
+ background-repeat: no-repeat;
156
+
157
+ background-position: center;
158
+
159
+ border: 3px solid #eee;
160
+
161
+ margin: 5px;
162
+
163
+ cursor: pointer;
164
+
165
+ }
166
+
167
+
168
+
169
+
78
170
 
79
171
 
80
172
 
@@ -85,6 +177,8 @@
85
177
  画像フィールドを読み込んでいく場合のスライダーは作れたのですが
86
178
 
87
179
  ギャラリーでforeachを使ってもうまくいきませんでした。
180
+
181
+
88
182
 
89
183
 
90
184