Bang hội
» Wapmaster » All shared script » [WAPKA] Share Code trình diễn ảnh chuyên nghiệp với carousel 
» [WAPKA] Share Code trình diễn ảnh chuyên nghiệp với carousel |  Pham_loi
 Chức vụ:
06:23:53, 16-08-2016 |
Demo: http://forumvn.biz/site_205.xhtml
Dùng pc, androi hoặc window để xem
Code:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
</style>
<div class="container">
<br/>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
:filelist:nc=1,d=3,l=1,s=1,o=:get-sx(tu):::<img src="%url%" alt="Chania" width="460" height="345"/> :: :/filelist:
</div>
<div class="item">
:filelist:nc=2,d=3,l=1,s=2,o=:get-sx(tu):::<img src="%url%" alt="Chania" width="460" height="345"/> :: :/filelist:
</div>
<div class="item">
:filelist:nc=2,d=3,l=1,s=3,o=:get-sx(tu):::<img src="%url%" alt="Chania" width="460" height="345"/> :: :/filelist:
</div>
<div class="item">
:filelist:nc=2,d=3,l=1,s=4,o=:get-sx(tu):::<img src="%url%" alt="Chania" width="460" height="345"/> :: :/filelist:
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
Copy code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
</style>
<div class="container">
<br/>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
:filelist:nc=1,d=3,l=1,s=1,o=:get-sx(tu):::<img src="%url%" alt="Chania" width="460" height="345"/> :: :/filelist:
</div>
<div class="item">
:filelist:nc=2,d=3,l=1,s=2,o=:get-sx(tu):::<img src="%url%" alt="Chania" width="460" height="345"/> :: :/filelist:
</div>
<div class="item">
:filelist:nc=2,d=3,l=1,s=3,o=:get-sx(tu):::<img src="%url%" alt="Chania" width="460" height="345"/> :: :/filelist:
</div>
<div class="item">
:filelist:nc=2,d=3,l=1,s=4,o=:get-sx(tu):::<img src="%url%" alt="Chania" width="460" height="345"/> :: :/filelist:
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
Copy code
Nguồn: WKVN
:
0 ♥