"Awesome Bootstrap Carousel Slider"
Bootstrap 3.3.0 Snippet by raazon

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!-- Slider start -->
<div class="slider">
<div class="slider-wrap">
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="mogo-slider" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner text-center" role="listbox">
<div class="item active">
<div class="slider-content">
<p class="slider-caption">
Creative Template
</p>
<h3 class="slider-titile text-uppercase">
Welcome <br> to mogo
</h3>
<span class="verticle-bar"></span>
<div class="btn-action">
<a href="#" class="btn btn-primary">Learn More</a>
</div>
</div>
</div>
<div class="item">
<div class="slider-content">
<p class="slider-caption">
Creative Template
</p>
<h3 class="slider-titile text-uppercase">
Welcome <br> to mogo
</h3>
<span class="verticle-bar"></span>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@import url('https://fonts.googleapis.com/css?family=Kaushan+Script|Montserrat:400,700');
/* Mogo slider */
.slider {
background: url("https://raw.githubusercontent.com/raazon/raazon.github.io/master/HTML/mogo/img/slider-bg.jpg") no-repeat center / cover;
position: relative;
}
.slider:after {
content: "";
opacity: 0.8;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: -moz-linear-gradient(top, #e68282 0%, #f0d68a 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #e68282 0%, #f0d68a 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #e68282 0%, #f0d68a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e68282', endColorstr='#f0d68a', GradientType=0); /* IE6-9 */
}
/* Carousel */
.slider .carousel {
z-index: 1;
padding: 100px 0 50px 0;
}
.slider .carousel-inner {
}
.slider .slider-content p {
color: #fff;
font-size: 72px;
line-height: 140px;
font-family: 'Kaushan Script', cursive;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
jQuery('#mogo-slider').carousel({
interval: 5000
})
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

This is real Awesome Bootstrap slider
http://awesomebootstrap.net...

Nur Alam () - 7 years ago - Reply 0