[ad_1]
https://i.ytimg.com/vi/9Oo2H2hE4SE/hqdefault.jpg
В этом уроке мы создадим с Вами благодаря Bootstrap 3 слайдер контента.
Original source
Уроки по Bootstrap 3 | #6 Слайдер контента
[ad_1]
https://i.ytimg.com/vi/9Oo2H2hE4SE/hqdefault.jpg
В этом уроке мы создадим с Вами благодаря Bootstrap 3 слайдер контента.
Original source
43 responses to “Уроки по Bootstrap 3 | #6 Слайдер контента”
Влад, а ты же обещал, что ничего сложного! Еще такой тупой себя еще не чувствовала( каждый раз когда ты говороил – добавим новый класс – у меня глаза делались все шире) Просто погрузла здесь((
За сколько реально это осваивается?
я извеняюсь , но…. по скольку это ВИДЕО УРОК , ТЫ ДОЛЖЕН ОБЪЯСНИТЬ ЧТО К ЧЕМУ . А НЕ ПРОСТА ПИСАТЬ И ПОКАЗАТЬ ЧТО ПОЛУЧИЛОСЬ . ТЫ МНОГО ГОВОРИШЬ КАКУЮ ТО ХЕРНЬ А ПО ТЕМЕ НЕ ХЕРА . Я ВЫУЧИЛ HTML CSS БЕЗПРОБЛЕМ ПОСКОЛЬКУ ЛЮДИ ОБЪЯСНЯЛИ ЧТО К ЧЕМУ . А ТЫ ПРОСТА ТУПОЙ .
спасибо огромное, все стало ГОРАЗДО понятнее)
ну и жесть
Нужна помощь, картинки не загружаются, то есть в принципе, их как бы и нет на сайте как будто. Пробовал и в разных разрешениях кидать и расширениях.
В новом bootsrap отсутствует команды которые здесь объясняются.
Ребята, дам совет кто не знает. Если мы делаем адаптивный сайт для мобильных устройств, то ОБЯЗАТЕЛЬНО, при подключении стилей указывать атрибут: type="text/javascript". Иначе, по крайней мере мобильный хром, не будет применять эту таблицу стилей.
СПАСИБО БОЛЬШОЕ за видео!
Все получилось, кроме gliphicon и индикаторов. По просту не отображаются стрелочки (тень есть и клик срабатывает) и индикаторы слайдов (кружочки внизу). Я так понимаю, что у меня не подключены эти элементы. Как это исправить?
Почему-то не переключатся картинки, код проверил раз 10, не могу понять почему, можешь помочь, пожалуйста.
А как сделать авто-слайдер без стрелок?
как сделать чтобы он автоматически пролистывал?
Подскажите пожалуйста. Сверстала сайт на бутсрапе. в портфолио добавила carousel слайдеры (3шт). но работает только один из них. как это могу исправить? Или надо писать java код для каждого ? Заранее спасибо за ответы.
У меня что-то клик по кружкам на слайдере не работает.
Хотелось бы узнать как можно сделать слайдер который имеет много элементов(допустим 10) который потом можно увеличивать и чтобы слайдер показывал в каждый момент времени только 4 элемента и чтобы можно было прокручивать их.
мб лень кому будет
<div id="carousel" class="carousel slide">
<!
-индикаторы слайдов-><ol class="carousel-indicators">
<li class="active" data-target="#carousel" data-slide="0"></li>
<li data-target="#carousel" data-slide="1"></li>
<li data-target="#carousel" data-slide="2"></li>
</ol>
<!
-слайды-><div class="carousel-inner">
<div class="item active">
<img src="images/gazobeton-krivoy-rog41.jpg" alt="">
<div class="carousel-caption">
<h3>Первый слайд</h3>
<p>описание певого</p>
<div>
</div>
<div class="item"></div>
<img src="images/gazobeton-krivoy-rog56.jpg" alt="">
<div class="carousel-caption">
<h3>второй слайд</h3>
<p>описание второго</p>
<div class="item"></div>
<img src="images/gazobeton-krivoy-rog64.jpg" alt="">
<div class="carousel-caption">
<h3>третьего слайд</h3>
<p>описание третьего</p>
</div>
<!
-стрелки переключения слайдов-><a href="#carousel" class="left carousel-control" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a href="#carousel" class="right carousel-control" data-slide="next">>
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
Подскажите как сделать этот же слайдер, но без картинки? http://joxi.ru/n2YO3Kkiok1Rgr Не пойму как без картинки задать высоту…
Ой, а у меня слайдер и ни листается, и не индикаторов вовсе нет
Может я и не там этот вопрос задаю, но как растянуть картинку на всю карусель?
Радует что пишите для людей, без спешки. С меня лайк + подписка!
При нажатии на управляющие стрелки в адрес добавляется #carousel и не листается. В чем может быть причина? пс: с вкладками таже ерунда(
вот рабочий html
<!
-slider-><div id="carousel" class="carousel slide" data-ride="carousel">
<!
-Indicators-><ol class="carousel-indicators">
<li class="active" data-target="#carousel" data-slide-to="0"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
<li data-target="#carousel" data-slide-to="3"></li>
</ol>
<!
-slides-><div class="carousel-inner">
<div class="item active">
<img src="img/feature-1.jpg" alt="" >
</div>
<div class="item">
<img src="img/feature-2.jpg" alt="" >
</div>
<div class="item">
<img src="img/feature-3.jpg" alt="" >
</div>
<div class="item">
<img src="img/feature-4.jpg" alt="" >
</div>
</div>
<!
-carousel control-><a href="#carousel" class="left carousel-control" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a href="#carousel" class="right carousel-control" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
из самых больших ошибок которые я встретил за время пока я его разбирал – это:
1. Классы(class) – часто допускал грамматическую ошибку в классах, но это легко было исправить!
2. Дивы(div) – очень много раз не туда помещал(создавал Div в Div-e, что-бы, когда я помещал Div, картинку div был в div-e, когда тот Div в Div-e) как-то так, легко запутаться, по-этому советую комментировать и отступать между каждым "блоком"
3.Не хватало одного атрибута в главном блоке, может это я прозевал изначально, но тем не менее, я теперь знаю почему у меня первый слайд не приходил в действие, изначально, а то есть, самая первая строка выглядела у меня вот так:
(<div id="carousel" class="carousel slide">),
точно ещё не понимаю почему с первого слайда отсчет не начинался, но зато он работал, если я менял слайд сам, оно само запускалось-только при условии смены слайда в ручную( в общем лучше сами попробуйте два варианта и поймете о чём я)
=)
А ещё, чуть не забыл! Огромное спасибо за старания Владу, Очень хорошо рассказываешь доходчиво, отлично показываешь=) Удачи тебе в дальнейших проектах)
в строке
<li class="active" data-target="#carousel" data-slide="0"></li>
пришлось заменить data-slide="0" на data-slide-to="0" иначе не работали кнопки
Это значит что урок устарел?
Офигеть)) Такая красота)) Спасибо большое))
А у меня вопрос как убрать вот этот отступ margin между хедером и слайдом?
Заранее спасибо, очень полезные уроки
Все сделал по уроку, но все картинки появляются на первом слайде(, что не так?
Верно написать data-slide-to="0..10"!
при масштабировании страницы картинка на вашем слайдере уплывет влево, позиционирование забыли карттинка относительно слайдера по центру
Подскажите пожалуйста, как убрать серый фон?
<div id="carousel" class="carousel slide">
<ol class="carousel-indicators">
<li class="active" data-target="#carousel" data-slide="0"></li>
<li data-target="#carousel" data-slide="1"></li>
<li data-target="#carousel" data-slide="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="img/1.jpg">
<div class="carousel-caption">
<h3>First slide</h3>
<p>About</p>
</div>
</div>
<div class="item">
<img src="img/1.jpg">
<div class="carousel-caption">
<h3>Second slide</h3>
<p>About</p>
</div>
</div>
<div class="item">
<img src="img/1.jpg">
<div class="carousel-caption">
<h3>Third slide</h3>
<p>About</p>
</div>
</div>
</div>
<a href="#carousel" class="left carousler-control" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a href="#carousel" class="left carousler-control" data-slide="next">>
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
ЧТО Я НЕ ТАК ДЕЛАЮ?
Подскажите пожалуйста,почему изображения не показываются и как мне уменьшить слайдер,чтобы он был под меню(навбаром) и на середине?Где же ошибка???!
<div id="carousel" class="carousel-slide" >
<!
-Индикаторы слайдов-><ol class="carousel-indicators">
<li class="active" data-target="#carousel" data-slide-to="0"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<!
-Слайды-><div class="carousel-inner">
<div class="item active">
<img scr="images/(8).png" alt="">
<div class="carousel-caption">
<h3>Первый слайд</h3>
<p> Описание 1</p>
</div>
</div>
<div class="item">
<img scr="image/(8).png">
<div class="carousel-caption">
<h3>Второй слайд</h3>
<p> Описание 2</p>
</div>
</div>
<div class="item">
<img scr="images/(8).png">
<div class="carousel-caption">
<h3>Третий слайд</h3>
<p> Описание 3</p>
</div>
</div>
</div>
<!
-Стрелки переключения слайдов-><a href="#carousel" class="left carousel-control" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a href="#carousel" class="right carousel-control" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
Подскажите где ошибка? у меня не показывает навигацию слайдера и не перелистывает тем более
<div id="carousel" class="carusel slide">
<!— Индикаторы слайдов–>
<ol class="carousel-indicators">
<li class="active" data-target="#carousel" data-slide="0"></li>
<li data-target="#carousel" data-slide="1"></li>
<li data-target="#carousel" data-slide="2"></li>
</ol>
<!— слайды–>
<div class="carousel-inner">
<div class="item active">
<img src="header.png" alt="">
<div class="carousel-caption">
<h3>OLOLOLO</h3>
<p>olololololololololoollo</p>
</div>
</div>
<div class="item">
<img src="header.png" alt="">
<div class="carousel-caption">
<h3>OLOLOLO</h3>
<p>olololololololololoollo</p>
</div>
<div class="item">
<img src="header.png" alt="">
<div class="carousel-caption">
<h3>OLOLOLO</h3>
<p>olololololololololoollo</p>
</div>
</div>
<!— Стрелки переключение слайда–>
<a href="#carousel" class="left carousel-control" data-slide="prew">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a href="#carousel" class="right carousel-control" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
У меня слайдеры(картинки) расположены в левом углу, друг под другом.
Как растянуть картинку во весь экран при смене масштаба, чтобы она не занимала всю страницу?
Пробовал поставить width на 100%, но тогда картинка всегда занимает всю ширину экрана.
все сделал как в уроке, но слайдер славно не перелистывает(
Как выровнять слайдер по центру страницы? Т.е. ширина изображения в слайдере меньше ширины страницы и все сдвигается к левому краю, а справа появляется серая плашка под стрелкой перемотки.
Добрый день всем! Подскажите пожайлуста, как сделать чтоб у слайдера работал autoplay?
не показывается изображения img-rounded
у меня вообще нет стрелок
Ребята помогите с такой проблемой, когда ширина сайта уменьшается и меню скрывается, когда я нажимаю на кнопку для открытия меню и меню открывается, но оно открывается под слайдером как это исправить?
Подскажите пожалуйста название темы, которую вы используйте в этом видео в brackets.
долго тупил,
смотрел carousel на bootstrapовском сайте, смотрел у тебя, и только сейчас въехал, что bootstrap.js не работает с
jqery 3
Доброго времени суток. Проблема состоит в следующем: изображения которые я беру разных размеров и при смене слайда индикаторы некрасиво скачут вверх вниз в зависимости от размера изображения, да и сами изображения имеют большой отступ от краев(отцентровал по центру, так как был огромный отступ справа). Можно ли сделать адаптацию (растягивание/сжимание) изображения под определенный, заранее заданный размер? Всем добра, а автору всего самого лучшего за его труды!