Widget:Carousel: Difference between revisions

Revision as of 20:59, 24 July 2017

いま注目のお城

<a href="/castle/1/"><img src="/smw/images/2/28/Himeji.jpg" alt="姫路城" /></a>姫路城

<a href="/castle/17/"><img src="/smw/images/c/c9/Akashi.jpg" alt="熊本城" /></a>熊本城

<a href="/castle/75/"><img src="/smw/images/b/b5/Matsue.jpg" alt="竹田城" /></a>竹田城

<a href="/castle/18/"><img src="/smw/images/2/28/Himeji.jpg" alt="江戸城" /></a>江戸城

<a href="/castle/1/"><img src="/smw/images/2/28/Himeji.jpg" alt="姫路城" /></a>姫路城

<a href="/castle/17/"><img src="/smw/images/c/c9/Akashi.jpg" alt="熊本城" /></a>熊本城

<a href="/castle/75/"><img src="/smw/images/b/b5/Matsue.jpg" alt="竹田城" /></a>竹田城

<a href="/castle/18/"><img src="/smw/images/2/28/Himeji.jpg" alt="江戸城" /></a>江戸城

<a href="/castle/17/"><img src="/smw/images/c/c9/Akashi.jpg" alt="熊本城" /></a>熊本城

<a href="/castle/75/"><img src="/smw/images/b/b5/Matsue.jpg" alt="竹田城" /></a>竹田城

   <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
   <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>

   $('.carousel').carousel({
   interval: 6000
   })

}); </script>

<a href="/timeline"> みんなの攻城記録をチェックする</a>

@@ Line 1: / Line 1: @@
-<div class="container">
+<h2>いま注目のお城</h2>
-<div id="myCarousel" class="carousel slide" data-ride="carousel"><ol class="carousel-indicators"><li data-target="#myCarousel" data-slide-to="0" class=""></li><li data-target="#myCarousel" data-slide-to="1" class=""></li><li data-target="#myCarousel" data-slide-to="2" class="active"></li></ol><div class="carousel-inner" role="listbox"><div class="carousel-item"><img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide"><div class="container"><div class="carousel-caption d-none d-md-block text-left"><h1>Example headline.</h1><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p><p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p></div></div></div><div class="carousel-item"><img class="second-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide"><div class="container"><div class="carousel-caption d-none d-md-block"><h1>Another example headline.</h1><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p><p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p></div></div></div><div class="carousel-item active"><img class="third-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide"><div class="container"><div class="carousel-caption d-none d-md-block text-right"><h1>One more for good measure.</h1><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p><p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p></div></div></div></div><a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="sr-only">Next</span></a></div>
+<div id="ranking-carousel" class="pull-center">
-</div>
+	<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="1"></li>
+    <li data-target="#myCarousel" data-slide-to="2"></li>
+    <li data-target="#myCarousel" data-slide-to="3"></li>
+    <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>
+    <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 class="item "><a href="/castle/18/"><img src="/smw/images/2/28/Himeji.jpg" alt="江戸城" /></a><span id="caption">江戸城</span></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 "><a href="/castle/75/"><img src="/smw/images/b/b5/Matsue.jpg" alt="竹田城" /></a><span id="caption">竹田城</span></div>
+    <div class="item "><a href="/castle/18/"><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 "><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>
+$(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 -->