Widget:Carousel: Difference between revisions

From Jcastle.info
No edit summary
No edit summary
 
(69 intermediate revisions by the same user not shown)
Line 1: Line 1:
<h2>いま注目のお城</h2>
  <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="500">
<div id="ranking-carousel" class="pull-center">
  <!-- Indicators -->
 
  <ol class="carousel-indicators">
<div id="myCarousel" class="carousel slide">
    <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>
    <li data-target="#myCarousel" data-slide-to="3"></li>
  </ol>
    <li data-target="#myCarousel" data-slide-to="4"></li>
    <li data-target="#myCarousel" data-slide-to="5"></li>
    <li data-target="#myCarousel" data-slide-to="6"></li>
    <li data-target="#myCarousel" data-slide-to="7"></li>
    <li data-target="#myCarousel" data-slide-to="8"></li>
    <li data-target="#myCarousel" data-slide-to="9"></li>
    </ol>
    <!-- Carousel items -->
    <div class="carousel-inner">


    <div class="item active"><a href="/castle/1/"><img src="/smw/images/2/28/Himeji.jpg" alt="姫路城" /></a><span id="caption">姫路城</span></div>
  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
            <img src="/smw/images/2/28/Himeji.jpg" class="img-responsive" />
    </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">
            <img src="/smw/images/b/b8/Matsumoto_wide.jpg" class="img-responsive" />
    </div>


     <div class="item "><a href="/castle/75/"><img src="/smw/images/b/b5/Matsue.jpg" alt="竹田城" /></a><span id="caption">竹田城</span></div>
     <div class="item">
            <img src="/smw/images/b/b8/Matsumoto_wide.jpg" class="img-responsive" />
    </div>
  </div>


    <div class="item "><a href="/castle/18/"><img src="/smw/images/2/28/Himeji.jpg" alt="江戸城" /></a><span id="caption">江戸城</span></div>
<!-- Left and right controls -->
 
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <div class="item active"><a href="/castle/1/"><img src="/smw/images/2/28/Himeji.jpg" alt="姫路城" /></a><span id="caption">姫路城</span></div>
     <span class="glyphicon glyphicon-chevron-left"></span>
 
     <span class="sr-only">Previous</span>
     <div class="item "><a href="/castle/17/"><img src="/smw/images/c/c9/Akashi.jpg" alt="熊本城" /></a><span id="caption">熊本城</span></div>
  </a>
 
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <div class="item "><a href="/castle/75/"><img src="/smw/images/b/b5/Matsue.jpg" alt="竹田城" /></a><span id="caption">竹田城</span></div>
     <span class="glyphicon glyphicon-chevron-right"></span>
 
    <span class="sr-only">Next</span>
     <div class="item "><a href="/castle/18/"><img src="/smw/images/2/28/Himeji.jpg" alt="江戸城" /></a><span id="caption">江戸城</span></div>
  </a>
 
    <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>
 
    </div>
    <!-- Carousel nav -->
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
     <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
    </div>


<script>
</div>
$(function() {
    $('.carousel').carousel({
    interval: 6000
    })
});
</script>
<p style="margin-bottom: 0px"><a href="/timeline"><i class="fa fa-users"></i> みんなの攻城記録をチェックする</a></p>
</div><!-- /#ranking-carousel -->

Latest revision as of 08:46, 14 January 2018