Загрузка

RUS | ANG | |

StepkinBlog.ru

Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap

Главная » Основы Bootstrap 3 » Как создать слайдер (карусель). Основы bootstrap 3 для начинающих. Урок №18

27.09.2016


15:16


4733


4


Как создать слайдер (карусель). Основы bootstrap 3 для начинающих. Урок №18

Как создать слайдер (карусель). Основы bootstrap 3 для начинающих. Урок №18

Всем привет!
В сегодняшнем уроке вы научитесь создавать слайдер (карусель) для ваших сайтов на известном фреймворке Twitter Boostrap 3. Слайдер (карусель) – это циклическая смена изображений или текста, или проще говоря – слайд-шоу.
В Boostrap 3 есть подготовленный код со всеми необходимыми стилями. За 5 минут у вас на сайте будет готовый слайдер, плюс ко всему, еще и адаптивный.

<!-- Карусель -->
<div id="myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel">
<!-- Индикаторы для карусели -->
<ol class="carousel-indicators">
<!-- Перейти к 0 слайду карусели с помощью соответствующего индекса data-slide-to="0" -->
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<!-- Перейти к 1 слайду карусели с помощью соответствующего индекса data-slide-to="1" -->
<li data-target="#myCarousel" data-slide-to="1"></li>
<!-- Перейти к 2 слайду карусели с помощью соответствующего индекса data-slide-to="2" -->
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Слайды карусели -->
<div class="carousel-inner">
<!-- Слайды создаются с помощью контейнера с классом item, внутри которого помещается содержимое слайда -->
<div class="active item">
<img src="izobrazhenie.png">
<h2>Слайд №1</h2>
<div class="carousel-caption">
<h3>Заголовок 1 слайда</h3>
<p>Текст (описание) 1 слайда...</p>
</div>
</div>
<!-- Слайд №2 -->
<div class="item">
<img src="izobrazhenie.png">
<h2>Slide 2</h2>
<div class="carousel-caption">
<h3>Second slide label</h3>
<p>Aliquam sit amet gravida nibh, facilisis gravida odio.</p>
</div>
</div>
<!-- Слайд №3 -->
<div class="item">
<img src="izobrazhenie.png">
<h2>Slide 3</h2>
<div class="carousel-caption">
<h3>Third slide label</h3>
<input type="submit" class="btn btn-primary" value="Регистрация">
</div>
</div>

<!-- сюда добавляем еще код слайдера-->

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

Чтобы добавить еще слайды, вам нужна строка №42, и после за комментированного текста «сюда добавляем еще код слайдера», вставляем вот такой код слайда:

<!-- Слайд №4 -->
<div class="item">
<img src="…">
<h2>Slide 4</h2>
<div class="carousel-caption">
<h3>Second slide label</h3>
<p>Aliquam sit amet gravida nibh, facilisis gravida odio.</p>
</div>
</div>

А также добавляете в строку №10 вот этот код:

<!-- Перейти к 3 слайду карусели с помощью соответствующего индекса data-slide-to="3" -->
<li data-target="#myCarousel" data-slide-to="3"></li>

Это нужно для вот этого:

Как создать слайдер (карусель). Основы bootstrap 3 для начинающих. Урок №18

Результат проделанной работы:

посмотреть демонстрацию

Можно добавить к слайдеру свои CSS стили (о том, как добавить свои стили я расскажу в конце курса):

h2{
margin: 0;
color: #666;
font-size: 52px;
font-family: "trebuchet ms", sans-serif;
}
.item{
background: #333;
text-align: center;
}

Вот и все, ничего сложного нет!
Удачи всем и жду вас на следующих уроках. Подписывайтесь на обновления блога.



Случайные записи:

  1. Подключение. Основы bootstrap 3 для начинающих. Урок №2
  2. Оператор условия if else Основы PHP с нуля Урок №9
  3. Позиционирование блоков CSS. Основы CSS для начинающих. Урок №14
  4. Как указать кодировку сайта на HTML. Основы HTML для начинающих. Урок №20
  5. Как вставить картинку в HTML. Основы HTML для начинающих. Урок №5

Последние записи рубрики:

  1. Бесплатный курс по основам Bootstrap3
  2. Создание простого сайта на Bootstrap 3. Практика по пройденному материалу
  3. Тесты Bootstrap 3 онлайн. Основы Bootstrap 3 для начинающих
  4. Создание галереи изображений. Основы bootstrap3 для начинающих. Урок №26
  5. Миниатюры. Основы bootstrap 3 для начинающих. Урок №25

4 ответа(ов) на статью: “Как создать слайдер (карусель). Основы bootstrap 3 для начинающих. Урок №18”

  1. Александр says:

    Доброго времени суток, урок понятный и интересный, а вот как сделать, чтобы картинку и текст слайд брал из новостей? :|

    Ответить

    Степка
    Степка ответил(а) на комментарий:

    Здравствуйте, Александр!
    Здесь без php не обойтись.
    Нужно использовать цикл. Если Вы используете WordPress, то там есть свои функции и хуки.

    Ответить

  2. Владимир says:

    Привет!
    Начал изучать натяжку бутстраповской вёрстки на Вордпресс.
    на данном этапе всё смотрится ОК, адаптив работает, но:
    1. Слайдер не прокручивается(хотя в админ панели Вордпресса - работает)
    2. Кнопка меню в сворачиваемом состоянии не открывает меню.

    Как я понимаю, скрипт, не срабатывается. Что я упустил?

    Ответить

    Степка
    Степка ответил(а) на комментарий:

    Привет!
    Возможно не совместимость версии jquery.

    Ответить

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Подписаться на обновления:

Подпишись на обновления моего блога через e-m@il:

@

Реклама на блоге:

Мои цели на
2017 год:

Довести количество статей до 150

Доделать этот блог

Закончить тему «Основы CSS»

Закончить тему «Основы PHP»

Начать тему «Основы JavaScript»

Добиться посещаемости 500 чел/сутки

Статистика:

Записей: 104
Страниц: 3
Рубрик: 9
Меток: 11
Комментариев: 245