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

slide6-parts

css + jQueryのスライドショー。画像を直接htmlに配置。
slide3のアスペクト比固定（16:9）タイプかつSVG枠つき。

<ul class="disc">
<li>slide3-partsのアスペクト比固定タイプになります。</li>
<li>アスペクト比は16:9です。変更したい場合はcssの説明を読んで調整して下さい。</li>
<li>スライド速度はjsの最後にある「}, 4000); // 4秒ごとにスライドを切り替える」の「4000」の数字で調整できます。</li>
<li>フェード（切り替わる際）のスピードはcssで調整できます。cssのコメントを読んで下さい。</li>
<li>スライドショー下のボタン色や大きさはcssで調整できます。</li>
<li>デモは３枚スライドですが、４枚目の画像を追加したい場合は３枚目のブロック(３行)をコピペし、「img3-parts」を「img4-parts」に書き換えて任意の画像に入れ替えればOKです。</li>
<li>リンクが不要ならa要素を入れなければOK。</li>
<li>SVG画像を扱える場合は枠のデザインの変更ができます。<a href="https://template-party.com/tips/tp_lp1_manual.html">詳しくはこちら。</a></li>
</ul>

<div class="slide-indicators-parts"></div>

</div>

</div>

html

/*スライドショー
ここでは、16:9の画像比率（9÷16=0.5625）を読み込む指定を行なっています。
異なる画像比率にしたい場合、.slide6-partsのpadding-topの数字を変更します。
---------------------------------------------------------------------------*/
/*スライドショーボックス*/
#svg-box-parts {
	flex-shrink: 0;
	position: relative;
	overflow: hidden;
}

/*3枚の画像を囲むブロック*/
.slide6-parts {
	width: 100%;
	height: 0;
	padding-top: 56.25%;	/*アスペクト比*/
	position: relative;
	clip-path: url(#myClip1);	/*SVG画像との紐付け*/
}

/*３枚の画像の共通設定*/
.slide6-parts .slide-parts {
	position: absolute;right: 0px;top: 0px;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 1s;	/*ここの1s（＝1秒）を変更すると、フェードのスピードを変更できます。１枚が表示される時間はjsで指定できます。*/
}

/*以下は変更不要*/
.slide6-parts .slide-parts img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

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

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

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

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

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

css

//===============================================================
// スライドショー
//===============================================================
$(function() {
    $('.slide6-parts').each(function() {
        var $this = $(this);
        var slides = $this.find('.slide-parts');
        var slideCount = slides.length;
        var currentIndex = 0;

// インジケータを表示する要素を取得
        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');

// スライドの初期状態を設定
        slides.eq(currentIndex).css('opacity', 1).addClass('active');

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

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

// スライドの切り替え
            slides.eq(currentIndex).css('opacity', 0).removeClass('active');
            slides.eq(clickedIndex).css('opacity', 1).addClass('active');

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

// 現在のスライドを更新
            currentIndex = clickedIndex;
        });

// 自動スライドのタイマー
        setInterval(function() {
            var nextIndex = (currentIndex + 1) % slideCount;

// スライドの切り替え
            slides.eq(currentIndex).css('opacity', 0).removeClass('active');
            slides.eq(nextIndex).css('opacity', 1).addClass('active');

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

currentIndex = nextIndex;
        }, 4000); // 4秒ごとにスライドを切り替える
    });
});

js

slide5-parts

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

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;