"Sodex 標準輪播"
Bootstrap 3.3.0 Snippet by taironlife

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
24
25
26
27
28
29
<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 href="http://sodexo.taironlife.com/js/assets/owl.carousel.css" rel="stylesheet">
<link href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.theme.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="container">
<div class="row">
<h2 class="text-center">Sodex 標準輪播</h2>
<div class="col-md-12">
<div id="owl-example" class="owl-carousel">
<div><img src="http://sodexo.taironlife.com/upload/static_page/72e18380.png"></div>
<div><img src="http://sodexo.taironlife.com/upload/static_page/72e18380.png"></div>
<div><img src="http://sodexo.taironlife.com/upload/static_page/72e18380.png"></div>
<div><img src="http://sodexo.taironlife.com/upload/static_page/72e18380.png"></div>
<div><img src="http://sodexo.taironlife.com/upload/static_page/72e18380.png"></div>
<div><img src="http://sodexo.taironlife.com/upload/static_page/72e18380.png"></div>
<div><img src="http://sodexo.taironlife.com/upload/static_page/72e18380.png"></div>
</div>
</div>
</div>
</div>
<script src="http://sodexo.taironlife.com/js/owl.carousel.min.js"></script>
<script src="http://sodexo.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 {
background-color: #fff;
position: absolute;
top: 50%;
display: inline-block;;
width: 30px;
line-height: 50px;
height: 50px;
text-align: center;
font-size: 24px;
opacity: .7;
}
.owl-carousel .owl-nav > div:hover {
opacity: 1;
}
.owl-carousel .owl-nav .owl-next {
right: 5px;
border-radius: 0 5px 5px 0;
}
.owl-carousel .owl-nav .owl-prev {
left: 5px;
border-radius: 5px 0 0 5px;
}
.owl-carousel .owl-dot {
background-color: #fff;
border: 1px solid #FFF;
border-radius: 50%;
display: inline-block;
height: 15px;
margin: 0 5px;
width: 15px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(document).ready(function() {
$('#owl-example').owlCarousel({
loop: true,
margin: 10,
autoplay: true,
items: 1,
nav: true,
navText:["<i class='fa fa-angle-left'></i>","<i class='fa fa-angle-right'></i>"]
})
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Now UI Dashboard React

Questions / Comments: