Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: bootstrap carousel периодически падает на TV браузере

Коллеги, может кто сталкивался с проблемой, что нибудь посоветуйте:
Дано:
tv samsung, шнурком в сети, с tizen browser, в котором должен в bootstrap 2 карусели крутиться произвольный контент, смена слайдов в коде.

Проблема:
периодически (после длительной нормальной работы) появляется окно "настроить список каналов", какой то стартовый режим для телевизора, как мне пояснил мой коллега, это происходит из-за краха браузера. Все idle для TV disabled. Пробовал убирать из карусели iframe, т.е. крутились только img - максимально легкое для браузера содержимое - тоже самое.

Решение, ломаться вроде не чему:
<div class="carousel">
    <div class="carousel-inner ">
        <div class="item" data-delay="10">
            <iframe src="" data-src="http://...">Ваш браузер не поддерживает плавающие фреймы!</iframe>
        </div>
        <div class="item" data-delay="10">
            <img src="" data-src="http://...">
        </div>
        ....
    </div>
</div>


    function nextFrame() {
        $("div:not('.active')").find("iframe").attr('src','');
        //
        $carousel.carousel("next");
        //
        var $slide = $('div.active');
        var $element = $slide.children().first();
        var $tag = $element.get(0).tagName;
        //
        if($tag == "IFRAME"){
            var src = $element.attr("data-src");
            src = src.split("%nocache%").join(Date.now());
            $element.attr("src", src);
        }
        var $delay = parseInt($slide.attr('data-delay'));
        setTimeout(nextFrame, $delay*1000);
    }
    $(function() {
        $carousel = $('.carousel');
        $carousel.carousel({
            interval: false,
            pause: true
        });
        nextFrame();
    });
Ответ: крендель,

В целом, не надо допускать утечек независимо от браузера. Возможно в этой карусели допускаются утечки. Возьми другую, не бутстраповскую. Можешь сам написать.
Вопрос: bootstrap carousel.click Помогите чайнику

в div-х с классом infoblock находятся bootstrap карусели, мне нужно что бы при нажатии на infoblock включался интервал в 7 секунд на смену кадров карусели, при втором нажатии интервал false, по стандарту он должен быть выключен.

вот мой код что я пытался сделать:
$('.carousel').carousel({ interval: false });
var low = '7000';
$(".infoblock").click(function () {
$('.carousel', this).carousel({ interval: low ? '7000' : false });
low = !low;

Ответ: Сергей Белошенко, ну и почему у тебя интервал строка?
Вопрос: Owl Carousel в 2 ряда

Здравствуйте!

Прошу помочь с каруселью товаров, чтобы это выглядело вот так:


Вот JS слайдера:
function initSlider() {
        var win_width = $(window).width();
        var column;
        if ($('#main').hasClass('column1'))
            column = 'column1';
        else if ($('#main').hasClass('column2'))
            column = 'column2';
        else
            column = 'column3';

        $('.product-slider').each(function() {
            var temp = column;
            if (!$(this).parents('#main').length)
                temp = 'column1';

            var $wrap = $(this);
            var itemsCustom;
            if (temp == 'column1')
                itemsCustom = [[0, 1], [750, 3], [992, 4]];
            else if (temp == 'column2')
                itemsCustom = [[0, 1], [750, 2], [992, 3]];
            else
                itemsCustom = [[0, 1], [750, 1], [992, 2]];

            if ($wrap.hasClass('sidebar') || $(this).hasClass('single')) {
                $wrap.find('.product-carousel').owlCarousel({
                    autoPlay : false,
                    singleItem: true,
                    navigation: true,
                    navigationText: ["", ""],
                    pagination: false
                });
            } else {
                $wrap.find('.product-carousel').owlCarousel({
                    autoPlay : false,
                    itemsCustom: itemsCustom,
                    navigation: true,
                    navigationText: ["", ""],
                    pagination: false
                });
                $wrap.find('h1, h2').each(function() {
                    var $this = $(this);
                    if ($this.find('.inline-title').length) return;
                    var text = $this.html();
                    $this.html('<span class="inline-title">' + text + '</span><span class="line"></span>');
                    $this.find('.line').hide();
                });
            }
        });


Помогите пожалуйста, перелазила весь Google, на англоязычных ресурсах люди сами решают проблему. Сайт на WordPress.
Ответ: Или это не тот файл? Нашла в интернете вот этот код:
$(function () {
        var owl = $('#owl2row-plugin');
        owl.owlCarousel({
            loop: true,
            margin: 20,
            nav: false,
            owl2row: 'true', // enable plugin
            owl2rowTarget: 'item_',    // class for items in carousel div
            owl2rowContainer: 'owl2row-item', // class for items container
            owl2rowDirection: 'ltr', // ltr : directions
            responsive: {
                0: {
                    items: 2
                },
                480: {
                    items: 2
                },
                660: {
                    items: 3
                },
                960: {
                    items: 4
                }
            }
        });     
         $('.item_ a').on('click', function(e){
            e.preventDefault();
            $('.gallery-item').magnificPopup({                  
                  tPrev: 'Previous (Left arrow key)',
                  tNext: 'Next (Right arrow key)',
                  type:'inline',
                  showCloseBtn: true,
                  gallery:{
                    enabled:true
                  }
                });
        });
});
Вопрос: расскажите про Bootstrap. где он должен быть, какую среду разработки использовать?

решил поиграться с Bootstrap.
не часто занимался с JS фреймворками, поэтому в недоумении зачем все эта методика инсталлирования которая описана на сайте:
чтоб заинсталлировать нужен "bower", чтоб поставить "bower" нужен "npm", потом еше надо какой то "Grunt" поставить.
врезультате всей написанной методики все залезло в user\appdata\npm\bower\node_modules\bower_components\bootsrap...
еще где то в этой цепочке обязатеьно надо было поставить "git".
и что теперъ с этим всем делать? с какой стороны к этому всему подлезть? что запускать?
не хватило терпения дальше копатъся, взял тот же дистрибутив от Bootstrap и засунул традиционную в папку htdocs в apache, где остальные библиотеки JS. туда же в отдельные папки записал пару Bootstrap-html-шаблонов со стилями.
только тогда все "схватилось" и шаблоны заработали. вроде ничего другого и ненадо.

как правильно работать с Bootstrap, где должны быть его библиотеки, как он должен быть корректно заинсталлирован?
и надо ли все ето npm, bower,git, Grunt?
вообще какой отладчик лучше использовать для Bootstrap и других JS фреимворков?
Ответ:
oaken
Alex123F
там конкретно втирают что надо все это делать то что я написал выше.
Ты ошибаешся, в самом верху упомянутой страницы есть большая кнопка Download Bootstrap, чуть ниже - раздел Bootstrap CDN. Это именно то что тебе нужно.
Все остальные способы установки используются в фреймворках типа NodeJs для облегчения жизни разработчику по отслеживанию версионности и зависимостей между пакетами.
Вывод, если ты не знаешь что это - оно тебе не нужно.
А так да, бутстрап серьезный пакет, поэтому предоставляет практически любые способы установки под любые фреймврки, а как иначе-то?


ладно, будем считать что я пропустил мимо ушей эту "кнопку" :).. но пока мало что нового, познавательного.
скажитe хоть кто-нибуть какую среду разработки для JS удобно щас использовать?
есть смысл в WebStrom или есть что то более резонное?
Вопрос: bootstrap верстка

для верстки надо подключить /bootstrap.min.css или ему нужен обязательно bootstrap.min.js?
bootstrap-theme.min.css
Ответ: Только учти ! одну вещь, при зайди на сайт bootstrap зайди в examples и найди там SIDEBAR пример,
Просмотри его сурс ! и делай свой сайт по такому же методу, как там - в плане подключение библиотек - файлов !
Тогда у тебя будет работать верстка под все возможный старые браузеры (IE) которые поддерживает сам bootstrap !
Иначе если сам будет подключать в не правильном порядке, то верста будет лететь до 9 версии internet explorer.
Это так, что бы не мучались потом :) как я
Вопрос: Вертка landing page при помощи bootstrap 3

Всем привет
Делаю свой первый landing page при помощи bootstrap 3, шаблон сделал в фотошопе. Начал версту и тут трабл, делаю шапку но у меня лого с текстом не идет в один блок, а просто текст идет ниже логотипа и все остальное. Что я делаю не так, код ниже. Прошу помощи.
Код

<body>
  <header class="container">
   <div class="row">
        <div class="col-md-3"><img src="img/logo.png" alt="logo.png"></div>
        <div class="col-md-4"><h1>Qualified Technical Group</h1><br \>Пн-Пт: 10.00 - 19.00 <br \> Сб: 10.00 - 17.00 </div>
        <div class="col-md-3"></div>
        <div class="col-md-2"></div>
    </div>
      
      
  </header> 
   
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  
  <footer></footer>
     
</body>

Ответ:
Всем привет
Делаю свой первый landing page при помощи bootstrap 3, шаблон сделал в фотошопе. Начал версту и тут трабл, делаю шапку но у меня лого с текстом не идет в один блок, а просто текст идет ниже логотипа и все остальное. Что я делаю не так, код ниже. Прошу помощи.
Код

<body>
  <header class="container">
   <div class="row">
        <div class="col-md-3"><img src="img/logo.png" alt="logo.png"></div>
        <div class="col-md-4"><h1>Qualified Technical Group</h1><br \>Пн-Пт: 10.00 - 19.00 <br \> Сб: 10.00 - 17.00 </div>
        <div class="col-md-3"></div>
        <div class="col-md-2"></div>
    </div>
      
      
  </header> 
   
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  
  <footer></footer>
     
</body>

Вопрос: Owl carousel 2 не работает с табами - как поправить?

Есть 2 , каждый в своем табе.

В первой вкладке слайдер работает должным образом, но как только перехожу на вторую вкладку, то слайдер отображается некорректно: все сбивается в кучу.
Как я понимаю, это возникает из-за того, что первый таб скрыт.
В первой версии owl carousel, говорят, такой проблемы не возникает, но мне нужна именно вторая из-за некоторых фич.

Пробую навесить на ивент переключения таба перезагрузку OWL-carousel trigger('refresh.owl.carousel'), но что-то делаю неправильно, т.к. эфеекта никакого не наблюдается..

Как поправить?
$(document).ready(function() {

  $("#owl-demo").owlCarousel({
    nav: true,
    responsive: {
      0: {
        items: 1
      },
      600: {
        items: 3
      },
      1000: {
        items: 3
      }
    }
  });

  $("#owl-demo2").owlCarousel({
    nav: true,
    responsive: {
      0: {
        items: 1
      },
      600: {
        items: 3
      },
      1000: {
        items: 3
      }
    }
  });
  $(".nav-tabs>li.active").click(function() {
    $(".owl-carousel").trigger('refresh.owl.carousel');
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/OwlFonk/OwlCarousel2/develop/src/js/owl.carousel.js"></script>
<script src="https://rawgit.com/OwlFonk/OwlCarousel2/develop/src/js/owl.navigation.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.theme.default.min.css">
<link rel="stylesheet" href="http://owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<div class="tabbable">
  <!-- Only required for left/right tabs -->
  <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a>
    </li>
    <li><a href="#tab2" data-toggle="tab">Section 2</a>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">
      <p>I'm in Section 1.</p>
      <div id="owl-demo" class="owl-carousel">
        <div class="item">
          <h1>1</h1>
        </div>
        <div class="item">
          <h1>2</h1>
        </div>
        <div class="item">
          <h1>3</h1>
        </div>
        <div class="item">
          <h1>4</h1>
        </div>
        <div class="item">
          <h1>5</h1>
        </div>
        <div class="item">
          <h1>6</h1>
        </div>

      </div>
    </div>
    <div class="tab-pane" id="tab2">
      <p>Howdy, I'm in Section 2.</p>
      <div id="owl-demo2" class="owl-carousel">
        <div class="item">
          <h1>1</h1>
        </div>
        <div class="item">
          <h1>2</h1>
        </div>
        <div class="item">
          <h1>3</h1>
        </div>
        <div class="item">
          <h1>4</h1>
        </div>
        <div class="item">
          <h1>5</h1>
        </div>
        <div class="item">
          <h1>6</h1>
        </div>

      </div>
    </div>
  </div>
</div>
Ответ:
Сообщение от рони
ligisayan,
вы бы хоть на форуме поискали ... display: none; -- нет элемента нет размера 1 причина, слайдеру откуда брать размер? 2 причина использование ready вместо load -- картинки не успевают прогрузится (потом берутся из кеша ) и лучше если картинки имеют размер в теге или css, тогда можно без load
ссылка на тему ... подобных ещё десяток
рони, спасибо!
была оказывается еще и 3 причина о которой я не подумал - картинки в слайдере изначально меньшего размера, чем на выходе в слайдере и по сути - они успевают загрузится, но в исходном разрешении, а уже при обновлении страницы (f12) - растягиваются под размеры слайда
Вопрос: Bootstrap карусель

Здравствуйте. подскажите пожалуйста как настроить bootstrap карусель для работы с wordpress? вот код для карусели.
Код PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<div id="myCarousel" class="carousel slide container" data-interval="3000" data-ride="carousel">
                 <!-- Индикаторы для карусели -->
                       
                     <!-- Слайды карусели -->
                     <div class="carousel-inner">
                    <? $carousel_posts = get_posts('category=12&showposts=3');
                        foreach ($carousel_posts as $post) :
                        setup_postdata($post);
                        ?>
                       <!-- Слайды создаются с помощью контейнера с классом item, внутри которого помещается содержимое слайда -->
                       <div class="item">
                         <div class="carousel-caption">
                           <h3 class="hidden-xs"><?php the_title(); ?></h3>
                           <p class="hidden-xs"><?php the_content(); ?></p>
                         </div>
                         <?//php the_post_thumbnail('full');?>
  <img src="<? bloginfo('template_directory'); ?>/images/slider-content/1.jpg" alt="">
                       </div>
                     <?php endforeach; ?>
                     </div>
                     <!-- Навигация для карусели -->
                     <!-- Кнопка, осуществляющая переход на предыдущий слайд с помощью атрибута data-slide="prev" -->
                     <a class="carousel-control left" href="#myCarousel" data-slide="prev">
                       <span class="glyphicon glyphicon-chevron-left"></span>
                     </a>
                     <!-- Кнопка, осуществляющая переход на следующий слайд с помощью атрибута data-slide="next" -->
                     <a class="carousel-control right" href="#myCarousel" data-slide="next">
                       <span class="glyphicon glyphicon-chevron-right"></span>
                     </a>
                   </div>
При чем заголовок и контент каждого поста выводятся, а вот картинка нет! Смотрю в инспекторе кода, путь к картинке прописывается правильный, но размер картинки почему-то 0 px. Как исправить ошибку?
Ответ: Вот только целесообразно добавить проверку на заполненность массива после запроса:
Код PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<div id="myCarousel" class="carousel slide container" data-interval="3000" data-ride="carousel">
    <div class="carousel-inner">
    <? $carousel_posts = get_posts('category=12&showposts=3');
    if (sizeof($carousel_posts) > 0){
        $count = 0;
        foreach ($carousel_posts as $post) :
            setup_postdata($post);?>
            <?php if ($count != 0){
                echo '<div class="item">';
            }else{
                echo '<div class="item active">';
                $count++;
            } ?>
                <div class="carousel-caption">
                    <h3 class="hidden-xs"><?php the_title(); ?></h3>
                    <p class="hidden-xs"><?php the_content(); ?></p>
                </div>
                <img src="<? bloginfo('template_directory'); ?>/images/slider-content/1.jpg" alt="">
            </div>
        <?php endforeach; ?>
    }
    </div>
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>
Вопрос: Owl-carousel 2 добавление слайдов через each

Привет!
Версии:
owl.carousel.2.0.0-beta.2.4
jquery 2.2.4

У меня есть такая задача:

//Тут выводится карусель
<div id="car-photo-carousel" class="owl-carousel"></div>


//Выбираю машину
$('#car_id').on('change', function (e) {
            var car_id = e.target.value;
//Инит карусели
            var carousel = $('#car-photo-carousel');
                carousel.owlCarousel({
                    autoplay:true,
                    autoplayTimeout:3000,
                    autoplayHoverPause:true,
                    items : 3,
                    responsiveClass:true,
                    nav:true,
                    navText: ["<i class=\"fa fa-chevron-left\" aria-hidden=\"true\"></i>","<i class=\"fa fa-chevron-right\" aria-hidden=\"true\"></i>"],
                    responsive:{
                        0:{
                            items:1,
                            nav:true
                        },
                        400:{
                            items:2,
                            nav:true
                        },
                        768:{
                            items:3,
                            nav:true
                        }
                    }
                });
//Тут делаю AJAX запрос, получаю список объектов
            $.post('/admin/getmodels/car', {car_id: car_id}, function (car) {
                if (car.photos.length > 0) {
                    var counter = 0;
//У объекта есть фотографии, они выводятся и добавляются через append к DIV, проверял все работает 100%, но мне надо добавить их к слайдеру, ок добавляем? 
                    $.each(car.photos, function (index, photo) {
                        counter++;
                        var content = '<img class="img img-responsive" src="' + photo.file + '"/>';
                        carousel.data('owlCarousel').addItem(content,0);
                    });
                } else {
//Или одна картинка без слайдера
                    carousel.append('<img class="cal-xs-8 img img-responsive" src="' + car.modelphoto[0].file + '"/>');
                }
            });
        });


Тут получается что добавление происходит в другой функции и он не видит уже инициированного слайдера? Получаю ошибку: Uncaught TypeError: carousel.data(...).addItem is not a function

Как лучше сделать?
Ответ: Не помогло
Вопрос: custom carousel

Здравствуйте, подскажите пожалуйста, почему у меня carousel_ch.animate({ "left": -carousel_ch_width + "px"}, 1000) выполняется только один раз

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="css/normalize.css">
	<link rel="stylesheet" href="css/styles.css">
</head>
<body>
	<div class="wrap">
		<div class="carousel-wrap">
			<ul class="carousel clearfix">
				<li class="carousel__title active">
					<div class="myslide">
						<img class="carousel__image" src="images/fl.jpg" alt="">
						<a href="#" class="carousel__link">Комнатные цветы</a>
					</div> 
				</li>
				<li class="carousel__title active">
					<div class="myslide">
						<img class="carousel__image" src="images/fl2.jpg" alt="">
						<a href="#" class="carousel__link">Свадебные цветы</a>
					</div>  
				</li>
				<li class="carousel__title active">
					<div class="myslide">
						<img class="carousel__image" src="images/fl.jpg" alt="">
						<a href="#" class="carousel__link">Комнатные цветы</a>
					</div> 
				</li>
				<li class="carousel__title active">
					<div class="myslide">
						<img class="carousel__image" src="images/fl2.jpg" alt="">
						<a href="#" class="carousel__link">Свадебные цветы</a>
					</div>  
				</li>
				<li class="carousel__title">
					<div class="myslide">
						<img class="carousel__image" src="images/fl.jpg" alt="">
						<a href="#" class="carousel__link">Комнатные цветы</a>
					</div> 
				</li>
				<li class="carousel__title">
					<div class="myslide">
						<img class="carousel__image" src="images/fl2.jpg" alt="">
						<a href="#" class="carousel__link">Свадебные цветы</a>
					</div>  
				</li>
				<li class="carousel__title">
					<div class="myslide">
						<img class="carousel__image" src="images/fl.jpg" alt="">
						<a href="#" class="carousel__link">Комнатные цветы</a>
					</div> 
				</li>
				<li class="carousel__title">
					<div class="myslide">
						<img class="carousel__image" src="images/fl2.jpg" alt="">
						<a href="#" class="carousel__link">Свадебные цветы</a>
					</div>  
				</li>
			</ul>

			<div class="controls">
				<div class="controls__prev"><a href="#"></a></div>
				<div class="controls__next"><a href="#"></a></div>
			</div>
		</div>
	</div>
	
<script src="js/jquery-1.11.3.js"></script>
<script src="js/main.js"></script>
</body>
</html>


.clearfix:before, .clearfix:after{
	content: " ";
	display: table;
}
.clearfix:after{
	clear: both;
}
body {
	background-color: #d6dbcb;
}
img {
	border: none;
	max-width: 100%;
	display: block;
	margin: auto;
}
.wrap {
	max-width: 959px;
	margin: auto;
	position: relative;
}

div.carousel-wrap {
	margin: 20px auto;
	max-width: 852px;
	overflow: hidden;
}
ul.carousel {
	padding: 20px 0 15px 0;
	margin: 0;
	list-style-type: none;
	background-color: #fff;
	/* width: 852px; */
	margin: 0 auto;

	width: 10650px;
}
li.carousel__title {
	float: left;
	position: relative;
}
div.myslide {
	width: 213px;
	text-align: center;
}
a.carousel__link {
	display: block;
	color: #be1a2a;
}

div.controls__prev {
	position: absolute;
	top: 0;
	left: 0px;
	width: 54px;
	background-color: #f0f2eb;
}
div.controls__prev > a {
	width: 22px;
	height: 45px;
	background: url(../images/prev.png) no-repeat;
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -22.5px 0 0 -11px;
}
div.controls__next {
	position: absolute;
	top: 0;
	right: 0px;
	width: 54px;
	background-color: #f0f2eb;
}
div.controls__next > a {
	width: 22px;
	height: 45px;
	background: url(../images/next.png) no-repeat;
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -22.5px 0 0 -11px;
}


$(function() {

	var init = function() {
		forward();
	}

	var forward = function() {
		$('.controls__next').on('click', function(e) {
			e.preventDefault();

			var carousel_ch = $('.carousel').children(); // все li
			var carousel_ch_last = $('.carousel').children().last(); // все li
			var carousel_first = $('.carousel').children().first();
			var active_f = $('.active').first();
			var active_l = $('.active').last();
			var active_ln = $('.active').last().next();
			var carousel_ch_width = $('.carousel').children().width();

			console.log(carousel_ch_width);

			if ( carousel_ch_last.hasClass('active') ) {
				
			} else {

				carousel_ch.animate({
					"left": -carousel_ch_width + "px"
				}, 1000)

				active_f.removeClass('active');
				active_ln.addClass('active');
			}
		})
	}

	init()
});
Ответ: Спасибо