【jQuery】jQueryとanimation.cssを使用した背景画像カルーセルCROSSCOVER

crosscover

CROSSCOVERはjQueryとanimation.cssを使用した簡単な背景画像のカルーセル。
デモに掲載されているアニメーションはFADE9、ZOOM4、ROTATE5、FLIP2、LIGHTSPEED1。

CROSSCOVERインストール

jQuery・CSS

<!-- animate.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.3.0/animate.min.css">
<!-- crosscover.css -->
<link rel="stylesheet" href="./dist/css/crosscover.min.css">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<!-- crosscover.js -->
<script src="./dist/js/crosscover.min.js"></script>

HTML マークアップ

<div class="crosscover">
<div class="crosscover-overlay">
<div class="crosscover-island">
<h1 class="crosscover-title">...</h1>
<h2 class="crosscover-description">...</h2>
</div>
</div>
<ul class="crosscover-list">
<li><img src="./images/01.jpg" alt="image01"/></li>
<li><img src="./images/02.jpg" alt="image02"/></li>
<li><img src="./images/03.jpg" alt="image03"/></li>
<li><img src="./images/04.jpg" alt="image04"/></li>
<li><img src="./images/05.jpg" alt="image05"/></li>
</ul>
</div>

オプション

$(".crosscover").crosscover({
animateInClass:'fade-in',
animateOutClass:'fade-out',
interval : 5000,
startIndex : 0,
autoPlay : true,
controller : true,
controllerClass  : 'crosscover-controller',
prevClass : 'crosscover-prev',
nextClass : 'crosscover-next',
playerClass : 'crosscover-player',
playerActiveClass : 'is-playing',
playerInnerHtml : '<span class="crosscover-icon-player"></span>',
prevInnerHtml : '<span class="crosscover-icon-prev"></span>',
nextInnerHtml : '<span class="crosscover-icon-next"></span>'
});
 

【jQuery】jQueryとanimation.cssを使用した背景画像カルーセルCROSSCOVER

  • LATEST
  • RELATED
  • POPULAR