Widget:Carousel: Difference between revisions

From Jcastle.info
No edit summary
No edit summary
Line 1: Line 1:
<h2>いま注目のお城</h2>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div id="ranking-carousel" class="pull-center">
      <ol class="carousel-indicators">
<div id="myCarousel" class="carousel slide">
        <li data-target="#myCarousel" data-slide-to="0" class=""></li>
<ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="1" class=""></li>
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="2" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
      </ol>
<li data-target="#myCarousel" data-slide-to="2"></li>
      <div class="carousel-inner" role="listbox">
<li data-target="#myCarousel" data-slide-to="3"></li>
        <div class="carousel-item">
<li data-target="#myCarousel" data-slide-to="4"></li>
          <img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">
<li data-target="#myCarousel" data-slide-to="5"></li>
          <div class="container">
<li data-target="#myCarousel" data-slide-to="6"></li>
            <div class="carousel-caption d-none d-md-block text-left">
<li data-target="#myCarousel" data-slide-to="7"></li>
              <h1>Example headline.</h1>
<li data-target="#myCarousel" data-slide-to="8"></li>
              <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>
<li data-target="#myCarousel" data-slide-to="9"></li>
              <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
</ol>
            </div>
<!-- Carousel items -->
          </div>
<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="carousel-item">
<div class="item "><a href="/castle/17/"><img src="/smw/images/c/c9/Akashi.jpg" alt="熊本城" /></a><span id="caption">熊本城</span></div>
          <img class="second-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide">
<div class="item "><a href="/castle/75/"><img src="/smw/images/b/b5/Matsue.jpg" alt="竹田城" /></a><span id="caption">竹田城</span></div>
          <div class="container">
<div class="item "><a href="/castle/18/"><img src="/smw/images/2/28/Himeji.jpg" alt="江戸城" /></a><span id="caption">江戸城</span></div>
            <div class="carousel-caption d-none d-md-block">
<div class="item active"><a href="/castle/1/"><img src="/smw/images/2/28/Himeji.jpg" alt="姫路城" /></a><span id="caption">姫路城</span></div>
              <h1>Another example headline.</h1>
<div class="item "><a href="/castle/17/"><img src="/smw/images/c/c9/Akashi.jpg" alt="熊本城" /></a><span id="caption">熊本城</span></div>
              <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>
<div class="item "><a href="/castle/75/"><img src="/smw/images/b/b5/Matsue.jpg" alt="竹田城" /></a><span id="caption">竹田城</span></div>
              <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
<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 "><a href="/castle/17/"><img src="/smw/images/c/c9/Akashi.jpg" alt="熊本城" /></a><span id="caption">熊本城</span></div>
          </div>
<div class="item "><a href="/castle/75/"><img src="/smw/images/b/b5/Matsue.jpg" alt="竹田城" /></a><span id="caption">竹田城</span></div>
        </div>
</div>
        <div class="carousel-item active">
<!-- Carousel nav -->
          <img class="third-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide">
<a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
          <div class="container">
<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
            <div class="carousel-caption d-none d-md-block text-right">
</div>
              <h1>One more for good measure.</h1>
<script>
              <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>
$(function() {
              <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
$('.carousel').carousel({
            </div>
interval: 6000
          </div>
})
        </div>
});
      </div>
</script>
      <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
</div>
        <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>

Revision as of 12:30, 24 July 2017

Retrieved from "http://jcastle.info/smw139/index.php?title=Widget:Carousel&oldid=15776"
Monitored by WikiApiary
Powered by Semantic MediaWiki