В этом уроке я покажу как установить слайдер (slider) Bootstrap 3.0. Bootstrap как вы знаете это набор инструментов и среди этих инструментов есть слайдер. Полностью код со слайдером будет таким
<!DOCTYPE html>
<html>
<head>
<title>Первый шаблон</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/dopstyle.css" rel="stylesheet" media="screen">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row otstup">
<div class="col-md-2"></div>
<div class="col-md-8">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Маркеры слайдов -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Содержимое слайдов -->
<div class="carousel-inner">
<div class="item active">
<img src="images/slider/1.jpg" alt="...">
<div class="carousel-caption">
<h3>Россия (Москва)</h3>
<p>Где это видано, чтобы люди в Москве без прописки проживали.</p>
</div>
</div>
<div class="item">
<img src="images/slider/2.jpg" alt="...">
<div class="carousel-caption">
<h3>Осень</h3>
<p>Осень — это вторая весна, когда каждый лист — цветок.</p>
</div>
</div>
<div class="item">
<img src="images/slider/3.jpg" alt="...">
<div class="carousel-caption">
<h3>Дождь</h3>
<p>Осень опять идут дожди...</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
</div>
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Теперь я постараюсь объяснить значение некоторых строчек в коде.
<div class="container"> <div class="row otstup">
Те кто читал мои предыдущие уроки по Boostrap уже знают для чего нужен container и для чего нужен row тут есть еще дополнительный стиль otstup его я прописал для того чтобы задать отступ сверху сам стиль будет иметь следующие параметры.
.otstup{
margin-top:30px;
}
Slider в Bootstrap должен заключаться в специальный контейнер следующего вида
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
</div>
Внутри контейнера так же можно расположить маркеры
<!-- Маркеры слайдов --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol>
Для тех кто не знает что такое маркеры я сделал скриншот
Каждый слайд имеет следующую структуру
<div class="item"> <img src="images/slider/2.jpg" alt="..."> <div class="carousel-caption"> <h3>Осень</h3> <p>Осень — это вторая весна, когда каждый лист — цветок.</p> </div> </div>
Активный слайд (тот с которого все начинается) обозначается классом active
<div class="item active"> <img src="images/slider/1.jpg" alt="..."> <div class="carousel-caption"> <h3>Россия (Москва)</h3> <p>Где это видано, чтобы люди в Москве без прописки проживали.</p> </div> </div>
При этом в маркерах тоже необходимо отметить активный слайд с помощью того же класса active
<ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
Хочу так же поделиться очень нужным стилем для эффекта fade (это эффект исчезновения слайда и плавного перетекания в другой слайд)
Следующий код нужно добавить в файл dopstyle.css который находится в папке css
/* Fade Slider CSS */
.carousel .item {
-webkit-transition: 0.7s ease-in-out opacity;
-moz-transition: 0.7s ease-in-out opacity;
-o-transition: 0.7s ease-in-out opacity;
transition: 0.7s ease-in-out opacity;
left: 0 !important;
}
.carousel .next.left,
.carousel .prev.right {
opacity: 1;
z-index: 1;
}
.carousel .active.left,
.carousel .active.right {
opacity: 0;
z-index: 2;
}
.carousel .carousel-control {
z-index: 1000;
outline:none;
}
В итоге должно получиться вот так
Ниже можно скачать два готовых примера
Пример с обычным эффектом Скачать
Пример с эффектом fade Скачать
как сделать меркер такого типа http://clip2net.com/s/6QFlsJ
HTML код
Маркер 1
Маркер 2
Маркер 3
Стили CSS
li{
background:url(путь к картинке) no-repeat;
display:inline-block;
margin-right:40px;
}
li:hover{
background:url(путь к картинке при наведение) no-repeat;
}
К как сделать чтобы было несколько изобрадений на слайд?
как сделать чтобы маркери были за пределами слайдов
отрицательным позиционированием блока с маркерами, элементарно же
когда добавляю новые элементы, почему-то слайды оказываются за слайдером.
Добавляю каждый элемент, как
Дождь
Осень опять идут дожди…
новый индикатор, как:
Получается, что картинка выплывает ниже, а индикатор не работает
В чем причина?
все разобрался! оказалось внизу в каждом новом элементе стоял лишний
Как сделать чтоб слайды автоматически заполняли всю страницу?
Привет.подскажите как сделать картинки в слайдере кликабельными ПРИ условии,что они вызываются PHP/ при клике по слайду-человека напрвляло бы на другую страницу
вот код
findByPk(38);-
$gallery=$main->galleryBehavior->getGalleryPhotos();
if(count($gallery)>0):?>
$photo):?>
0):?>
getUrl())->adaptive(1920,500,true)->cache()?>» alt=»…»>$photo):?>