Загрузочный JavaScript JavaScript не работает
Twitter Bootstrap Version: 2.0.3
Пример кода HTML:
<!DOCTYPE html>
<html dir="ltr" lang="en-US" xmlns:og="http://opengraphprotocol.org/schema/">
<head>
<link rel="stylesheet" type="text/css" media="all" href="reddlec/style.css" />
<script type="text/javascript">
$(document).ready(function() {
$('.carousel').each(function(){
$(this).carousel({
pause: true,
interval: false
});
});
});
</script>
<script src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-transition.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-carousel.js"></script>
</head>
<body>
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">…</div>
<div class="item">…</div>
<div class="item">…</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</body>
</html>
CSS: Предоставляется bootstrap.css
Проблема: Как вы можете видеть, я включил режим приостановил и отключил циклический. Но когда я нажимаю на карусель влево или вправо, карусель начинает циклически переключаться по интервалу по умолчанию (5 секунд за цикл) на мышеловке.
Как принудительно отключить велоспорт? Я хочу, чтобы изображения переключались вручную пользователем.
Вы можете протестировать проблему в прямом эфире на моем тестовом сайте здесь.
Ответы
Ответ 1
Возможно, вы захотите удалить атрибут "пауза". Это не обязательно, если вы не автоматически ездите на велосипеде по изображениям. Мое предположение (и я собираюсь проверить код начальной загрузки для проверки) заключается в том, что когда происходит событие "mouseleave", циклическое возобновление - даже если оно было отключено в первую очередь. Когда он возобновляется, он использует скорость по умолчанию.
Вот решение:
$(function() {
$('.carousel').each(function(){
$(this).carousel({
interval: false
});
});
});
Ответ 2
Чтобы отключить циклирование, одним рабочим решением является добавление в контейнер карусели data-interval = "false":
<div id="myCarousel" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div class="active item">toto</div>
<div class="item">tata</div>
<div class="item">tutu</div>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
Ответ 3
Я только что придумал решение этой проблемы. Ни одно из вышеперечисленных не работало для меня, но это заставило меня взглянуть на код начальной загрузки. Я считаю, что причина этой ошибки в файле bootstrap-carousel.js в объекте по умолчанию:
$.fn.carousel.defaults = {
interval: 5000
, pause: 'hover'
}
После карусельных слайдов он возвращается к этим значениям по умолчанию. Если вы хотите, чтобы карусель не скользила и управлялась только пользователем, вы можете изменить объект по умолчанию на интервал ложной. Надеюсь это поможет.
$.fn.carousel.defaults = {
interval: false
, pause: 'hover'
}
Ответ 4
Я не уверен, почему, но основное решение не сработало и для меня. Weird.
Чтобы исправить мою проблему, я сделал следующий код.
$('.carousel').carousel({interval: false});
$(document).on('mouseleave', '.carousel', function() {
$(this).carousel('pause');
});
Смотрите документацию для carouselpause.
Ответ 5
<div id="carousel-example-generic" class="carousel slide" data-wrap="false">
http://getbootstrap.com/javascript/#carousel
Ответ 6
Кроме того, что предлагает @dgabriel, убедитесь, что вызов JavaScript, инициализирующий карусель Bootstrap, ПОСЛЕ <script>
ссылок на jQuery, bootstrap-transition.js и bootstrap-carousel.js, примерно так:
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-transition.js"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-carousel.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.gallery-carousel').each(function(){
$(this).carousel({
interval: false
});
});
});
</script>
Это гарантирует, что карусель работает по назначению (например, ошибки Uncaught ReferenceError: $ is not defined (anonymous function)
.
Ответ 7
Я все пробовал, но ничего не получилось. Я решил проблему при изменении файлов bootstrap.min.js и bootstrap.js. Вы должны искать "carousel.defaults" с помощью Ctrl + F в этих файлах и заменять их:
interval:false
Ответ 8
Я думаю, что ответ @dgabriel должен работать, потому что:
Метод bootstrap carousel pause() не рассматривает свой аргумент так, как вы думаете. пауза (true) не означает "да, приостановите ее", и пауза (ложь) означает "нет, не останавливайте ее".
это можно увидеть в исходном коде,
Carousel.prototype.pause = function (e) {
e || (this.paused = true)
...
this.interval = clearInterval(this.interval)
return this
}
github link здесь
как можно видеть, если e
истинно, this.paused = true
не будет выполняться. поэтому, когда срабатывает событие "mouseleave", метод cycle() все еще видит "paused == false", а setInterval выполняется снова, поэтому ваша карусель не останется неподвижной.
// mouseleave event fires using cycle() with no arguments
.on('mouseleave', $.proxy(this.cycle, this))
// so when cycle() is called, this.paused == false.
Carousel.prototype.cycle = function (e) {
e || (this.paused = false)
this.interval && clearInterval(this.interval)
// set interval == false to prevent setInterval
this.options.interval
&& !this.paused
&& (this.interval = setInterval($.proxy(this.next, this), this.options.interval))
return this
}
чтобы приостановить, используйте .pause()
и interval=false
, чтобы предотвратить перезагрузку события "mouseleave". сам bootstrap использует его таким образом, его можно увидеть здесь
Ответ 9
Собственно, изменение настроек по умолчанию в bootstrap-carousel.js следующим образом помогло мне.
Carousel.DEFAULTS = {
interval: false,
pause: 'hover',
wrap: false
}
Ответ 10
У меня тоже есть проблема с Stop bootstrap Carousel
от автоматического воспроизведения. Я проверил файл bootstrap.js
, и я нашел коды, относящиеся к карусели
то я удаляю другой js.
В новом js файле я делаю копию из всех кодов, а затем меняю переменную Carousel на Carousel_n
(потому что можно изменить ее на все, что вы хотите).
В последней строке кодов самое главное:
{ $('[data-ride="carousel"]').each(function () }
Я меняю carousel
на Carousel_n
.
для html Я только изменил:
<div id="Carousel" class="carousel slide" data-ride="carousel">
to
<div id="Carousel" class="carousel slide" data-ride="carousel_n">
и, конечно же, это действительно сработало.
Ответ 11
$('your-carousel').carousel({
pause: true,
interval: false
});