【Swiper】でスライダーをアレンジしたい

いつもお世話になっております。

【Swiper】を使って、下記のようなスライダーを作成したいのですが、
上手く作成できず、悩んでおります。

■作成したいスライド

・フル画面
・自動で動く
・レスポンシブ対応
・prevとnextのボタンは赤のスライドの左右に配置
・緑と青のスライドは半透明（opacity:0.8くらいのイメージ）
・緑と青のスライドはクリック不可能（可能であれば）

■できていないこと

・prevとnextのボタンは赤のスライドの左右に配置
↓
どうしても画面の左右に配置されてしまう

・緑と青のスライドは半透明（opacity:0.8くらいのイメージ）
・緑と青のスライドはクリック不可能（可能であれば）
↓
そもそも、緑と青のスライドが画面内に全て見えるように表示されてしまう
例：各スライドの横幅が350pxの場合、100pxくらい見える程度で良いところが、350px全て表示される

■Swiper ※参考にしたサイト

http://sho-tem.com/archives/321
https://www.imd-net.com/blog/2016/05/31-235955/

サイト内で違う形のスライダーも使用したいため、
汎用性が良いと評価の高いSwiperを用いております。

恐れ入りますが、ご教示の程よろしくお願いいたします。

■【追加】ソースは以下です。

HTML
1<div class="swiper-container">
2<div class="swiper-wrapper">
3
4	<div class="swiper-slide"> 
5		<!-- Slide-01 コンテンツを挿入する -->
6	</div>
7
8	<div class="swiper-slide">
9		<!-- Slide-02 コンテンツを挿入する -->
10	</div>
11
12	<div class="swiper-slide">
13		<!-- Slide-02 コンテンツを挿入する -->
14	</div>
15
16	<div class="swiper-slide">
17		<!-- Slide-02 コンテンツを挿入する -->
18	</div>
19
20</div>
21
22	<div class="swiper-button-prev"></div>
23	<div class="swiper-button-next"></div>
24
25</div>

CSS
1.main_slider { width:100%; margin:20px 0; text-align:center; padding:10px; }
2.main_slider img { max-width:840px; width:100%; }

javascript
1<script>
2var swiper = new Swiper('.swiper-container', {
3
4	slidesPerView: 3,
5	autoplay: 5000,
6	speed: 1000,
7	loop: true,
8        pagination: '.swiper-pagination',
9
10	// ナビゲーションボタン
11	nextButton: '.swiper-button-next',
12	prevButton: '.swiper-button-prev',
13
14	// 1スライドごとの余白
15    spaceBetween: 20
16
17});
18</script>

kei344

2016/12/01 18:10

具体的にHTMLおよびCSS、JavaScriptなどを質問文に追記いただいたほうが回答を得られやすいと思います。

scoa

2016/12/02 01:13

ありがとうございます。ソースを追記いたしました。

行動規範の内容に同意します

回答1件

ベストアンサー

div.container を外側に付けた以外はJavaScriptもHTMLもほぼ変更無し。

CSS
1.container {
2	overflow: hidden;
3	width: 50vw;
4}
5.swiper-container {
6	width: 100vw;
7	margin: 0 -25vw;
8}
9.swiper-button-prev {
10	left: calc(10px + 25vw);
11}
12.swiper-button-next {
13	right: calc(10px + 25vw);
14}
15.swiper-slide {
16	pointer-events: none;
17	opacity: .5;
18	-webkit-transition: opacity .5s;
19	-moz-transition: opacity .5s;
20	-ms-transition: opacity .5s;
21	-o-transition: opacity .5s;
22	transition: opacity .5s;
23}
24.swiper-slide-next {
25	pointer-events: auto;
26	opacity: 1;
27}
28.swiper-slide img {
29	width: 100%;
30}
31```**動くサンプル1：**[https://jsfiddle.net/434sr9m6/](https://jsfiddle.net/434sr9m6/)
32**動くサンプル2：**[https://jsfiddle.net/434sr9m6/1/](https://jsfiddle.net/434sr9m6/1/)
33
34
35
36---
37
38【pointer-events - CSS | MDN】
39[https://developer.mozilla.org/ja/docs/Web/CSS/pointer-events](https://developer.mozilla.org/ja/docs/Web/CSS/pointer-events)