Story Image

HTML

基本的なHTML構造
以下のHTMLが基本的な構造となっており、異なる構造にした場合正しく動作しません。
[data-story-image-delay="変化の間隔"]

                <div class="storyImage" data-story-image data-story-image-delay="3000">
                    <img src="画像ファイルのパス">
                    <img src="画像ファイルのパス">
                    <img src="画像ファイルのパス">
                </div>

CSS

[data-story-image]にスタイルを指定しているので変更する場合は、この部分に新たなクラスを付与するなどして上書きしてください。
[data-story-image]にposition:relative, [data-story-image] imgにposition:absolute;を使用しています。
ご注意ください。
下記がダウンロードに含まれているCSSの内容です。

                [data-story-image] {
                    position: relative;
                    width: 300px;
                    height: 300px;
                }
                
                [data-story-image] img {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                }

Javascript

基本的にダウンロードしたJavascriptファイルを読み込むだけで実装できるかと思います。