自分で組み立てるテンプレート｜スライドショーパーツ

スライドショーパーツ

スライドショー周りの余白をなくしたい場合はこちらをお読み下さい。

slide7

css + jQueryのスライドショー。画像を直接htmlに配置。テキストも重ねる事ができます。
１枚目の画像のアスペクト比が反映されます。

<h2>slide7</h2>
<ul>
<li>スライド速度はjsの最後にある「}, 5000); // 5秒ごとにスライドを切り替える」の「5000」の数字で調整できます。</li>
<li>フェード（切り替わる際）のスピードやテキストスタイルはcssで調整できます。cssのコメントを読んで下さい。</li>
<li>スライドショー下のボタン色や大きさはcssで調整できます。</li>
<li>デモは３枚スライドですが、４枚目の画像を追加したい場合は３枚目のブロック(7行)をコピペし、「img3-parts」を「img4-parts」に書き換えて任意の画像に入れ替えればOKです。</li>
<li>外側の余白をなくしたい場合は<a href="https://template-party.com/parts/manual.html">こちらのマニュアル</a>をご覧下さい。</li>
</ul>

<div class="slide-parts img1-parts">
<div class="text-parts">
<h2>1枚目のテキスト情報</h2>
<p>詳しい説明文が必要ならここに入力します。サンプルテキスト。詳しい説明文が必要ならここに入力します。サンプルテキスト。</p>
</div>
<img src="images/1.jpg" alt="">
</div>

<div class="slide-parts img2-parts">
<div class="text-parts left-parts">
<h2>2枚目のテキスト情報</h2>
<p>left-partsを追加すると、このようにテキストが左に配置されます。</p>
</div>
<img src="images/2.jpg" alt="">
</div>

<div class="slide-parts img3-parts">
<div class="text-parts right-parts">
<h2>3枚目のテキスト情報</h2>
<p>right-partsを追加すると、このようにテキストが右に配置されます。</p>
</div>
<img src="images/3.jpg" alt="">
</div>

</div>

</section>

html

/*スライドショー
---------------------------------------------------------------------------*/
.slide-parts * {margin: 0;padding: 0;}

/*スライドショー全体を囲むブロック*/
.slide7-parts {
	width: 100%;position: relative;
	margin-bottom: 50px;	/*ボックスの下に空けるスペース*/
}

/*スライド１枚あたり*/
.slide7-parts .slide-parts {
	position: relative;
}

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

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

/*画像全般（変更不要）*/
.slide7-parts .slide-parts img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像をコンテナのサイズに合わせてクリップ */
    object-position: center; /* 画像の中心を基準に調整 */
}

/*スライドショー上のテキスト
---------------------------------------------------------------------------*/
/*テキスト全体を囲むブロック*/
.slide-parts .text-parts {
	position: absolute; /* 親要素に対して絶対配置 */
	top: 0;left: 0;right: 0;bottom: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	z-index: 10;
	margin: 0 3rem;	/*テキストブロックの外側に空けるスペース。上下は0、左右に3文字分。テキストを左右に配置する場合に特に関連します。*/
	color: #fff;	/*文字色*/
	text-shadow: 1px 1px rgba(0,0,0,0.5);	/*テキストの影。右へ、下へ、rgbaは影の色で0,0,0は黒、0.5は色が50%出た状態。*/
}

/*テキストブロックを左に配置させたい場合*/
.slide-parts .text-parts.left-parts {
	align-items: flex-start;
	text-align: left;
}

/*テキストブロックを右に配置させたい場合*/
.slide-parts .text-parts.right-parts {
	align-items: flex-end;
	text-align: right;
}

/*h2（大きな文字）*/
.slide-parts .text-parts h2 {
	font-size: 5vw;	/*文字サイズ。１文字あたり画面幅の約5%。*/
}

/*p（説明テキスト部分）*/
.slide-parts .text-parts p {
	max-width: 60%;		/*最大幅。60%*/
	font-size: 0.9rem;	/*文字サイズ90%*/
	padding: 0 0.5rem;
}

/*画面幅400px以下の追加指定*/
	@media screen and (max-width:400px) {

/*p（説明テキスト部分）*/
	.slide-parts .text-parts p {
		display: none;	/*画面が狭くなるので、説明文だけ非表示にする。*/
	}

}/*追加指定ここまで*/

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

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

/*現在表示中のボタン
---------------------------------------------------------------------------*/
/*全体*/
.slide7-parts .slide-indicators {
    text-align: center;
	position: absolute;
	width: 100%;
	bottom: -40px;	/*ボタンの配置場所。0以上の数値にすれば画像の上に重なります。*/
	left: 0px;
}
/*１個あたり*/
.slide7-parts .indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #ccc;	/*未アクティブ時のボタン色*/
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
}
.slide7-parts .indicator.active {
    background: #000;	/*アクティブ時のボタン色*/
}

css

//===============================================================
// スライドショー
//===============================================================
$(function() {
    $('.slide7-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'); // クラス名は変更なし

// スライドの数に応じたインジケータを生成
        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;
        }, 5000); // 5秒ごとにスライドを切り替える
    });
});

slide6

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

<h2>slide6</h2>
<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>
<li>外側の余白をなくしたい場合は<a href="https://template-party.com/parts/manual.html">こちらのマニュアル</a>をご覧下さい。</li>
</ul>

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

</div>

</div>

</section>

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');