Не запускается bootstrap carousel

  • 16 Ответов
  • 4070 Просмотров

0 Пользователей и 1 Гость просматривают эту тему.

Не запускается bootstrap carousel
« : 05.11.2014, 20:48:56 »
Приветствую!
По мотивам  этой темы ( http://joomlaforum.ru/index.php/topic,296434.0.html ) тоже имел схожую проблему. Сделал так же, как и посоветовал пользователь под ником fagtr и все заработало, НО сама каруселька не запускается автоматически, а только по нажатию на стрелку.
Пробовал добавить сразу после кода карусельки скрипт ее запуска, который вычитал на форуме бутстрапа, не помогло. Joomla 3.3.6

Сам скрипт
Код
<script type="text/javascript">$(function(){ $('#elementID').carousel(); }); </script>

Сам код
Код
<div class="mainContent">
                    <?php JHtml::_('bootstrap.framework'); JHtml::_('bootstrap.carousel', 'myCarousel', array('interval'=>500, 'pause'=>'hover')); ?>
                    <div id="myCarousel" class="carousel slide">                        
                        <div class="carousel-inner">
                            <div class="active item">
                            <img src="/templates/rightsport/images/banner1.png"/>
                            </div>
                            <div class="item">
                            <img src="/templates/rightsport/images/banner2.png"/>
                            </div>
                        </div>
                        <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
                        <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
                    </div>
                    <script type="text/javascript">$(function(){ $('#elementID').carousel(); }); </script>
                </div>

Буду очень благодарен за помощь, второй день не могу заставить ее запуститься в автоматическом режиме =/

*

fbr

  • ******
  • 1274
  • 140
Re: Не запускается bootstrap carousel
« Ответ #1 : 05.11.2014, 22:05:24 »
<script type="text/javascript">$(function(){ $('#elementID').carousel(); }); </script>
нету такого id у вас в коде ..
поставьте реальный id

Re: Не запускается bootstrap carousel
« Ответ #2 : 05.11.2014, 22:15:45 »
myCarousel? Поставил, все равно не запускается..

*

fbr

  • ******
  • 1274
  • 140
Re: Не запускается bootstrap carousel
« Ответ #3 : 05.11.2014, 22:23:39 »
попробуйте так:
Код: javascript
<script type="text/javascript">

!function ($) {
  $(function() {
      $('#myCarousel').carousel(interval: 500);
  });
}(window.jQuery)

</script>

Re: Не запускается bootstrap carousel
« Ответ #4 : 05.11.2014, 22:29:36 »
Не дало результата.

*

zomby6888

  • ******
  • 1484
  • 167
Re: Не запускается bootstrap carousel
« Ответ #5 : 06.11.2014, 00:26:02 »
вместо:
Код: php
JHtml::_('bootstrap.carousel', 'carousel', array('interval'=>500,array('interval'=>500, 'pause'=>'hover')));
прописать:
Код: php
$doc = JFactory::getDocument();
$doc->addScriptDeclaration('
    jQuery(document).ready(function($) {
         $("#myCarousel").carousel({interval: 500, pause: "hover"});
    });
');
интернет-блог: http://websiteprog.ru

Re: Не запускается bootstrap carousel
« Ответ #6 : 06.11.2014, 11:51:39 »
Это тоже не заработало. Возможно ли что-то конфликтует? 

*

zomby6888

  • ******
  • 1484
  • 167
Re: Не запускается bootstrap carousel
« Ответ #7 : 06.11.2014, 13:08:09 »
ошибки в консоле смотрите
интернет-блог: http://websiteprog.ru

Re: Не запускается bootstrap carousel
« Ответ #8 : 06.11.2014, 13:29:59 »
Код
"NetworkError: 404 Not Found - http://firsttemplate/js/bootstrap.js"
Только это, но довольно странно, подключено вроде верно, тут сложно ошибиться.

*

zomby6888

  • ******
  • 1484
  • 167
Re: Не запускается bootstrap carousel
« Ответ #9 : 06.11.2014, 13:40:42 »
Странноо что у вас вобще работает. Еще раз убедитесь что присутствуют строчки:
Код: php
<?php 					
JHtml::_('bootstrap.framework');
$doc = JFactory::getDocument();
$doc->addScriptDeclaration('
jQuery(document).ready(function($) {
$("#myCarousel").carousel({interval: 500, pause: "hover"});
});
');
?>

Проверьте подключен ли bootstrap на странице в head. должен быть подключен по пути /sitename/media/jui/js/bootstrap.min.js
А тот на который ругается консоль, он вобще не понятно откуда.
интернет-блог: http://websiteprog.ru

Re: Не запускается bootstrap carousel
« Ответ #10 : 06.11.2014, 17:15:44 »
Немного пошаманив я понял в чем проблема, адрес не был правильно указан.
Но теперь в консоле есть такая ошибка:
Код
TypeError: jQuery(...).on is not a function


jQuery(window).on('load',  function() {

*

zomby6888

  • ******
  • 1484
  • 167
Re: Не запускается bootstrap carousel
« Ответ #11 : 06.11.2014, 17:28:59 »
Цитировать
TypeError: jQuery(...).on is not a function

Древняя версия jQuery. Вам нужна версия 1.7 и выше. Почему вы не подгружаете скрипты простой строчкой: JHtml::_('bootstrap.framework'); Это должно подключить и фреймворк и jquery. От остальных jquery и bootstrap надо избавлятся. Если хотите самые свежие версии использовать заменяйте ими стандартные..
« Последнее редактирование: 06.11.2014, 17:36:18 от zomby6888 »
интернет-блог: http://websiteprog.ru

Re: Не запускается bootstrap carousel
« Ответ #12 : 06.11.2014, 17:35:09 »
Весь мой код выглядит так:

Код
<?php
defined('_JEXEC') or die;
$params = JFactory::getApplication()->getTemplate(true)->params;
$app      = JFactory::getApplication();
$doc = JFactory::getDocument();
$this->language =$doc->language;
$this->direction = $doc->direction;
JHtml::_('bootstrap.framework');
$tmpl_logo=$this->params->get('logo');
?>
<!DOCTYPE HTML>
<html>
    <head>
        <jdoc:include type="head" />
        <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
        <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/bootstrap.css" type="text/css" />
        <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template.css" type="text/css" />
</head>

<body>
...
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/js/bootstrap.js" type="text/javascript"></script>
</body>

Что здесь не верно?

Сейчас попробую заменить
 

*

zomby6888

  • ******
  • 1484
  • 167
Re: Не запускается bootstrap carousel
« Ответ #13 : 06.11.2014, 17:37:59 »
Цитировать
Что здесь не верно?
вот эти строчки:
Цитировать
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/js/bootstrap.js" type="text/javascript"></script>

убрать нафиг
нельзя допускать чтобы одни и те же скрипты подключались дважды
« Последнее редактирование: 06.11.2014, 17:42:52 от zomby6888 »
интернет-блог: http://websiteprog.ru

Re: Не запускается bootstrap carousel
« Ответ #14 : 06.11.2014, 17:56:09 »
Запустил через Chrome просмотр кода, увидел, что в самом конце подгружается скрипт Jquery версии 1.6.2 от стороннего плагина. Я его еще давным давно установил(плагин) и забыл про него. Теперь всё работает, как всегда решение лежит на поверхности )
Спасибо, zomby6888, за помощь!

*

Mega-e

  • ***
  • 33
  • 2
Re: Не запускается bootstrap carousel
« Ответ #15 : 11.12.2015, 16:48:38 »
Автозапуск карусели не работает из-за конфликта с mootools-more.js

Чтобы решить эту проблему, перед блоком карусели нужно поставить скрипт:
Код
<script type="text/javascript">jQuery(document).ready(function(){ jQuery('.carousel').each(function(index, element) { jQuery(this)[index].slide = null; }); jQuery('.carousel').carousel('cycle'); });</script>

Источник
« Последнее редактирование: 11.12.2015, 16:57:59 от Mega-e »
Судьба равнодушных - РАБСТВО!

Re: Не запускается bootstrap carousel
« Ответ #16 : 20.06.2016, 14:30:19 »

Mega-e плюс в карму!

У меня немного другие последствия этого конфликта возникали. Нарушалась HTML структура слайдера. Дополнительный внешний div "нарисовывался" со свойствами меняющимися js-ом. Долго не мог поймать конфликтующий скрипт.

Нормальная структура слайдера.
Спойлер
[свернуть]

Конфликтная структура слайдера.
Спойлер
[свернуть]

Ну и как следствие работы mootools-more.js замечательные свойства, которые прятали картинку при смене.
Код: css
margin: 0px 0px 18px; position: relative; overflow: hidden; height: 0;

Ну и чтоб далеко не ходить решение:
Код: php
$document = JFactory::getDocument();
$document->addScriptDeclaration('jQuery(document).ready(function($){
            jQuery(".carousel").each(function(index, element) {
                jQuery(this)[index].slide = null;
            });
            jQuery(".carousel").carousel("cycle");
        });');