Widget:Carousel: Difference between revisions

From Jcastle.info
No edit summary
No edit summary
 
(67 intermediate revisions by the same user not shown)
Line 1: Line 1:
<div class="container">
  <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="500">
<div id="ranking-carousel" class="pull-center">
  <!-- Indicators -->
<div id="myCarousel" class="carousel slide">
  <ol class="carousel-indicators">
<ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<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="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
<li data-target="#myCarousel" data-slide-to="3"></li>
 
<li data-target="#myCarousel" data-slide-to="4"></li>
  <!-- Wrapper for slides -->
<li data-target="#myCarousel" data-slide-to="5"></li>
  <div class="carousel-inner">
<li data-target="#myCarousel" data-slide-to="6"></li>
    <div class="item active">
<li data-target="#myCarousel" data-slide-to="7"></li>
            <img src="/smw/images/2/28/Himeji.jpg" class="img-responsive" />
<li data-target="#myCarousel" data-slide-to="8"></li>
    </div>
<li data-target="#myCarousel" data-slide-to="9"></li>
 
</ol>
    <div class="item">
<!-- Carousel items -->
            <img src="/smw/images/b/b8/Matsumoto_wide.jpg" class="img-responsive" />
<div class="carousel-inner">
    </div>
<div class="item active"><a href="/castle/1/"><img src="/smw/images/2/28/Himeji.jpg" alt="姫路城" /></a><span id="caption">姫路城</span></div>
 
<div class="item "><a href="/castle/17/"><img src="/smw/images/c/c9/Akashi.jpg" alt="熊本城" /></a><span id="caption">熊本城</span></div>
    <div class="item">
<div class="item "><a href="/castle/75/"><img src="/smw/images/b/b5/Matsue.jpg" alt="竹田城" /></a><span id="caption">竹田城</span></div>
            <img src="/smw/images/b/b8/Matsumoto_wide.jpg" class="img-responsive" />
<div class="item "><a href="/castle/18/"><img src="/smw/images/2/28/Himeji.jpg" alt="江戸城" /></a><span id="caption">江戸城</span></div>
    </div>
<div class="item active"><a href="/castle/1/"><img src="/smw/images/2/28/Himeji.jpg" alt="姫路城" /></a><span id="caption">姫路城</span></div>
  </div>
<div class="item "><a href="/castle/17/"><img src="/smw/images/c/c9/Akashi.jpg" alt="熊本城" /></a><span id="caption">熊本城</span></div>
 
<div class="item "><a href="/castle/75/"><img src="/smw/images/b/b5/Matsue.jpg" alt="竹田城" /></a><span id="caption">竹田城</span></div>
<!-- Left and right controls -->
<div class="item "><a href="/castle/18/"><img src="/smw/images/2/28/Himeji.jpg" alt="江戸城" /></a><span id="caption">江戸城</span></div>
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
<div class="item "><a href="/castle/17/"><img src="/smw/images/c/c9/Akashi.jpg" alt="熊本城" /></a><span id="caption">熊本城</span></div>
    <span class="glyphicon glyphicon-chevron-left"></span>
<div class="item "><a href="/castle/75/"><img src="/smw/images/b/b5/Matsue.jpg" alt="竹田城" /></a><span id="caption">竹田城</span></div>
    <span class="sr-only">Previous</span>
<!-- Carousel nav -->
  </a>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
  </a>
 
</div>
</div>
</div>
<script>
$(function() {
    $('.carousel').carousel({
    interval: 6000
    })
});
</script>
</div>
</div>
<!-- /#ranking-carousel -->

Latest revision as of 08:46, 14 January 2018