jQuery Destaque Plugin

キーボードの矢印(←→)またはスライド上のコントローラーでめくることができます。

JS
$(function () {
    var destaque = $("#slide-container").destaque({
        slideMovement: 1000,
        slideSpeed: 1000,
        elementSpeed: 1100,
        autoSlideDelay: 10000,
        itemSelector: ".item",
        itemBackgroundSelector: ".background",
        itemForegroundElementSelector: ".foreground .element",
        controlsSelector: ".pager-demo",
        onPageUpdate: function(destaque, pageData) {
            setTimeout(function(){
                $(".pagination-demo .bullet").removeClass("active");
                $(".pagination-demo .bullet[rel='"+ pageData.currentSlide +"']")
                    .addClass("active");
            },700);
        }
    }); 
    $(".pagination .bullet").click(function(e) {
        e.preventDefault();
        destaque.goTo(parseInt($(this).attr("rel"), 10));
    });
});
オプション等の説明はこちら。
https://github.com/globocom/destaque


HTML
<section id="hero">
  <div id="slide-container" class="behavior">
    <div class="item first">
      <a href="#">
        <div class="background"></div>
        <div class="foreground">
          <h2 class="element title">タイトル1</h2>
          <p class="element subtitle">
            テキストテキスト<br />
            テキスト<br />
          </p>
        </div>
      </a>
    </div>
    <div class="item second">
      <a href="#">
        <div class="background"></div>
        <div class="foreground">
          <h2 class="element title">タイトル2</h2>
          <p class="element subtitle">
            テキストテキスト<br />
            テキスト<br />
          </p>
        </div>
      </a>
    </div>
    <div class="item third">
      <a href="#">
        <div class="background"></div>
        <div class="foreground">
          <h2 class="element title">タイトル3</h2>
          <p class="element subtitle">
            テキストテキスト<br />
            テキスト<br />
          </p>
        </div>
      </a>
    </div>
    <div class="item fourth">
      <a href="#">
        <div class="background"></div>
        <div class="foreground">
          <h2 class="element title">タイトル4</h2>
          <p class="element subtitle">
            テキストテキスト<br />
            テキスト<br />
          </p>
        </div>
      </a>
    </div>
    <div class="controller">
      <a href="#"><img src="/uploads/2014/04/arrow-prev.png" class="pager-demo prev"  rel="prev"></a>
      <a href="#"><img src="/uploads/2014/04/arrow-next.png" class="pager-demo next" rel="next"></a>
    </div>
  </div>
</section>
<div class="clearfix">
  <ul class="pagination-demo">
    <li><a href="#" class="bullet active" rel="0"></a></li>
    <li><a href="#" class="bullet" rel="1"></a></li>
    <li><a href="#" class="bullet" rel="2"></a></li>
    <li><a href="#" class="bullet" rel="3"></a></li>
  </ul>
</div>


CSS
#hero,
#slide-container,
#slide-container .item,
#slide-container .item a,
#slide-container .background{ width:100%; height: 500px; }
#hero{ position:relative; }
#slide-container{ position:relative; overflow:hidden; background-color:#eee; }
#slide-container .item{ position:absolute; top:0; left:0; display:none;  }
#slide-container .item a{ display:block; width:100%; height:500px; }
#slide-container .item a:hover{ text-decoration:none; }
#slide-container .background { position:absolute; background-position:center center; background-repeat:no-repeat; overflow:hidden; }
#slide-container .foreground{ width:100%; height:500px; position:absolute; text-align:center; text-shadow:0 1px 0 rgba(0,0,0,0.3); }
#slide-container .foreground .element { position: relative; }
#slide-container .title{ margin:170px auto 0; font-size:50px; font-weight:bold; color:#fff; }
#slide-container .subtitle{ margin:0 auto; font-size:20px; color:#fff; }
#slide-container .first .background{ background-image:url(/uploads/2014/04/demo_destaque_0001.jpg); }
#slide-container .second .background{ background-image:url(/uploads/2014/04/demo_destaque_0002.jpg); }
#slide-container .third .background{ background-image:url(/uploads/2014/04/demo_destaque_0003.jpg); }
#slide-container .fourth .background{ background-image:url(/uploads/2014/04/demo_destaque_0004.jpg); }
/* controller */
.controller .pager-demo{ position:absolute; top:230px; }
.controller .prev{ left:30px; }
.controller .next{ right:30px; }
/* pagination */
.pagination-demo{ position:relative; left:50%; float:left; margin-top:40px; }
.pagination-demo li { float:left; position: relative; right:50%; margin:0 1px; list-style:none; }
.pagination-demo li .bullet { display:block; width:12px; height:0 !important; padding-top:12px; background-image:url(/uploads/2014/04/pagination.png); background-position:0 0; float:left; overflow:hidden; }
.pagination-demo li .active { background-position:0 -12px; }