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


[ad_1]
https://i.ytimg.com/vi/9Oo2H2hE4SE/hqdefault.jpg



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

Original source


43 responses to “Уроки по Bootstrap 3 | #6 Слайдер контента”

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Leave a Reply