自分で組み立てるテンプレート

slide5-parts（slick代替用）

css + jQueryの横からスライドインするタイプのスライドショー。画像を直接htmlに配置。
１枚目の画像のアスペクト比が反映されます。

html

/*横スライドインタイプのスライドショー（１枚目の画像のアスペクト比が反映されるタイプ）
---------------------------------------------------------------------------*/
/*3枚の画像を囲むブロック*/
.slide5-parts {
	position: relative;
	overflow: hidden;
}

/*３枚の画像の共通設定*/
.slide5-parts .slide-parts {
	position: absolute;right: 0px;top: 0px;
	width: 100%;
	height: 100%;
	transform: translateX(100%);	/*初期状態で画面の右外側に配置*/
	transition: transform 0.7s ease;	/*スライドのアニメーション。0.7sはスライドにかける時間（0.7秒）。0.7を変更する場合、main.jsのスライドショー用のコードの最後の「700」も変更する。*/
}

/*アクティブ時*/
.slide5-parts .slide-parts.active {
	transform: translateX(0);	/*画面内に表示*/
}

/*左に移動*/
.slide5-parts .slide-parts.left {
	transform: translateX(-100%);	/*画面の左外側に移動*/
}

/*非表示*/
.slide5-parts .slide-parts.hidden {
	opacity: 0;
}

/*初期表示用*/
.slide5-parts .slide-parts.initial {
	transform: translateX(0);
	transition: none;
}

/*１枚目画像（変更不要）*/
.slide5-parts .img1-parts {
	position: relative;width: 100%;height: auto;
}

/*画像のクリップ*/
.slide5-parts .slide-parts img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/*現在表示されているスライドのみをクリック可能にする設定（変更不要）
---------------------------------------------------------------------------*/
.slide5-parts .slide-parts {
	pointer-events: none; /* デフォルトでクリックを無効にする */
}

.slide5-parts .slide-parts.active {
	pointer-events: auto; /* 表示中のスライドのみクリックを有効にする */
}

/*現在表示中のボタン
---------------------------------------------------------------------------*/
/*全体*/
.slide5-parts .slide-indicators-parts {
    text-align: center;
	position: absolute;
	width: 100%;
	bottom: 10px;	/*ボタンの配置場所。スライドショーの画面下からの距離。*/
	left: 0px;
}

/*ボタン１個あたり*/
.slide5-parts .indicator {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: #ccc;	/*未アクティブ時のボタン色*/
	border: 4px solid #fff;	/*枠線の幅、線種、色。*/
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
}

/*アクティブ時のボタン色*/
.slide5-parts .indicator.active {
    background: #000;
}

css

//===============================================================
// 横スライドインタイプのスライドショー
//===============================================================
$(function() {
    $('.slide5-parts').each(function() {
        var $this = $(this);
        var slides = $this.find('.slide-parts');
        var slideCount = slides.length;
        var currentIndex = 0;
        var isAnimating = false;

// インジケータを表示する要素を取得
        var indicators = $this.find('.slide-indicators-parts');

// スライドの数に応じたインジケータを生成
        for (var i = 0; i < slideCount; i++) {
            indicators.append('<span class="indicator" data-index="' + i + '"></span>');
        }

// インジケータの初期状態を設定
        var indicatorElements = indicators.find('.indicator');
        indicatorElements.eq(currentIndex).addClass('active');

// 初期状態で全てのスライドに .hidden クラスを追加
        slides.addClass('hidden');

// 最初のスライドに .active と .initial クラスを追加し、.hidden クラスを削除
        slides.eq(currentIndex).addClass('active initial').removeClass('hidden');

// 遅延後に .initial クラスを削除
        setTimeout(function() {
            slides.eq(currentIndex).removeClass('initial');
        }, 50);

// インジケータをクリックしたときの動作を設定
        indicatorElements.on('click', function() {
            var clickedIndex = $(this).data('index');

// アニメーション中は操作を受け付けない
            if (isAnimating) return;

// 現在のスライドと同じ場合は何もしない
            if (clickedIndex === currentIndex) return;

// スライドの切り替え
            changeSlide(clickedIndex);
        });

// 自動スライドのタイマー
        setInterval(function() {
            var nextIndex = (currentIndex + 1) % slideCount;
            changeSlide(nextIndex);
        }, 4000); // 4秒ごとにスライドを切り替える

function changeSlide(nextIndex) {
            isAnimating = true;

// 現在のスライドを左に移動
            slides.eq(currentIndex).removeClass('active').addClass('left');

// 次のスライドを表示
            slides.eq(nextIndex).addClass('active').removeClass('hidden');

// インジケータの更新
            indicatorElements.eq(currentIndex).removeClass('active');
            indicatorElements.eq(nextIndex).addClass('active');

// アニメーション終了後の処理
            setTimeout(function() {
                // 左に移動したスライドに .hidden クラスを追加
                slides.eq(currentIndex).removeClass('left').addClass('hidden');

currentIndex = nextIndex;
                isAnimating = false;
            }, 700); // cssの「.slide5-parts .slide-parts」の行の時間と合わせる
        }
    });
});

js

slide4-parts（slick代替用）

css + jQueryの横からスライドインするタイプのスライドショー。画像を直接htmlに配置。
アスペクト比固定（16:9）ですが変更できます。

html

/*横スライドインタイプのスライドショー（アスペクト比固定タイプ）
---------------------------------------------------------------------------*/
/*3枚の画像を囲むブロック*/
.slide4-parts {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 0;
	padding-top: 56.25%;	/*アスペクト比*/
}

/*３枚の画像の共通設定*/
.slide4-parts .slide-parts {
	position: absolute;right: 0px;top: 0px;
	width: 100%;
	height: 100%;
	transform: translateX(100%);	/*初期状態で画面の右外側に配置*/
	transition: transform 0.7s ease;	/*スライドのアニメーション。0.7sはスライドにかける時間（0.7秒）。0.7を変更する場合、main.jsのスライドショー用のコードの最後の「700」も変更する。*/
}

/*アクティブ時*/
.slide4-parts .slide-parts.active {
	transform: translateX(0);	/*画面内に表示*/
}

/*左に移動*/
.slide4-parts .slide-parts.left {
	transform: translateX(-100%);	/*画面の左外側に移動*/
}

/*非表示*/
.slide4-parts .slide-parts.hidden {
	opacity: 0;
}

/*初期表示用*/
.slide4-parts .slide-parts.initial {
	transform: translateX(0);
	transition: none;
}

/*画像のクリップ*/
.slide4-parts .slide-parts img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/*現在表示されているスライドのみをクリック可能にする設定（変更不要）
---------------------------------------------------------------------------*/
.slide4-parts .slide-parts {
	pointer-events: none; /* デフォルトでクリックを無効にする */
}

.slide4-parts .slide-parts.active {
	pointer-events: auto; /* 表示中のスライドのみクリックを有効にする */
}

/*現在表示中のボタン
---------------------------------------------------------------------------*/
/*全体*/
.slide4-parts .slide-indicators-parts {
    text-align: center;
	position: absolute;
	width: 100%;
	bottom: 10px;	/*ボタンの配置場所。スライドショーの画面下からの距離。*/
	left: 0px;
}

/*ボタン１個あたり*/
.slide4-parts .indicator {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: #ccc;	/*未アクティブ時のボタン色*/
	border: 4px solid #fff;	/*枠線の幅、線種、色。*/
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
}

/*アクティブ時のボタン色*/
.slide4-parts .indicator.active {
    background: #000;
}

css

//===============================================================
// 横スライドインタイプのスライドショー
//===============================================================
$(function() {
    $('.slide4-parts').each(function() {
        var $this = $(this);
        var slides = $this.find('.slide-parts');
        var slideCount = slides.length;
        var currentIndex = 0;
        var isAnimating = false;