2017-03-19 13 views
0

まあまあ、文字通り、できるだけ早くイメージを通過するカルーセルに遭遇しましたか?笑、私はこれをしたくないが、それをやって、私はデータ間隔= "10000"を試みたが、それは効果がなかった。どんな助けでも感謝しています。jqueryを使ってブートストラップのカルーセル速度を変更してください

<!-- Font Awesome --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css"> 

<!-- Bootstrap core CSS --> 
<link href="css/bootstrap.min.css" rel="stylesheet"> 

<!-- Material Design Bootstrap --> 
<link href="css/mdb.min.css" rel="stylesheet"> 
<style rel="stylesheet"> 
/* Carousel*/ 
     .carousel { 
      height: 50%; 
     } 

    @media (max-width: 776px) { 
     .carousel { 
      height: 100%; 
     } 
    } 

    .carousel-item, 
    .active { 
     height: 100%; 
    } 

    .carousel-inner { 
     height: 100%; 
    } 

    /*Caption*/ 

    .flex-center { 
     color: #fff; 
    } 
</style> 
<!--Carousel Wrapper--> 
    <div id="carousel-example-3" class="carousel slide carousel-fade white-text" data-ride="carousel" data-interval="true"> 
     <!--Indicators--> 
     <ol class="carousel-indicators"> 
      <li data-target="#carousel-example-3" data-slide-to="0" class="active"></li> 
      <li data-target="#carousel-example-3" data-slide-to="1"></li> 
      <li data-target="#carousel-example-3" data-slide-to="2"></li> 
     </ol> 
     <!--/.Indicators--> 

     <!--Slides--> 
     <div class="carousel-inner" role="listbox"> 

      <!-- First slide --> 
      <div class="carousel-item active view hm-black-light" style="background-image: url('http://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(11).jpg'); background-repeat: no-repeat; background-size: cover;"> 

       <!-- Caption --> 
       <div class="full-bg-img flex-center white-text"> 
        <ul class="animated fadeInUp col-md-12"> 
         <li> 
          <h1 class="h1-responsive">20 Photos to inspire you to visit Tatra Mountains</h1></li> 
         <li> 
          <p>Best places you should see, traditional dishes that you have to try</p> 
         </li> 
         <li> 
          <a target="_blank" href="http://mdbootstrap.com/getting-started/" class="btn btn-info btn-lg">See more!</a> 
         </li> 
        </ul> 
       </div> 
       <!-- /.Caption --> 

      </div> 
      <!--/.First slide--> 

      <!-- Second slide --> 
      <div class="carousel-item view hm-black-light" style="background-image: url('http://mdbootstrap.com/img/Photos/Slides/img%20(67).jpg'); background-repeat: no-repeat; background-size: cover;"> 

       <!-- Caption --> 
       <div class="full-bg-img flex-center white-text"> 
        <ul class="animated fadeInUp col-md-12"> 
         <li> 
          <h1 class="h1-responsive">10 Reasons you should spend winter holiday in mountains </h1> 
         </li> 
         <li> 
          <p>Best atractions and winter sports!</p> 
         </li> 
         <li> 
          <a target="_blank" href="http://mdbootstrap.com/bootstrap-tutorial/" class="btn btn-info btn-lg">Read more</a> 
         </li> 
        </ul> 
       </div> 
       <!-- /.Caption --> 

      </div> 
      <!--/.Second slide --> 

      <!-- Third slide --> 
      <div class="carousel-item view hm-black-light" style="background-image: url('http://mdbootstrap.com/img/Photos/Slides/img%20(97).jpg'); background-repeat: no-repeat; background-size: cover;"> 

       <!-- Caption --> 
       <div class="full-bg-img flex-center white-text"> 
        <ul class="animated fadeInUp col-md-12"> 
         <li> 
          <h1 class="h1-responsive">Weekend in the nature - the best way to relax</h1></li> 
         <li> 
          <p>8 Reasons why you need to spend more time in nature</p> 
         </li> 
         <li> 
          <a target="_blank" href="http://mdbootstrap.com/forums/forum/support/" class="btn btn-default btn-lg">Read more</a> 
         </li> 
        </ul> 
       </div> 
       <!-- /.Caption --> 

      </div> 
      <!--/.Third slide--> 
     </div> 
     <!--/.Slides--> 

     <!--Controls--> 
     <a class="carousel-control-prev" href="#carousel-example-3" role="button" data-slide="prev"> 
      <span class="carousel-control-prev-icon" aria-hidden="true"></span> 
      <span class="sr-only">Previous</span> 
     </a> 
     <a class="carousel-control-next" href="#carousel-example-3" role="button" data-slide="next"> 
      <span class="carousel-control-next-icon" aria-hidden="true"></span> 
      <span class="sr-only">Next</span> 
     </a> 
     <!--/.Controls--> 
    </div> 
    <!--/.Carousel Wrapper--> 

答えて

1

・ホープ、このことができます。このjquery--

$('#carousel-example-3').carousel({ 
interval: 10000 
}); 

を使用してみてください!

+0

はい!しかし、私はこれを使用する必要がありました $( 'カルーセル')カルーセル({ 間隔:2000 }) ありがとうございました! – rapid3642

+0

お元気です..お手伝いします。 – neophyte

関連する問題