アニメーティブスライドショー - Refine Slide

jQuery

「Refine Slide」は、14種類ものアニメーションを選択して簡単に実装することができる、レスポンシブ対応のjQueryライブラリです。 

ランダムを選択すると、多種多様な動きにしばらく見入ってしまいます。特に「3D Cube horizontal」と「3D Cube vertical」のダイナミックな動きは感動です。画像がキューブのように回転して切り替わっていきます。

ここで使用した「Refine Slide」は、以下のサイトからダウンロードしました。

 

www.jqueryscript.net

 

14種類のアニメーション

  • Fade
  • Random
  • Slice horizontal
  • Slice vertical
  • Slide horizontal
  • Slide vertical
  • Scale
  • Fan
  • Block scale
  • Kaleidoscope
  • Blind horizontal
  • Blind Vertical
  • 3D Cube horizontal
  • 3D Cube vertical

 

「Refine Slide」を実行してみる

 

 3D  Cube vertical

f:id:develog:20161213175418p:plain

 

 

3D Cube horizontal

f:id:develog:20161213175433p:plain

　　画像の左右両端に空白があるので、画像が離れています。

 

 

Slice vertical

f:id:develog:20161213175645p:plain

 

 

Slice horizontal

f:id:develog:20161213175627p:plain

 

 

Slide horizontal

f:id:develog:20161213175721p:plain

 

 

Slide Vertical

f:id:develog:20161213175726p:plain

 

 

Scale

f:id:develog:20161213175759p:plain

 

 

Kakeidoscope

f:id:develog:20161213181735p:plain

 

 

Fan

f:id:develog:20161213181750p:plain

 

 

Blind Horizontal

f:id:develog:20161213181444p:plain

 

 

Blind vertical

f:id:develog:20161213180311p:plain

 

 

Block scale

f:id:develog:20161213183431p:plain

 

 

Fade

f:id:develog:20161213183520p:plain

 

 

ソース

====================

index.html

====================

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Refine Slide</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/refineslide.css">
<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/jquery.refineslide.js"></script>
</head>

<body>
<div class="panel slider">
<ul class="rs-slider">
<li><img src="img/slide1.png" alt="" /></li>
<li><img src="img/slide2.png" alt="" /></li>
<li><img src="img/slide3.png" alt="" /></li>
<li><img src="img/slide4.png" alt="" /></li>
</ul>
<!-- / .panel slider --></div>

<script>
  $(document).ready(function () {
    $('.rs-slider').refineSlide({
      thumbMargin : 0.5, // Int (default 3): Percentage width of thumb margin
      transition: 'cubeV', // String (default 'cubeV'): Transition type ('custom', random', 'cubeH', 'cubeV', 'fade', 'sliceH', 'sliceV', 'slideH', 'slideV', 'scale', 'blockScale', 'kaleidoscope', 'fan', 'blindH', 'blindV')
      autoPlay: true, // Int (default false): Auto-cycle slider
      keyNav: true, // Bool (default true): Use left/right arrow keys to switch slide
      delay: 2000, // Int (default 5000) Time between slides in ms
      transitionDuration : 2000, // Int (default 800): Transition length in ms
      useThumbs: true // Bool (default true): Navigation type thumbnails
    });
  });
</script>
</body>
</html>

 

====================

style.css

====================

@charset "utf-8";
/* CSS Document */
html,body,ul,li {
  margin: 0;
  padding: 0;
}
html {
  margin: 50px;
}
.panel {
  width: 100%;
}