ホバー上でカルーセルを起動する

私は、カルーセルをユーザーがその上に置いたときに回転を開始しようとしています。ホバー上でカルーセルを起動する

ここ

function onHover() { 
    $('.myCarousel').carousel({ 
     interval: 2000 
    }) 
}

は私が機能onHoverを呼び出していますHTMLコードです：以下は、私はカルーセルを開始するために使用していますJavascriptがあります。

<div id="myCarousel" class="carousel slide"> 
    <!-- Indicators --> 
    <ol class="carousel-indicators"> 
     <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
     <li data-target="#myCarousel" data-slide-to="1"></li> 
     <li data-target="#myCarousel" data-slide-to="2"></li> 
    </ol> 

    <!-- Wrapper for slides --> 
    <div class="carousel-inner" role="listbox"> 
     <div class="item active"> 
      <div class="container"> 
       <h3>Heading 3</h3> 
       <h1 class="col-md-9">This is a test</h1> 
      </div> 
      <img src="image.jpg" onmouseover="onHover();" /> 
     </div>

私はここで間違っつもりどこかわからない、私はそれが原因"class="carousel slide"に設定されているクラスになるかもしれないと思うが、私は任意の助けをいただければ幸いです、わかりません。

出典

2016-05-12 Martin

あなたはjsfiddleを提供できますか？ – davidbucka

@RoryMcCrossan私はjQueryとBootstrapを使用しています – Martin

@Martin私は自分の答えをフィドルでテストしていませんが、各イメージホバーでカルーセルが再起動するのを防ぐロジックが必要だと思います。 –

私が望まないのは、imgホバーごとにカルーセルを再起動することです。このようなことをやってみてください。ここで

var carouselStart = "stopped"; 
var imgs = $(".carousel-inner").find("img"); 

$.each(imgs,function(i,v) { 
if(carouselStart=="stopped") { 
$(v).on('mouseover',function() { 
$('.myCarousel').carousel({ 
     interval: 2000 
    }); 
carouselStart = "started"; 
}); 
} 
});

出典

2016-05-12 08:24:04

は、それはあなたのマークアップでIDであるのに対し、あなたはmyCarousel（.myCarousel）のクラスを標的にしているcarousel

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
<meta charset="UTF-8"> 
 
<title>Activate Bootstrap 3 Carousel via JavaScript</title> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<script type="text/javascript"> 
 
$(document).ready(function(){ 
 
    // Activate carousel 
 
    $("#myCarousel").carousel(); 
 
    
 
    // Enable carousel control 
 
\t $(".left").click(function(){ 
 
    \t $("#myCarousel").carousel('prev'); 
 
    }); 
 
    $(".right").click(function(){ 
 
    \t $("#myCarousel").carousel('next'); 
 
    }); 
 
    
 
    // Enable carousel indicators 
 
    $(".slide-one").click(function(){ 
 
    \t $("#myCarousel").carousel(0); 
 
    }); 
 
    $(".slide-two").click(function(){ 
 
    \t $("#myCarousel").carousel(1); 
 
    }); 
 
    $(".slide-three").click(function(){ 
 
    \t $("#myCarousel").carousel(2); 
 
    }); 
 
}); 
 
</script> 
 
<style type="text/css"> 
 
.carousel{ 
 
    background: #2f4357; 
 
    margin-top: 20px; 
 
} 
 
.carousel .item img{ 
 
    margin: 0 auto; /* Align slide image horizontally center */ 
 
} 
 
.bs-example{ 
 
\t margin: 20px; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 
<div class="bs-example"> 
 
    <div id="myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel"> 
 
    \t <!-- Carousel indicators --> 
 
     <ol class="carousel-indicators"> 
 
      <li class="slide-one active"></li> 
 
      <li class="slide-two"></li> 
 
      <li class="slide-three"></li> 
 
     </ol> 
 
     <!-- Wrapper for carousel items --> 
 
     <div class="carousel-inner"> 
 
      <div class="active item"> 
 
       <img src="../images/slide1.png" alt="First Slide"> 
 
      \t \t <div class="carousel-caption"> 
 
        <h3>First slide label</h3> 
 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
       </div> 
 
      </div> 
 
      <div class="item"> 
 
       <img src="http://images.nymag.com/images/2/daily/2008/12/20081203_google_250x250.jpg" alt="Second Slide"> 
 
       <div class="carousel-caption"> 
 
        <h3>Second slide label</h3> 
 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
       </div> 
 
      </div> 
 
      <div class="item"> 
 
       <img src="http://www.cestlaviebistro.com/wp-content/uploads/2014/04/Google-Plus-Logo-250x250.png" alt="Third Slide"> 
 
       <div class="carousel-caption"> 
 
        <h3>Third slide label</h3> 
 
        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <!-- Carousel controls --> 
 
     <a class="carousel-control left"> 
 
      <span class="glyphicon glyphicon-chevron-left"></span> 
 
     </a> 
 
     <a class="carousel-control right"> 
 
      <span class="glyphicon glyphicon-chevron-right"></span> 
 
     </a> 
 
    </div> 
 
</div> 
 
</body> 
 
</html>         \t \t

出典

2016-05-12 08:29:41

の作業バージョンです。だからあなたはそれを$('#myCarousel').carousel({に変更する必要があります - ＃

出典

2016-05-12 08:29:45

Jamesありがとうございました！それを解決した – Martin

ホバー上でカルーセルを起動する

答えて

関連する問題