貓頭鷹幻燈片Owl Carousel套用
貓頭鷹幻燈片Owl Carousel
https://owlcarousel2.github.io/OwlCarousel2/
//新增至bundleConfig.cs
//highcharts
bundles.Add(new ScriptBundle("~/bundles/highchartsjs").Include(
"~/Scripts/highcharts.js",
"~/Scripts/data.js",
"~/Scripts/drilldown.js"));
bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
"~/Content/themes/base/jquery.ui.core.css",
"~/Content/themes/base/jquery.ui.resizable.css",
"~/Content/themes/base/jquery.ui.selectable.css",
"~/Content/themes/base/jquery.ui.accordion.css",
"~/Content/themes/base/jquery.ui.autocomplete.css",
"~/Content/themes/base/jquery.ui.button.css",
"~/Content/themes/base/jquery.ui.dialog.css",
"~/Content/themes/base/jquery.ui.slider.css",
"~/Content/themes/base/jquery.ui.tabs.css",
"~/Content/themes/base/jquery.ui.datepicker.css",
"~/Content/themes/base/jquery.ui.progressbar.css",
"~/Content/themes/base/jquery.ui.theme.css"));
//carousel
bundles.Add(new StyleBundle("~/bundles/carouselcss").Include(
"~/Content/owl.carousel.css",
"~/Content/owl.theme.default.css"));
bundles.Add(new ScriptBundle("~/bundles/carouseljs").Include(
"~/Scripts/owl.carousel.js"));
<div class="container">
<div class="row">
<div class="col-sm-12">
@* 時間 data-interval="0050"*@
<div id="carousel-id" class="carousel slide" data-ride="carousel">
<!-- 幻燈片小圓點區 -->
<ol class="carousel-indicators">
<li data-target="#carousel-id" data-slide-to="0" class="active"></li>
<li data-target="#carousel-id" data-slide-to="1" class=""></li>
<li data-target="#carousel-id" data-slide-to="2" class=""></li>
</ol>
<!-- 幻燈片主圖區 -->
<div class="carousel-inner">
<div class="item active text-center" >
<img id="images1" src="#"/>
<div class="container">
<div class="carousel-caption">
<h1>我好帥</h1>
<p>你愛上我了嗎？</p>
<a id="a1" href="#">
<div class="btn btn-lg btn-primary" role="button">選我選我</div>
</a>
</div>
</div>
</div>
<div class="item text-center">
<img id="images2" src="#" />
<div class="container">
<div class="carousel-caption">
<h1>我好可愛</h1>
<p>你愛上我了嗎？</p>
<a id="a2" href="#">
<div class="btn btn-lg btn-primary" role="button">選我選我</div>
</a>
</div>
</div>
</div>
<div class="item text-center">
<img id="images3" src="#" />
<div class="container">
<div class="carousel-caption">
<h1>我好性感</h1>
<p>你愛上我了嗎？</p>
<a id="a3" href="#">
<div class="btn btn-lg btn-primary" role="button">選我選我</div>
</a>
</div>
</div>
</div>
</div>
<!-- 上下頁控制區 -->
<a class="left carousel-control" href="#carousel-id" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#carousel-id" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</div>
</div>
