2016-04-13 8 views
2

Die Idee ist ein statisches Bild, aber warten Sie ... es ist kein statisches Bild, es ist nur eine Diashow, die nicht bewegt, so dass Sie denken, es ist ein statisches Bild. Aber dann schweben Sie mit der Maus darüber und es beginnt sich zu bewegen! Ich habe es ein paar Stellen im Web gesehen und es ist ziemlich wie sein Effekt, aber kann Bootstrap nicht bekommen, um es nachzuahmen.Bootstrap Karussell Übergang ON Hover nur

Alle meine Suchen ergeben Ergebnisse für Leute, die versuchen, es beim Schweben zu pausieren (kann jemand Dokumentation sagen ...), aber nichts, das Gegenteil zu tun. Wie auch immer, hier ist der Grund-Code ...

HTML ~ Eine sehr abgespeckte Diashow

<div class="carousel slide" data-ride="carousel"> 
    <!-- Wrapper for slides --> 
    <div class="carousel-inner" role="listbox"> 
     <div class="item active"> 
      <img src="images/image1.jpg" alt="Image one"> 
     </div> 
     <div class="item "> 
      <img src="images/image2.jpg" alt="Image two"> 
     </div> 
    </div> 
</div> 

Und hier ist die JS

$('.carousel').carousel({ 
     interval: false, //disable auto scrolling 
     pause: false  //prevent pause on hover... we want the opposite 
    }); 

//now I try to change the interval on hover 
$('.carousel').hover(function(){ 
    $(this).carousel({ 
     interval:1000 
    }) 
}); 
+0

können Sie verweisen: https://jsfiddle.net/hibbard_eu/GArs3/ Wenn Sie eine andere Lösung habe, bitte schreiben, wie ich auch für gleiche Suche und bekam bei der oben erwähnten Verknüpfung. – dips

Antwort

1

Es gibt zwei Dinge, auf denen diese Radfahren und Pausieren abhängt .

Ursprünglich Wenn Maus betritt (MouseEnter- - Pause Schiebe) Wenn Maus Blätter (mouseleave - wieder aufnehmen Schiebe)

Gerade folgende Codezeile ändern in Ihrem js/bootstrap.js Datei kontinuierliche Gleiten zu ermöglichen.

.on ('MouseEnter-', $ .proxy (dies. Pause, this)) -

.on ('MouseEnter-', .proxy $ (this. Zyklus, this))

Und

.on ('mouseleave', $ .proxy (dies. Zyklus, this)) -

.on ('mouseleave', $ .proxy (this. Pause,

this))