用缩略图停止来自boostrap旋转木马的自动滑行

时间：2017-04-07 07:16:09

标签： javascript jquery twitter-bootstrap

我正在尝试停止与此jsfiddle示例对应的引导程序轮播中的自动滑动。

而

$('.carousel').carousel({
interval: false
});

停止主旋转木马，我dident找到了从缩略图部分停止自动滑动的方法。

＆＃13;
＆＃13; 
$(document).ready(function() {
  var totalItems = $('#carousel .item').length;
  var thumbs = 3;
  var currentThumbs = 0;
  var to = 0;
  var thumbActive = 1;
  
  
  function toggleThumbActive (i) {
    $('#carousel-thumbs .item>div').removeClass('active');
		$('#carousel-thumbs .item.active>div:nth-child(' + i +')').addClass('active');
  }
  
  $('#carousel').on('slide.bs.carousel', function(e) {
    //var active = $(e.target).find('.carousel-inner > .item.active');
    //var from = active.index();
    
    var from = $('#carousel .item.active').index()+1;
    var next = $(e.relatedTarget);
    to = next.index()+1;
    var nextThumbs = Math.ceil(to/thumbs) - 1;
    if (nextThumbs != currentThumbs) {
    	$('#carousel-thumbs').carousel(nextThumbs);
    	currentThumbs = nextThumbs;
    }
    thumbActive = +to-(currentThumbs*thumbs);
    //console.log(from + ' => ' + to + ' / ' + currentThumbs);
  });
  $('#carousel').on('slid.bs.carousel', function(e) {
    toggleThumbActive(thumbActive);
  });
  $('#carousel-thumbs').on('slid.bs.carousel', function(e) {
    toggleThumbActive(thumbActive);
  });
    $("#carousel").on("swiperight",function(){
  	$('#carousel').carousel('prev');
	});
  $("#carousel").on("swipeleft",function(){
		$('#carousel').carousel('next');
	});
  $("#carousel-thumbs").on("swiperight",function(){
  	$('#carousel-thumbs').carousel('prev');
	});
  $("#carousel-thumbs").on("swipeleft",function(){
		$('#carousel-thumbs').carousel('next');
	});
});

$('.carousel').carousel({
    interval: false
});
＆＃13; 
#carousel,
#carousel-thumbs {
  max-width: 800px;
  margin: 15px auto;
}
#carousel-thumbs .item img {
  opacity: 0.5;
}
#carousel-thumbs .item.active div.active img {
  opacity: 1;
  border: 2px solid #000;
}
#carousel-thumbs .item.active div:not(.active) img {
  cursor:pointer;
}
#carousel-thumbs .carousel-control {
  background-image: none;
}
＆＃13; 
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="carousel" class="carousel slide" data-ride="carousel">
  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="http://placehold.it/800x600" class="img-responsive">
      <div class="carousel-caption">1</div>
    </div>
    <div class="item">
      <img src="http://placehold.it/800x600" class="img-responsive">
      <div class="carousel-caption">2</div>
    </div>
    <div class="item">
      <img src="http://placehold.it/800x600" class="img-responsive">
      <div class="carousel-caption">3</div>
    </div>
    <div class="item">
      <img src="http://placehold.it/800x600" class="img-responsive">
      <div class="carousel-caption">4</div>
    </div>
    <div class="item">
      <img src="http://placehold.it/800x600" class="img-responsive">
      <div class="carousel-caption">5</div>
    </div>
    <div class="item">
      <img src="http://placehold.it/800x600" class="img-responsive">
      <div class="carousel-caption">6</div>
    </div>
    <div class="item">
      <img src="http://placehold.it/800x600" class="img-responsive">
      <div class="carousel-caption">7</div>
    </div>
    <div class="item">
      <img src="http://placehold.it/800x600" class="img-responsive">
      <div class="carousel-caption">8</div>
    </div>
    <div class="item">
      <img src="http://placehold.it/800x600" class="img-responsive">
      <div class="carousel-caption">9</div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control hiden-xs" href="#carousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control hiden-xs" href="#carousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

<div id="carousel-thumbs" class="carousel slide">
  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <div class="col-xs-4 active"onclick="$('#carousel').carousel(0);">
        <img src="http://placehold.it/400x200" class="img-responsive">
      </div>
      <div class="col-xs-4"onclick="$('#carousel').carousel(1);">
        <img src="http://placehold.it/400x200" class="img-responsive">
      </div>
      <div class="col-xs-4"onclick="$('#carousel').carousel(2);">
        <img src="http://placehold.it/400x200" class="img-responsive">
      </div>
    </div>
    <div class="item">
      <div class="col-xs-4"onclick="$('#carousel').carousel(3);">
        <img src="http://placehold.it/400x200" class="img-responsive">
      </div>
      <div class="col-xs-4" onclick="$('#carousel').carousel(4);">
        <img src="http://placehold.it/400x200" class="img-responsive">
      </div>
      <div class="col-xs-4" onclick="$('#carousel').carousel(5);">
        <img src="http://placehold.it/400x200" class="img-responsive">
      </div>
       <div class="col-xs-4" onclick="$('#carousel').carousel(5);">
        <img src="http://placehold.it/400x200" class="img-responsive">
      </div>
       <div class="col-xs-4" onclick="$('#carousel').carousel(5);">
        <img src="http://placehold.it/400x200" class="img-responsive">
      </div>
    </div>
    <div class="item">
      <div class="col-xs-4" onclick="$('#carousel').carousel(6);">
        <img src="http://placehold.it/400x200" class="img-responsive">
      </div>
      <div class="col-xs-4" onclick="$('#carousel').carousel(7);">
        <img src="http://placehold.it/400x200" class="img-responsive">
      </div>
      <div class="col-xs-4" onclick="$('#carousel').carousel(8);">
        <img src="http://placehold.it/400x200" class="img-responsive">
      </div>
    </div>
    
<!-- Controls -->
  <a class="left carousel-control hidden-xs" href="#carousel-thumbs" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control hidden-xs" href="#carousel-thumbs" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

摆脱data-ride="carousel"，提供.carousel data-interval="false"属性。

引用W3S

  

data-ride =＆＃34; carousel＆＃34;属性告诉Bootstrap开始动画   页面加载时立即显示轮播。

如果您希望停止制作动画，请从.slide选择器中移除.carousel课程。

  

.slide类添加了CSS过渡和动画效果   在显示新项目时使项目滑动。如果你这样省略这个课程   不想要这种效果。

＆＃13;
＆＃13; 
$(document).ready(function() {
  var totalItems = $('#carousel .item').length;
  var thumbs = 3;
  var currentThumbs = 0;
  var to = 0;
  var thumbActive = 1;
  
  
  function toggleThumbActive (i) {
    $('#carousel-thumbs .item>div').removeClass('active');
		$('#carousel-thumbs .item.active>div:nth-child(' + i +')').addClass('active');
  }
  
  $('#carousel').on('slide.bs.carousel', function(e) {
    //var active = $(e.target).find('.carousel-inner > .item.active');
    //var from = active.index();
    
    var from = $('#carousel .item.active').index()+1;
    var next = $(e.relatedTarget);
    to = next.index()+1;
    var nextThumbs = Math.ceil(to/thumbs) - 1;
    if (nextThumbs != currentThumbs) {
    	$('#carousel-thumbs').carousel(nextThumbs);
    	currentThumbs = nextThumbs;
    }
    thumbActive = +to-(currentThumbs*thumbs);
    //console.log(from + ' => ' + to + ' / ' + currentThumbs);
  });
  $('#carousel').on('slid.bs.carousel', function(e) {
    toggleThumbActive(thumbActive);
  });
  $('#carousel-thumbs').on('slid.bs.carousel', function(e) {
    toggleThumbActive(thumbActive);
  });
    $("#carousel").on("swiperight",function(){
  	$('#carousel').carousel('prev');
	});
  $("#carousel").on("swipeleft",function(){
		$('#carousel').carousel('next');
	});
  $("#carousel-thumbs").on("swiperight",function(){
  	$('#carousel-thumbs').carousel('prev');
	});
  $("#carousel-thumbs").on("swipeleft",function(){
		$('#carousel-thumbs').carousel('next');
	});
});

$('.carousel').carousel({
    interval: false
});
＆＃13; 
#carousel,
#carousel-thumbs {
  max-width: 800px;
  margin: 15px auto;
}
#carousel-thumbs .item img {
  opacity: 0.5;
}
#carousel-thumbs .item.active div.active img {
  opacity: 1;
  border: 2px solid #000;
}
#carousel-thumbs .item.active div:not(.active) img {
  cursor:pointer;
}
#carousel-thumbs .carousel-control {
  background-image: none;
}
＆＃13; 
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="carousel" class="carousel" data-interval="false" >
  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="http://placehold.it/800x600" class="img-responsive">
      <div class="carousel-caption">1</div>
    </div>
    <div class="item">
      <img src="http://placehold.it/800x600" class="img-responsive">
      <div class="carousel-caption">2</div>
    </div>
    <div class="item">
      <img src="http://placehold.it/800x600" class="img-responsive">
      <div class="carousel-caption">3</div>
    </div>
    <div class="item">
      <img src="http://placehold.it/800x600" class="img-responsive">
      <div class="carousel-caption">4</div>
    </div>
    <div class="item">
      <img src="http://placehold.it/800x600" class="img-responsive">
      <div class="carousel-caption">5</div>
    </div>
    <div class="item">
      <img src="http://placehold.it/800x600" class="img-responsive">
      <div class="carousel-caption">6</div>
    </div>
    <div class="item">
      <img src="http://placehold.it/800x600" class="img-responsive">
      <div class="carousel-caption">7</div>
    </div>
    <div class="item">
      <img src="http://placehold.it/800x600" class="img-responsive">
      <div class="carousel-caption">8</div>
    </div>
    <div class="item">
      <img src="http://placehold.it/800x600" class="img-responsive">
      <div class="carousel-caption">9</div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control hiden-xs" href="#carousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control hiden-xs" href="#carousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

<div id="carousel-thumbs" class="carousel slide">
  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <div class="col-xs-4 active"onclick="$('#carousel').carousel(0);">
        <img src="http://placehold.it/400x200" class="img-responsive">
      </div>
      <div class="col-xs-4"onclick="$('#carousel').carousel(1);">
        <img src="http://placehold.it/400x200" class="img-responsive">
      </div>
      <div class="col-xs-4"onclick="$('#carousel').carousel(2);">
        <img src="http://placehold.it/400x200" class="img-responsive">
      </div>
    </div>
    <div class="item">
      <div class="col-xs-4"onclick="$('#carousel').carousel(3);">
        <img src="http://placehold.it/400x200" class="img-responsive">
      </div>
      <div class="col-xs-4" onclick="$('#carousel').carousel(4);">
        <img src="http://placehold.it/400x200" class="img-responsive">
      </div>
      <div class="col-xs-4" onclick="$('#carousel').carousel(5);">
        <img src="http://placehold.it/400x200" class="img-responsive">
      </div>
       <div class="col-xs-4" onclick="$('#carousel').carousel(5);">
        <img src="http://placehold.it/400x200" class="img-responsive">
      </div>
       <div class="col-xs-4" onclick="$('#carousel').carousel(5);">
        <img src="http://placehold.it/400x200" class="img-responsive">
      </div>
    </div>
    <div class="item">
      <div class="col-xs-4" onclick="$('#carousel').carousel(6);">
        <img src="http://placehold.it/400x200" class="img-responsive">
      </div>
      <div class="col-xs-4" onclick="$('#carousel').carousel(7);">
        <img src="http://placehold.it/400x200" class="img-responsive">
      </div>
      <div class="col-xs-4" onclick="$('#carousel').carousel(8);">
        <img src="http://placehold.it/400x200" class="img-responsive">
      </div>
    </div>
    
<!-- Controls -->
  <a class="left carousel-control hidden-xs" href="#carousel-thumbs" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control hidden-xs" href="#carousel-thumbs" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题