質問編集履歴

3

説明を追記

2016/12/02 01:22

投稿

scoa
scoa

スコア66

test CHANGED
File without changes
test CHANGED
@@ -156,6 +156,8 @@
156
156
 
157
157
 
158
158
 
159
+ slidesPerView: 3,
160
+
159
161
  autoplay: 5000,
160
162
 
161
163
  speed: 1000,

2

説明の追記

2016/12/02 01:22

投稿

scoa
scoa

スコア66

test CHANGED
File without changes
test CHANGED
@@ -73,3 +73,115 @@
73
73
 
74
74
 
75
75
  恐れ入りますが、ご教示の程よろしくお願いいたします。
76
+
77
+
78
+
79
+
80
+
81
+
82
+
83
+ ■【追加】ソースは以下です。
84
+
85
+ ---
86
+
87
+ ```HTML
88
+
89
+ <div class="swiper-container">
90
+
91
+ <div class="swiper-wrapper">
92
+
93
+
94
+
95
+ <div class="swiper-slide">
96
+
97
+ <!-- Slide-01 コンテンツを挿入する -->
98
+
99
+ </div>
100
+
101
+
102
+
103
+ <div class="swiper-slide">
104
+
105
+ <!-- Slide-02 コンテンツを挿入する -->
106
+
107
+ </div>
108
+
109
+
110
+
111
+ <div class="swiper-slide">
112
+
113
+ <!-- Slide-02 コンテンツを挿入する -->
114
+
115
+ </div>
116
+
117
+
118
+
119
+ <div class="swiper-slide">
120
+
121
+ <!-- Slide-02 コンテンツを挿入する -->
122
+
123
+ </div>
124
+
125
+
126
+
127
+ </div>
128
+
129
+
130
+
131
+ <div class="swiper-button-prev"></div>
132
+
133
+ <div class="swiper-button-next"></div>
134
+
135
+
136
+
137
+ </div>
138
+
139
+ ```
140
+
141
+ ```CSS
142
+
143
+ .main_slider { width:100%; margin:20px 0; text-align:center; padding:10px; }
144
+
145
+ .main_slider img { max-width:840px; width:100%; }
146
+
147
+ ```
148
+
149
+
150
+
151
+ ```javascript
152
+
153
+ <script>
154
+
155
+ var swiper = new Swiper('.swiper-container', {
156
+
157
+
158
+
159
+ autoplay: 5000,
160
+
161
+ speed: 1000,
162
+
163
+ loop: true,
164
+
165
+ pagination: '.swiper-pagination',
166
+
167
+
168
+
169
+ // ナビゲーションボタン
170
+
171
+ nextButton: '.swiper-button-next',
172
+
173
+ prevButton: '.swiper-button-prev',
174
+
175
+
176
+
177
+ // 1スライドごとの余白
178
+
179
+ spaceBetween: 20
180
+
181
+
182
+
183
+ });
184
+
185
+ </script>
186
+
187
+ ```

1

説明を追記

2016/12/02 01:13

投稿

scoa
scoa

スコア66

test CHANGED
File without changes
test CHANGED
@@ -14,6 +14,8 @@
14
14
 
15
15
  ■作成したいスライド
16
16
 
17
+ ---
18
+
17
19
  ・フル画面
18
20
 
19
21
  ・自動で動く
@@ -28,7 +30,35 @@
28
30
 
29
31
 
30
32
 
33
+ ■できていないこと
34
+
35
+ ---
36
+
37
+ ・prevとnextのボタンは赤のスライドの左右に配置
38
+
39
+
40
+
41
+ どうしても画面の左右に配置されてしまう
42
+
43
+
44
+
45
+ ・緑と青のスライドは半透明(opacity:0.8くらいのイメージ)
46
+
47
+ ・緑と青のスライドはクリック不可能(可能であれば)
48
+
49
+
50
+
51
+ そもそも、緑と青のスライドが画面内に全て見えるように表示されてしまう
52
+
53
+ 例:各スライドの横幅が350pxの場合、100pxくらい見える程度で良いところが、350px全て表示される
54
+
55
+
56
+
57
+
58
+
31
59
  ■Swiper ※参考にしたサイト
60
+
61
+ ---
32
62
 
33
63
  [http://sho-tem.com/archives/321](http://sho-tem.com/archives/321)
34
64