"Keeper 輪播"
Bootstrap 3.3.0 Snippet by Arashi

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<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 ---------->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://keeper.taironlife.com/js/assets/owl.carousel.css">
<div class="container">
<div class="row">
<h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2>
<div class="col-md-12">
<div class="owl-carousel">
<div class="item"><img src='http://keeper.taironlife.com/img/img296.jpg' alt=''/></div>
<div class="item"><img src='http://keeper.taironlife.com//img/img296.jpg' alt=''/></div>
<div class="item"><img src='http://keeper.taironlife.com//img/img309.jpg' alt=''/></div>
</div>
</div>
</div>
</div>
<script src="http://keeper.taironlife.com/js/owl.carousel.min.js"></script>
<script src="http://keeper.taironlife.com/js/owl.carousel.js"></script>
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
.owl-carousel .owl-nav > div {
position: absolute;
display: inline-block;
width: 3%;
text-align: center;
/*opacity: .5;*/
bottom: 45%;
color: #FFF;
}
.owl-carousel .owl-nav > div:hover {
/*opacity: 1;*/
color: #FC1F02;
}
.owl-carousel .owl-nav .owl-next {
right: 20px;
}
.owl-carousel .owl-nav .owl-prev {
left: 20px;
}
.owl-carousel .owl-dot {
background-color: #000;
border-radius: 50%;
display: inline-block;
height: 15px;
margin: 0 5px;
width: 15px;
opacity: .7;
}
.owl-dots > .active{
background-color: #FC1F02;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(function(){
$('.owl-carousel').owlCarousel({
loop: true,
margin: 10,
autoplay: true,
items: 1,
nav: true,
navText:["<i class='fa fa-angle-left fa-4x'></i>","<i class='fa fa-angle-right fa-4x'></i>"],
autoHeight:true
})
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Now UI Dashboard PRO

Questions / Comments: