横のスライドショー

Question

Hy男、私はあなたに助けを求めることができますbeacuse私はモバイルデバイスのための水平スライドショーを行うことができます。

これは私のCSSコードです：

#offers { 
     background-color: #ebeff2; 
     padding-bottom:20px; 
    } 
    .slideshow { 
     z-index: 1000; 
     max-width: 370px; 
    } 
    .slideshow ul { 
     margin:0px; 
     padding:0px; 
     list-style: none; 

     width: 2000px; 
     overflow-x: visible; 
     z-index: 5; 
    } 
    .slideshow ul li { 
     padding:10px; 
     background-color:#fff; 
     position: relative; 
     text-align: center; 

     float:left; 
    } 
    .slideshow ul li img.background{ 
     width: 326px; 
     height: 244px; 
    } 

    .slideshow ul li .name { 
     position: absolute; 
     top:40px; 
     background-color: #fff; 
     width: 95%; 
    } 

    .slideshow ul li .name img { 
     height: 62px; 
    } 

    .slideshow ul li .price { 
     border-radius: 100%; 
     background-color: #fff; 
     height: 80px; 
     width: 80px; 
     position: absolute; 
     bottom: 60px; 
     left: 38%; 
     font-weight: 900; 
     font-size: 25px; 
     line-height: 80px; 
     color: #ff6d06; 
    } 

そしてここでのHTMLコード：

だから、

<div class="row" id="offers"> 
     <div class="col-md-12"> 
      <h2>Alcune Offerte Attive</h2> 
     </div> 
     <div class="col-md-12"> 
      <div class="slideshow"> 
       <ul> 
        <li> 
         <div class=""> 
          <img src="./images/img.jpg" class="img-fluid background"> 
          <div class="name"> 
           <img src="./images/logo.png" class="img-fluid"> 
          </div> 
          <div class="price"> 
           10 &euro; 
          </div> 
         </div> 
        </li> 
        <li> 
         <div class=""> 
          <img src="./images/img.jpg" class="img-fluid background"> 
          <div class="name"> 
           <img src="./images/logo.png" class="img-fluid"> 
          </div> 
          <div class="price"> 
           10 &euro; 
          </div> 
         </div> 
        </li> 
        <li> 
         <div class=""> 
          <img src="./images/img.jpg" class="img-fluid background"> 
          <div class="name"> 
           <img src="./images/logo.png" class="img-fluid"> 
          </div> 
          <div class="price"> 
           10 &euro; 
          </div> 
         </div> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </div> 

、実際の結果は非常に簡単です：

しかし、私は "固定幅を持っていると思っている私はscroolすることができますモバイル画面として "thスライド"。実際には小さなボックスは、携帯電話の画面サイズよりも大きい、私はすでにスライドショークラスに固定して追加しようとしましたが、私はオーバーフローxスクロールを追加しましたが、うまくいかないと思われます。

ご協力いただきありがとうございます。

UPDATE

あなたは私が探しているものを見ることができます。このリンクでのように、私のリクエストが混同されて

：link

Answer 1

まあは、まず、あなたの質問が混乱して、あなたは簡単なCSSメディアクエリを聞いたことがあります。私はあなたのコードとすべての外部のスタイルのルールからカットすることを教えてください、インラインスタイルはあまりお勧めではありませんが、私はあなたにも、CSSのメディアクエリでそれを行う方法を示します。あなたはイメージの高さをコントロールしたいと思っています。コード

 <div class="slideshow"> 
      <ul> 
       <li> 
        <div class="mobile1"> 
         <img src="./images/img.jpg" class="img-fluid background simple"> 
         <div class="name"> 
          <img src="./images/logo.png" class="img-fluid"> 
         </div> 
         <div class="price"> 
          10 &euro; 
         </div> 
        </div> 
       </li> 
       <li> 
        <div class="mobile2"> 
         <img src="./images/img.jpg" class="img-fluid background simple"> 
         <div class="name"> 
          <img src="./images/logo.png" class="img-fluid"> 
         </div> 
         <div class="price"> 
          10 &euro; 
         </div> 
        </div> 
       </li> 
       <li> 
        <div class="mobile3"> 
         <img src="./images/img.jpg" class="img-fluid background simple"> 
         <div class="name"> 
          <img src="./images/logo.png" class="img-fluid"> 
         </div> 
         <div class="price"> 
         10 &euro; 
         </div> 
        </div> 
       </li> 
      </ul> 
     </div> 

これが機能しない場合は、私の注意を促してください。

 <style> 
    @media screen and (max-width: 820px) { //MEDIA QUERIES, RESEARCH MORE ON THEM. WHAT I AM SAYING HERE IS, IF SCREEN IS LESS THAN 820px a desktop size apply that media screen css. 
     .mobile1{ 
     height:300px; //adjust this to your taste 
     width:100%; //to make image fill screen horizontally 
     } 

    .mobile2{ 
     height:300px; //adjust this to your taste 
     width:100%; //to make image fill screen horizontally 
     } 


     .mobile3{ 
     height:300px; //adjust this to your taste 
     width:100%; //to make image fill screen horizontally 
     } 


     .simple{ 
     height:100%; 
     width:100%; 
     } 
     } 
     </style>