垂直ブートストラップマウススクロールのカルーセル - しばらくの間スクロールした後に発生する

マウスが約50ピクセルアップ/ダウンするときにのみ、ブートストラップカルーセルを垂直方向に上下にスライドさせたい。どうすればこれを達成できますか？垂直ブートストラップマウススクロールのカルーセル - しばらくの間スクロールした後に発生する

は、ここに私のHTMLファイルです： -

<!DOCTYPE html> 
<html> 
<head> 
    <title>Carousel</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

    <link rel="stylesheet" type="text/css" href="style.css"> 

    <script> 
     $(document).ready(function(){ 
     // invoke the carousel 
      $('#imageCarousel').carousel(
      { 
       interval: false 
      }); 

     // scroll slides on mouse scroll 
      $('#imageCarousel').bind('mousewheel DOMMouseScroll', function(e) { 
       if(e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) 
       { 
        $(this).carousel('prev'); 
       } 
       else 
       { 
        $(this).carousel('next'); 
       } 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <h1>This is Archi</h1> 
    <div class="container archiImage"> 
     <div class="row"> 
      <div class="col-md-8 col-md-offset-4"> 
       <div id="imageCarousel" class="carousel slide vertical" data-wrap="false" data-pause="false" data-interval="4000" data-ride="carousel"> 
        <div class="carousel-inner"> 

         <div class="item active"> 
          <img src="./images/1.png" class="img-responsive" alt="firstImage"> 
          <div class="carousel-caption"> 
           <p>Pay friend - <span>Zahra Abdulla</span></p> 
          </div> 
         </div> 

         <div class="item"> 
          <img src="./images/2.png" class="img-responsive" alt="secondImage"> 
          <div class="carousel-caption"> 
           <p>Split Payment - <span>Zahra Abdulla</span></p> 
          </div> 
         </div> 

         <div class="item"> 
          <img src="./images/3.png" class="img-responsive" alt="thirdImage"> 
          <div class="carousel-caption"> 
           <p>Cash Out - <span>Zahra Abdulla</span></p> 
          </div> 
         </div> 

         <div class="item"> 
          <img src="./images/4.png" class="img-responsive" alt="fourthImage"> 
          <div class="carousel-caption"> 
           <p>Spending Money Out - <span>Zahra Abdulla</span></p> 
          </div> 
         </div> 

         <div class="item"> 
          <img src="./images/5.png" class="img-responsive" alt="fifthImage"> 
          <div class="carousel-caption"> 
           <p>Pay bill - <span>Zahra Abdulla</span></p> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <p>deugijfvfsgdbhtfyjgufsty</p><br> 
    <p>deugijfvfsgdbhtfyjgufsty</p><br> 
    <p>deugijfvfsgdbhtfyjgufsty</p><br> 
    <p>deugijfvfsgdbhtfyjgufsty</p><br> 
    <p>deugijfvfsgdbhtfyjgufsty</p><br> 
    <p>deugijfvfsgdbhtfyjgufsty</p><br> 
    <p>deugijfvfsgdbhtfyjgufsty</p><br> 
    <p>deugijfvfsgdbhtfyjgufsty</p><br> 
    <p>deugijfvfsgdbhtfyjgufsty</p><br> 
    <p>deugijfvfsgdbhtfyjgufsty</p><br> 
    <p>deugijfvfsgdbhtfyjgufsty</p><br> 
    <p>deugijfvfsgdbhtfyjgufsty</p><br> 
    <p>deugijfvfsgdbhtfyjgufsty</p><br> 
    <p>deugijfvfsgdbhtfyjgufsty</p><br> 
    <p>deugijfvfsgdbhtfyjgufsty</p><br> 
    <p>deugijfvfsgdbhtfyjgufsty</p><br> 
    <p>deugijfvfsgdbhtfyjgufsty</p><br> 
    <p>deugijfvfsgdbhtfyjgufsty</p><br> 
    <p>deugijfvfsgdbhtfyjgufsty</p><br> 
    <p>deugijfvfsgdbhtfyjgufsty</p><br> 
    <p>deugijfvfsgdbhtfyjgufsty</p><br> 
    <p>deugijfvfsgdbhtfyjgufsty</p><br> 
    <p>deugijfvfsgdbhtfyjgufsty</p><br> 
    <p>deugijfvfsgdbhtfyjgufsty</p><br> 
    <p>deugijfvfsgdbhtfyjgufsty</p><br> 
    <p>deugijfvfsgdbhtfyjgufsty</p><br> 
</body> 
</html>

私も私のCSSファイルを含めました： - ：

Carousel 
-images 
    -1.png 
    -2.png 
    -3.png 
    -4.png 
    -5.png 
-index.html 
-style.css

カルーセル -

img { 
    height: 500px; 
    width: 300px; 
} 
.archiImage { 
    position: fixed; 
    top: 0; 
} 



.vertical .carousel-inner { 
    height: 100%; 
} 

.carousel.vertical .item { 
    -webkit-transition: 0.6s ease-in-out top; 
    -moz-transition: 0.6s ease-in-out top; 
     -ms-transition: 0.6s ease-in-out top; 
     -o-transition: 0.6s ease-in-out top; 
      transition: 0.6s ease-in-out top; 
} 

.carousel.vertical .active { 
    top: 0; 
} 

.carousel.vertical .next { 
    top: 400px; 
} 

.carousel.vertical .prev { 
    top: -400px; 
} 

.carousel.vertical .next.left, 
.carousel.vertical .prev.right { 
    top: 0; 
} 

.carousel.vertical .active.left { 
    top: -400px; 
} 

.carousel.vertical .active.right { 
    top: 400px; 
} 

.carousel.vertical .item { 
    left: 0; 
}

はここに私のディレクトリ構造ですわずかなタッチでスライドします - 私は起こりたくないですが、その代わりに画像は上下にスクロールして変更する必要がありますしばらく。これをどのように達成するのですか？前もって感謝します。

出典

2017-11-21 Archita Sundaray

cssデザインファイルでは、mouseWheel: true;を追加して、次のような希望を出すかどうか確認できますか？

.carousel.vertical .item 
{ 
    left: 0; 
    mouseWheel: true; 
}

出典

2017-11-22 05:10:11

ここ –

を動作しませんでしたありませんが、ページのための私のgithubのリンクです - https://archiie.github.io/ - https://github.com/Archiie/testingCarouselはまた、私はgithubのページを主催してきましたtestingCarousel/ –

さて、私は後でそれを見てみましょう –

垂直ブートストラップマウススクロールのカルーセル - しばらくの間スクロールした後に発生する

答えて

関連する問題