Создание слайдера на базе Bootstrap со статическим текстом

1111111111Rating 5.00 (2 Votes)
Понадобилось создать слайдер со статическим контекстом т.е. слайды должны листаться, текст слайдера должен находится в неподвижном состоянии поверх слайдов. В качестве поставщика изображений можно использовать сервис Placehold.it посредством которого можно подставлять изображения нужного размера в демонстрационный контент. Для демонстрации слайдера необходимо создать html файл с ниже представленным кодом:
 

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Загрузка файлов</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="Yevgeniy Goncharov aka xck" />
<meta name="robots" content="noindex,nofollow" />

</head>
<body>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<style>
.main-text
{
position: absolute;
top: 50px;
width: 96.66666666666666%;
color: #FFF;
}
.btn-min-block
{
min-width: 170px;
line-height: 26px;
}
.btn-clear
{
color: #FFF;
background-color: transparent;
border-color: #FFF;
margin-right: 15px;
}
.btn-clear:hover
{
color: #000;
background-color: #FFF;
}

</style>

<div class="container">
<div class="row">
<div class="col-md-12">
<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="http://placehold.it/1200x500/3498db/2980b9" alt="First slide">
<div class="carousel-caption">
<h3>
First slide</h3>
<p>
Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x500/9b59b6/8e44ad" alt="Second slide">
<div class="carousel-caption">
<h3>
Second slide</h3>
<p>
Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x500/34495e/2c3e50" alt="Third slide">
<div class="carousel-caption">
<h3>
Third slide</h3>
<p>
Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
</div>
<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 class="main-text hidden-xs">
<div class="col-md-12 text-center">
<h1>
Static Headline</h1>
<h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</h3>
<div class="">
<a class="btn btn-clear btn-sm btn-min-block" href="http://sys-admin.kz/">Login</a><a class="btn btn-clear btn-sm btn-min-block"
href="http://sys-admin.kz/">Registration</a></div>
</div>
</div>
</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

</body>
</html>

Окрыть файл в любом браузере.
 
Статический слайд
 

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


Обновить
Защитный код

Сейчас 83 гостей и ни одного зарегистрированного пользователя на сайте

Вверх
Вниз