モバイルでdivでスワイプ可能な水平スクロール

Question

メイン画像フレームがあるページがあり、その下にサムネイルがあります。 ユーザがサムネイルをクリックすると、メイン画像フレームは、クリックされたサムネイルに表示されている画像に画像を変更します。カルーセルのように。 下の画像を参照してください。

私の問題は、ユーザーが20個のサムネイルを追加する場合、私はすべてを表示したくないということです。サムネイルには常に3だけを表示して携帯でスワイプできますので、横にスクロールしてサムネイルをブラウズできます。

<div class="main-image-frame"> 
    <img src="img.jpg"> 
</div> 
<div class="thumbnail-container"> 
    <div class="thumbnail> 
    <img src="tnail.jpeg"> 
    </div> 
    <div class="thumbnail> 
    <img src="tnail.jpeg"> 
    </div> 
    <div class="thumbnail> 
    <img src="tnail.jpeg"> 
    </div> 
    <div class="thumbnail> 
    <img src="tnail.jpeg"> 
    </div> 
    <div class="thumbnail> 
    <img src="tnail.jpeg"> 
    </div> 
    <div class="thumbnail> 
    <img src="tnail.jpeg"> 
    </div> 
</div> 

私はモバイルで、それは水平スクロールやスワイプ作るにはどうすればよい：

それでは、私のコードがあるとしましょうか？私は、CSSやJSの組み合わせを推測するが、私は何のアイデアはどのように

Answer 1

JavaScriptを使用する必要を開始しないことがあります。それはCSSを使用して行うことができます。以下、各サムネイルのためのそして

overflow-x:scroll; 
white-space:nowrap; 

た：

display:inline-block; 

.container { 
 
    background-color:red; 
 
    height:100px; 
 
    width:calc(100% - 40px); 
 
    margin:10px; 
 
    overflow-x:scroll; 
 
    padding:10px; 
 
    white-space: nowrap; 
 
} 
 
    
 
.thumbnail { 
 
    background-color:blue; 
 
    display:inline-block; 
 
    height:100%; 
 
    width:30%; 
 
} 
 
.thumbnail img { 
 
    height:100%; 
 
    width:100%; 
 
}

<div class="container"> 
 
    <div class="thumbnail"> 
 
    <img src="http://www.bobbyberberyan.com/wp-content/uploads/2012/03/HTML5CSS3Logos.svg"></img> 
 
    </div> 
 
    <div class="thumbnail"> 
 
    <img src="http://www.bobbyberberyan.com/wp-content/uploads/2012/03/HTML5CSS3Logos.svg"></img> 
 
    </div> 
 
    <div class="thumbnail"> 
 
    <img src="http://www.bobbyberberyan.com/wp-content/uploads/2012/03/HTML5CSS3Logos.svg"></img> 
 
    </div> 
 
    <div class="thumbnail"> 
 
    <img src="http://www.bobbyberberyan.com/wp-content/uploads/2012/03/HTML5CSS3Logos.svg"></img> 
 
    </div> 
 
    <div class="thumbnail"> 
 
    <img src="http://www.bobbyberberyan.com/wp-content/uploads/2012/03/HTML5CSS3Logos.svg"></img> 
 
    </div> 
 
    <div class="thumbnail"> 
 
    <img src="http://www.bobbyberberyan.com/wp-content/uploads/2012/03/HTML5CSS3Logos.svg"></img> 
 
    </div> 
 
    <div class="thumbnail"> 
 
    <img src="http://www.bobbyberberyan.com/wp-content/uploads/2012/03/HTML5CSS3Logos.svg"></img> 
 
    </div> 
 
</div>

は、2つの重要な特性を一定幅にコンテナを設定し、それを与えます