Vertikales Bootstrap-Karussell beim Maus-Scrollen - erscheint nach dem Scrollen für eine Weile

Ich möchte, dass das Bootstrap-Karussell nur dann vertikal nach oben/unten gleitet, wenn die Maus etwa 50px hoch/runter scrollt. Wie kann ich das erreichen?Vertikales Bootstrap-Karussell beim Maus-Scrollen - erscheint nach dem Scrollen für eine Weile

hier ist meine HTML-Datei: -

<!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>

Ich habe auch meine CSS-Datei enthalten: -

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; 
}

hier ist meine Verzeichnisstruktur: -

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

Das Karussell Dias bei einer leichten Berührung - was ich nicht möchte, stattdessen sollten sich die Bilder nach dem Scrollen nach oben/unten ändern während. Wie erreiche ich das? Danke im Voraus.

Quelle

2017-11-21 Archita Sundaray

In css Design-Datei können Sie mouseWheel: true; hinzufügen und prüfen, ob es die gewünschte reuslt wie folgt ausgibt.

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

Quelle

2017-11-22 05:10:11

keine, die nicht –

funktionierte hier ist mein Github Link für die Seite - https://github.com/Archiie/testingCarousel auch habe ich gehostet Github Seite - https://archiie.github.io/ testingCarousel/ –

Okay, ich werde es mir später ansehen –

Vertikales Bootstrap-Karussell beim Maus-Scrollen - erscheint nach dem Scrollen für eine Weile

Antwort

Verwandte Themen