swiper（または類似のライブラリ）を使用して半画面幅をスクロールする

Question

現在、swiper.js（this one、その名前のライブラリが複数あるようです）を使用してモバイルアプリを開発しています。私はそれを設定する方法を見つけようとしています。そのスライドの1つに対して、画面を半分だけスクロールするようにしています。 demoは、私が望むものにと同じようにを実行しています。これは可能なはずですが、私はそれを動作させる方法を理解できません。

はあなたにもっと正確な詳細を与えるために、私が欲しいのは、このように見えるレイアウトすることです：

+----+ +-----------+ +-----------+ 
| | | +---+---+ | |   | 
| | | | | | | |   | 
| A | | | B | C | | |  D  | 
| | | | | | | |   | 
| | | +---+---+ | |   | 
+----+ +-----------+ +-----------+ 

を、私は、ビューポートはいずれにも配置することができるようにスワイプのジェスチャーを使用できるようにしたいです

+-------------+ 
|+----+ +-----+-----+ +-----------+ 
|| | | +---+---+ | |   | 
|| | | | | | | |   | 
|| A | | | B | C | | |  D  | 
|| | | | | | | |   | 
|| | | +---+---+ | |   | 
|+----+ +-----+-----+ +-----------+ 
+-------------+ 

     +-------------+ 
+----+|+-----+-----+|+-----------+ 
| ||| +---+---+ |||   | 
| ||| | | | |||   | 
| A ||| | B | C | |||  D  | 
| ||| | | | |||   | 
| ||| +---+---+ |||   | 
+----+|+-----+-----+|+-----------+ 
     +-------------+ 

        +-------------+ 
+----+ +-----+-----+|+-----------+| 
| | | +---+---+ |||   || 
| | | | | | |||   || 
| A | | | B | C | |||  D  || 
| | | | | | |||   || 
| | | +---+---+ |||   || 
+----+ +-----+-----+|+-----------+| 
        +-------------+ 

私はswiper-slideクラスにwidth: 100%を削除するには、スタイルの設定を変更し、slidesPerView: "auto"設定settiを使用して、右取り組ん最初の二つのビューの設定を取得するために管理：次の方法2番目のビューから右にスワイプすると、画面にCとDの半分が表示され、さらにスワイプできなくなり、Dをすべて表示できなくなります。

これを動作させるにはどうすればよいですか？私は、絶対に必要な場合は、別のライブラリに切り替えるのに嫌うことはありません。

Answer 1

それは、答えは私が最初に動作するように期待していたまさにほとんどだっ判明：

var swiper = new Swiper ('.swiper-container', { 
 
    slidesPerView: "auto" 
 
    }); 
 

.swiper-container { 
 
    width: 300px; 
 
    height: 400px; 
 
} 
 
.swiper-slide { 
 
    height: 400px; 
 
    border: 1px solid red; 
 
} 
 

 
.swiper-slide > div { 
 
    height: 100%; 
 
    border: 1px solid blue; 
 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css"> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script> 
 

 
<!-- Slider main container --> 
 
<div class="swiper-container"> 
 
    <!-- Additional required wrapper --> 
 
    <div class="swiper-wrapper"> 
 
     <!-- Slides --> 
 
     <div class="swiper-slide" style="width:150px">A</div> 
 
     <div class="swiper-slide" style="display:flex; flex-flow: row nowrap"> 
 
      <div style="flex-grow: 1">B</div><div style="flex-grow: 1">C</div> 
 
     </div> 
 
     <div class="swiper-slide">D</div> 
 
    </div> 
 
</div>

私が使っていたので、私は、これはすぐに仕事を得ることができなかった唯一の理由でしたライブラリをReactと統合するためのラッパーです。これは余分なdivを作成していたため、設定がデフォルトの幅を正しく上書きしていないことを意味していました。