カルーセルスライダーのサムネイルをクリックして、メインの動画を変更

Question

youtubeのカルーセルサムネイル付き、動画再生のようなことがしたい。

◼︎YouTube動画をサムネイルクリックで切り替える

◼︎Youtube IFrame Player APIを利用してサムネイル画像クリックで動画再生
↑のリンクのサムネイルがスライドカルーセルになっているようなことがしたいです。
どうすればいいのか、全くわからないので、ヒントだけでもいただけると幸いです。

▼完成イメージ

一応、自分でも色々考えて「slick」を用いて表現できないかと思ったのですが、
イメージしているものではなく、詰まってしまっている状態です。

問題点としては、以下のことが挙げられます。

・slickだと、メイン部分と連動しているので、サムネイル部分をスライドさせるとメインの部分もスライドしてしまう。
・また、スライドさせたあともメイン動画の部分が変わっても、動画が再生され続けてしまう。
（スライドしてメイン動画が変わったら、再生されていた動画は止まってほしい）

理想としては、
◼︎YouTube動画をサムネイルクリックで切り替える
◼︎Youtube IFrame Player APIを利用してサムネイル画像クリックで動画再生
上記2つのサムネイルがカルーセルになっているver.です。

お手数ですが、お力添え願えないでしょうか。
すいませんが、よろしくお願いいたします。

下記、コードは「slick」を用いて表現できないかと、模索したコードです。
参考にはならないかもですが、よろしくおねがいします。

<ul class="slider">
	<li id="wrap_movie01"></li>
	<li id="wrap_movie02"></li>
	<li id="wrap_movie03"></li>
	<li id="wrap_movie04"></li>
	<li id="wrap_movie05"></li>
	<li id="wrap_movie06"></li>
	<li id="wrap_movie07"></li>
	<li id="wrap_movie08"></li>
	<li id="wrap_movie09"></li>
</ul>
<ul class="slider-nav">
	<li><img src="http://img.youtube.com/vi/GcfINC1TZv0/mqdefault.jpg" /></li>
	<li><img src="http://img.youtube.com/vi/sQlu57kj_90/mqdefault.jpg" /></li>
	<li><img src="http://img.youtube.com/vi/LdFbjQjr_Sg/mqdefault.jpg" /></li>
	<li><img src="http://img.youtube.com/vi/r8GuIF9f_HM/mqdefault.jpg" /></li>
	<li><img src="http://img.youtube.com/vi/fWytAH6NteI/mqdefault.jpg" /></li>
	<li><img src="http://img.youtube.com/vi/impSuIygMiQ/mqdefault.jpg" /></li>
	<li><img src="http://img.youtube.com/vi/NyUTYwZe_l4/mqdefault.jpg" /></li>
	<li><img src="http://img.youtube.com/vi/j1hft9Wjq9U/mqdefault.jpg" /></li>
	<li><img src="http://img.youtube.com/vi/fWytAH6NteI/mqdefault.jpg" /></li>
</ul>

▼slick用のjs

<script>
$(function(){
 var mainSlider = ".slider"; //メインスライダーid
 var thumbnailSlider = ".slider-nav"; //サムネイルスライダーid
 
  $(mainSlider).slick({
    // autoplay: true,
    speed: 1000,
    arrows: false,
    asNavFor: thumbnailSlider
  });
  $(thumbnailSlider).slick({
    slidesToShow: 3,
    speed: 1000,    
    asNavFor: mainSlider
  });
  //#thumbnail_sliderでクリックしたスライドをカレントにする
  $(thumbnailSlider+" .slick-slide").on('click',function(){
    var index = $(this).attr("data-slick-index");
    $(thumbnailSlider).slick("slickGoTo",index,false);
  });
});
</script>

▼youtube APIなどの動画系の設定js

//IFrame Player API の読み込み
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// プレーヤーを配列宣言します
var ytPlayer = [];
// 各動画のIDと要素のIDを格納します。
var ytData = [
    {
        id: 'GcfINC1TZv0',
        div_id: 'wrap_movie01'
    }, {
        id: 'sQlu57kj_90',
        div_id: 'wrap_movie02'
    }, {
        id: 'LdFbjQjr_Sg',
        div_id: 'wrap_movie03'
    }, {
        id: 'r8GuIF9f_HM',
        div_id: 'wrap_movie04'
    }, {
        id: 'fWytAH6NteI',
        div_id: 'wrap_movie05'
    }, {
		id: 'impSuIygMiQ',
        div_id: 'wrap_movie06'
    }, {
		id: 'NyUTYwZe_l4',
        div_id: 'wrap_movie07'
	}, {
		id: 'j1hft9Wjq9U',
        div_id: 'wrap_movie08'
	}, {
		id: '9ZG9G3v1RPk',
        div_id: 'wrap_movie09'
	}
];
 
// 各プレーヤーの埋め込み
function onYouTubeIframeAPIReady() {
    for(var i = 0; i < ytData.length; i++) {
        ytPlayer[i] = new YT.Player(ytData[i]['div_id'], {
            videoId: ytData[i]['id'],
            playerVars: {
				rel: 0,
				showinfo: 0,
				// autoplay:1,
				controls:0,
				loop:1,
				playlist:ytData[i]['id'],//★loopする場合はplaylistを設定する必要がある
				playsinline: 1//←★スマホ対応
            },
            events: {
                'onReady': onPlayerReady
            }
        });
    }
}
 
// 各プレーヤー準備完了後の処理
function onPlayerReady(e) {
    for (var i = 0; i < ytData.length; i++) {
        if(e.target.getIframe().id == ytData[i]['div_id']) {
            console.log(ytData[i]['div_id'] + 'のプレーヤー準備完了しました。');
        }
    };
	// e.target.mute();//★autoplayする場合はミュートする必要がある
	e.target.playVideo();
}

Answer 1

slickの想定で組んでみました。
動画の再生部分はスライダーでなく、中の動画を切り替えるだけにしています。

<div id="player">
</div>

<ul class="slider-nav">
</ul>

<script>
$(function(){
	
	var $thumbnailSlider = $(".slider-nav"); //サムネイルスライダーid
	var ytPlayer;
	var ytData = [
		{id: 'GcfINC1TZv0'},
		{id: 'sQlu57kj_90'},
		{id: 'LdFbjQjr_Sg'},
		{id: 'r8GuIF9f_HM'},
		{id: 'fWytAH6NteI'},
		{id: 'impSuIygMiQ'},
		{id: 'NyUTYwZe_l4'},
		{id: 'j1hft9Wjq9U'},
		{id: '9ZG9G3v1RPk'},
	];

	//データからスライダーにサムネイルを追加
	ytData.forEach(function(data){
		$thumbnailSlider.append('<li><img src="http://img.youtube.com/vi/'+data.id+'/mqdefault.jpg" /></li>');
	});

	$thumbnailSlider.slick({
		slidesToShow: 3,
		speed: 1000,
	});
	
	//#thumbnail_sliderでクリックしたスライドをカレントにする
	$thumbnailSlider.on('click', '.slick-slide',function(){
		var index = $(this).attr("data-slick-index");
		$thumbnailSlider.slick("slickGoTo",index,false);
		ytPlayer.loadVideoById({videoId: ytData[index].id});//動画切り替え
	});

	
	// プレーヤーの埋め込み
	window.onYouTubeIframeAPIReady = function() {
		let i = 0;
		ytPlayer = new YT.Player('player', {
			videoId: ytData[i]['id'],
			playerVars: {
				rel: 0,
				showinfo: 0,
				// autoplay:1,
				controls:0,
				loop:1,
				playlist:ytData[i]['id'],//★loopする場合はplaylistを設定する必要がある
				playsinline: 1//★スマホ対応
			},
			events: {
				'onReady': onPlayerReady
			}
		});
	}


	// プレーヤー準備完了後の処理
	function onPlayerReady(e) {
		e.target.playVideo();
	}


	//IFrame Player API の読み込み
	var tag = document.createElement('script');
	tag.src = "https://www.youtube.com/iframe_api";
	var firstScriptTag = document.getElementsByTagName('script')[0];
	firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
});

</script>