• Sunday , 23 July 2017

Уроки по Bootstrap 3 | #6 Слайдер контента

Code Canyon
https://i.ytimg.com/vi/9Oo2H2hE4SE/hqdefault.jpg



В этом уроке мы создадим с Вами благодаря Bootstrap 3 слайдер контента.

Original source

3d Ocean

Related Posts

43 Comments

  1. Оксана Бон
    July 1, 2017 at 19:51

    Влад, а ты же обещал, что ничего сложного! Еще такой тупой себя еще не чувствовала( каждый раз когда ты говороил – добавим новый класс – у меня глаза делались все шире) Просто погрузла здесь((
    За сколько реально это осваивается?

  2. David Matevosyan
    July 1, 2017 at 19:51

    я извеняюсь , но…. по скольку это ВИДЕО УРОК , ТЫ ДОЛЖЕН ОБЪЯСНИТЬ ЧТО К ЧЕМУ . А НЕ ПРОСТА ПИСАТЬ И ПОКАЗАТЬ ЧТО ПОЛУЧИЛОСЬ . ТЫ МНОГО ГОВОРИШЬ КАКУЮ ТО ХЕРНЬ А ПО ТЕМЕ НЕ ХЕРА . Я ВЫУЧИЛ HTML CSS БЕЗПРОБЛЕМ ПОСКОЛЬКУ ЛЮДИ ОБЪЯСНЯЛИ ЧТО К ЧЕМУ . А ТЫ ПРОСТА ТУПОЙ .

  3. Helen Z
    July 1, 2017 at 19:51

    спасибо огромное, все стало ГОРАЗДО понятнее)

  4. Cindorqw
    July 1, 2017 at 19:51

    ну и жесть

  5. Сергей Трабл
    July 1, 2017 at 19:51

    Нужна помощь, картинки не загружаются, то есть в принципе, их как бы и нет на сайте как будто. Пробовал и в разных разрешениях кидать и расширениях.

  6. Павел Меньшиков
    July 1, 2017 at 19:51

    В новом bootsrap отсутствует команды которые здесь объясняются.

  7. Adreo De Lapano
    July 1, 2017 at 19:51

    Ребята, дам совет кто не знает. Если мы делаем адаптивный сайт для мобильных устройств, то ОБЯЗАТЕЛЬНО, при подключении стилей указывать атрибут: type="text/javascript". Иначе, по крайней мере мобильный хром, не будет применять эту таблицу стилей.

  8. Андрей Яковчук
    July 1, 2017 at 19:51

    СПАСИБО БОЛЬШОЕ за видео!

  9. Иван Медведев
    July 1, 2017 at 19:51

    Все получилось, кроме gliphicon и индикаторов. По просту не отображаются стрелочки (тень есть и клик срабатывает) и индикаторы слайдов (кружочки внизу). Я так понимаю, что у меня не подключены эти элементы. Как это исправить?

  10. Сапьянов Александр
    July 1, 2017 at 19:51

    Почему-то не переключатся картинки, код проверил раз 10, не могу понять почему, можешь помочь, пожалуйста.

  11. Егор Фоменко
    July 1, 2017 at 19:51

    А как сделать авто-слайдер без стрелок?

  12. Паша Харченко
    July 1, 2017 at 19:51

    как сделать чтобы он автоматически пролистывал?

  13. Indira Sakhatova
    July 1, 2017 at 19:51

    Подскажите пожалуйста. Сверстала сайт на бутсрапе. в портфолио добавила carousel слайдеры (3шт). но работает только один из них. как это могу исправить? Или надо писать java код для каждого ? Заранее спасибо за ответы.

  14. Андрей Добрый
    July 1, 2017 at 19:51

    У меня что-то клик по кружкам на слайдере не работает.

  15. Togrul Sadigov
    July 1, 2017 at 19:51

    Хотелось бы узнать как можно сделать слайдер который имеет много элементов(допустим 10) который потом можно увеличивать и чтобы слайдер показывал в каждый момент времени только 4 элемента и чтобы можно было прокручивать их.

  16. Данил Конык
    July 1, 2017 at 19:51

    мб лень кому будет
    <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>

  17. Дмитрий Гайдабура
    July 1, 2017 at 19:51

    Подскажите как сделать этот же слайдер, но без картинки? http://joxi.ru/n2YO3Kkiok1Rgr Не пойму как без картинки задать высоту…

  18. Саша Кобзев
    July 1, 2017 at 19:51

    Ой, а у меня слайдер и ни листается, и не индикаторов вовсе нет

  19. Виктор Бельский
    July 1, 2017 at 19:51

    Может я и не там этот вопрос задаю, но как растянуть картинку на всю карусель?

  20. Olexandr Coder
    July 1, 2017 at 19:51

    Радует что пишите для людей, без спешки. С меня лайк + подписка!

  21. Дмитрий Дерюжин
    July 1, 2017 at 19:51

    При нажатии на управляющие стрелки в адрес добавляется #carousel и не листается. В чем может быть причина? пс: с вкладками таже ерунда(

  22. Кто-то Из Грота
    July 1, 2017 at 19:51

    вот рабочий 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">),
    точно ещё не понимаю почему с первого слайда отсчет не начинался, но зато он работал, если я менял слайд сам, оно само запускалось-только при условии смены слайда в ручную( в общем лучше сами попробуйте два варианта и поймете о чём я)
    =)

    А ещё, чуть не забыл! Огромное спасибо за старания Владу, Очень хорошо рассказываешь доходчиво, отлично показываешь=) Удачи тебе в дальнейших проектах)

  23. Roman Boreyko
    July 1, 2017 at 19:51

    в строке
    <li class="active" data-target="#carousel" data-slide="0"></li>
    пришлось заменить data-slide="0" на data-slide-to="0" иначе не работали кнопки
    Это значит что урок устарел?

  24. Саша Безгин
    July 1, 2017 at 19:51

    Офигеть)) Такая красота)) Спасибо большое))

  25. Віктор Вінчіторе
    July 1, 2017 at 19:51

    А у меня вопрос как убрать вот этот отступ margin между хедером и слайдом?
    Заранее спасибо, очень полезные уроки

  26. Сергей Федоров
    July 1, 2017 at 19:51

    Все сделал по уроку, но все картинки появляются на первом слайде(, что не так?

  27. Sidjn
    July 1, 2017 at 19:51

    Верно написать data-slide-to="0..10"!

  28. Владислав Ковальский
    July 1, 2017 at 19:51

    при масштабировании страницы картинка на вашем слайдере уплывет влево, позиционирование забыли карттинка относительно слайдера по центру

  29. Welcome toMeVARO
    July 1, 2017 at 19:51

    Подскажите пожалуйста, как убрать серый фон?

  30. Nursultan Ergeshov
    July 1, 2017 at 19:51

    <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>

    ЧТО Я НЕ ТАК ДЕЛАЮ?

  31. Ezi S
    July 1, 2017 at 19:51

    Подскажите пожалуйста,почему изображения не показываются и как мне уменьшить слайдер,чтобы он был под меню(навбаром) и на середине?Где же ошибка???!

    <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>

  32. evil owl
    July 1, 2017 at 19:51

    Подскажите где ошибка? у меня не показывает навигацию слайдера и не перелистывает тем более

    <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>

  33. Раскидай За SAMP
    July 1, 2017 at 19:51

    У меня слайдеры(картинки) расположены в левом углу, друг под другом.

  34. MegaLetalis
    July 1, 2017 at 19:51

    Как растянуть картинку во весь экран при смене масштаба, чтобы она не занимала всю страницу?
    Пробовал поставить width на 100%, но тогда картинка всегда занимает всю ширину экрана.

  35. Алексей Терновой
    July 1, 2017 at 19:51

    все сделал как в уроке, но слайдер славно не перелистывает(

  36. Дмитрий Жуков
    July 1, 2017 at 19:51

    Как выровнять слайдер по центру страницы? Т.е. ширина изображения в слайдере меньше ширины страницы и все сдвигается к левому краю, а справа появляется серая плашка под стрелкой перемотки.

  37. Murr Channel
    July 1, 2017 at 19:51

    Добрый день всем! Подскажите пожайлуста, как сделать чтоб у слайдера работал autoplay?

  38. Женя Выходцев
    July 1, 2017 at 19:51

    не показывается изображения img-rounded

  39. Ырыскелди Молдоташов
    July 1, 2017 at 19:51

    у меня вообще нет стрелок

  40. Фарход Тожиев
    July 1, 2017 at 19:51

    Ребята помогите с такой проблемой, когда ширина сайта уменьшается и меню скрывается, когда я нажимаю на кнопку для открытия меню и меню открывается, но оно открывается под слайдером как это исправить?

  41. Валентин
    July 1, 2017 at 19:51

    Подскажите пожалуйста название темы, которую вы используйте в этом видео в brackets.

  42. Макар Пелогейко
    July 1, 2017 at 19:51

    долго тупил,
    смотрел carousel на bootstrapовском сайте, смотрел у тебя, и только сейчас въехал, что bootstrap.js не работает с
    jqery 3

  43. Руслан Павлов
    July 1, 2017 at 19:51

    Доброго времени суток. Проблема состоит в следующем: изображения которые я беру разных размеров и при смене слайда индикаторы некрасиво скачут вверх вниз в зависимости от размера изображения, да и сами изображения имеют большой отступ от краев(отцентровал по центру, так как был огромный отступ справа). Можно ли сделать адаптацию (растягивание/сжимание) изображения под определенный, заранее заданный размер? Всем добра, а автору всего самого лучшего за его труды!

Leave A Comment

You must be logged in to post a comment.