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

【お知らせ】こちらのパーツコーナーは旧ページです。
2026年2月末よりパーツコーナーリニューアルしております。使い方は基本的には同じですが、コードの見直しが行われ、選べるフレームやパーツが増えました。

スライドショーパーツ

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

slide7

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

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

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

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

<div class="slide-parts img3-parts">
<div class="text-parts right-parts">
<div class="text-bg">
<h2>3枚目のテキスト情報</h2>
<p>詳しい説明文が必要ならここに入力します。サンプルテキスト。</p>
</div>
</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;	/*ボックスの下に空けるスペース*/
	line-height: 1.5;		/*行間を少し狭く*/
}

/*スライド１枚あたり*/
.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;	/*画像の中心を基準に*/
}

/*スライドショー上のテキスト
---------------------------------------------------------------------------*/
/*テキストブロックの基本設定（中央配置がデフォルト）*/
.slide7-parts .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;
	margin: 0 3rem;
	z-index: 10;
}

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

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

/*テキストブロックをインラインにする為のブロック*/
.slide7-parts .slide-parts .text-parts .text-bg {
	display: inline-block;
	padding: 1rem 2rem;	/*上下に1文字分、左右に2文字分の余白をとる*/
	background: rgba(0,0,0,0.3);	/*背景色。0,0,0は黒の事で0.3は色が30%出た状態。*/
	color: #fff;					/*文字色*/
	border-radius: 5px;				/*角を少し丸くする*/
	text-shadow: 1px 1px rgba(0,0,0,0.5);	/*テキストの影。右へ、下へ。rgbaは影の色。*/
}

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

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

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

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

/*p（説明テキスト部分）*/
.slide7-parts .slide-parts .text-parts p {
	font-size: 0.9rem;	/*文字サイズ90%*/
}

/*現在表示されているスライドのみをクリック可能にする設定（変更不要）
---------------------------------------------------------------------------*/
.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 $root = $(this);
    var slides = $root.find('.slide-parts');
    var slideCount = slides.length;
    var currentIndex = 0;

var INTERVAL = 5000;     // 自動切替の間隔（ms）
    var FADE_MS   = 1000;    // CSSの transition: opacity 1s に合わせる
    var autoTimer = null;
    var isAnimating = false;

// インジケータ作成
    var $indicators = $root.find('.slide-indicators').empty();
    for (var i = 0; i < slideCount; i++) {
      $indicators.append('<span class="indicator" data-index="' + i + '"></span>');
    }
    var $dots = $indicators.find('.indicator');

// 初期表示
    slides.css('opacity', 0).removeClass('active');
    slides.eq(0).css('opacity', 1).addClass('active');
    $dots.removeClass('active').eq(0).addClass('active');

function setActive(nextIndex) {
      if (nextIndex === currentIndex) return;
      isAnimating = true;

slides.eq(currentIndex).css('opacity', 0).removeClass('active');
      slides.eq(nextIndex).css('opacity', 1).addClass('active');

$dots.eq(currentIndex).removeClass('active');
      $dots.eq(nextIndex).addClass('active');

currentIndex = nextIndex;

// フェード中の連打対策（CSSの1秒に合わせて解除）
      setTimeout(function(){ isAnimating = false; }, FADE_MS);
    }

function next() {
      var n = (currentIndex + 1) % slideCount;
      setActive(n);
      restartTimer(); // 次回の発火を今からINTERVAL後に張り直し
    }

function restartTimer() {
      clearTimeout(autoTimer);
      autoTimer = setTimeout(next, INTERVAL);
    }

// クリックで移動 → タイマーをリセット
    $dots.on('click', function() {
      var to = $(this).data('index');
      if (isAnimating) return;          // フェード中は無視
      if (to === currentIndex) {        // 同じスライドならタイマーだけリセット
        return restartTimer();
      }
      setActive(to);
      restartTimer();                   // クリック時に経過時間をクリア
    });

// 自動再生開始
    restartTimer();
  });
});

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

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

slide5

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

// インジケータの初期状態を設定
        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」の行の時間と合わせる
        }
    });
});

slide4

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;

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

// インジケータの初期状態を設定
        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);
        });

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

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

slide3

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

html

/*スライドショー
---------------------------------------------------------------------------*/
.slide3-parts {
	width: 100%;position: relative;
	margin-bottom: 50px;	/*ボックスの下に空けるスペース*/
}

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

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

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

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

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

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

css

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