В этом уроке я покажу как установить слайдер (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):?>