簡単設置の画像が分割回転移動フェードアウトするカルーセル

Javascriptで画像をバラバラに回転移動フェードアウトしながら順次画像を表示するアニメーション～ mamImgSplitCarousel.js

mamimgsplit_carousel.js(7KB)ダウンロード

■使い方

上記ボタンを押してmamimgsplit_carousel.jsをダウンロードします。
mamImageSplitCarouselを使いたいファイルで、
```
  <script src="./js/mamimgsplit_carousel.js"></script>
```
のように、相対又は絶対パスでmamimgsplit_carousel.jsを指定します。
クラス名に"mam-image-split-carousel"を指定したdivタグを設置します。
data-split属性に縦又は横方向の最大分割数設定します。
このdivタグの子要素にクラス名"mam-image-split-carousel-child"のdivラグを設置し、その子要素にaタグを設置し、その子要素にimgタグを設置します。
```
  <div class="mam-image-split-carousel" data-split="20" >
    <div class="mam-image-split-carousel-child">
      <a href="リンクする場合はURL1"><img src="画像URL1"></a>
    </div>
    <div class="mam-image-split-carousel-child">
      <a href="リンクする場合はURL2"><img src="画像URL2"></a>
    </div>
  </div>
```

■使用例

<div style="display:flex;">
  <div style="width:20%;"></div>
  <div class="mam-image-split-carousel" style="max-width:800px;width:80%;" data-split="20">
    <div class="mam-image-split-carousel-child">
      <a href=""><img src="./imgs/car1.jpg" style="width:100%;"></a>
    </div>
    <div class="mam-image-split-carousel-child">
      <a href=""><img src="./imgs/car2.jpg" style="width:100%;"></a>
    </div>
    <div class="mam-image-split-carousel-child">
      <a href=""><img src="./imgs/car3.jpg" style="width:100%;"></a>
    </div>
  </div>
  <div style="width:20%;"></div>
</div>