Flexslider2を複数使った際の挙動について。

前提・実現したいこと

Web制作初心者です。
"flexslider2"というスライダーを同じページ内で複数使いたいと考えています。
下記サイトの「サムネイル付きのフリックスライダー（カルーセル）」を参考に設置しました。
http://demo.html-coding.co.jp/sbc/2012/C04-08/flexslider/http://flexslider.woothemes.com/thumbnail-slider.html

メインのスライダーの下にサムネイルがついている形のものを利用予定で、
クリックするとクリックした画像がメインに表示されるのが通常の挙動だと思います。

同一ページ内に同様のスライダーを複数配置すると、
全く同じ<div>構成でもクリックした画像がメインに表示される機能が「一番上の」スライダーにしか適用されません。
解決方法をご教授いただけないでしょうか。

発生している問題・エラーメッセージ

2つ目以降のスライダーのサムネイルをクリックしても何も反応しない。

該当のソースコード

**スライダーに関わりそうな部分を主に抜粋

html
1<!DOCTYPE html>
2<html lang="ja">
3<meta charset="utf-8">
4<meta http-equiv="X-UA-Compatible" content="IE=edge">
5<meta name="viewport" content="width=device-width, initial-scale=1">
6<head>
7<link href="css/flexslider.css" rel="stylesheet" type="text/css">
8<script src="js/jquery-3.3.1.min.js"></script> 
9<script src="js/jquery.flexslider.js"></script> 
10<script type="text/javascript" charset="utf-8">
11      $(window).on("load", function () {
12		$('.flexslider-cs').flexslider({
13			animation: "slide",
14			controlNav: false,
15			animationLoop: false,
16			slideshow: false,
17			sync: ".flexslider-carousel"
18		});
19		$('.flexslider-carousel').flexslider({
20			animation: "slide",
21			controlNav: false,
22			animationLoop: false,
23			slideshow: false,
24			itemWidth: 223,
25			itemMargin: 5,
26			minItems: 3,
27			maxItems: 6,
28			asNavFor: '.flexslider-cs'
29    	});
30	  });
31</script>
32</head>
33<body>
34<div id="slider01" class="container-fluid">
35  <div class="flexslider flexslider-cs">
36    <ul class="slides">
37      <li><img src="img/photo1.JPG" class="img-fluid" alt="photo1"></li>
38      <li><img src="img/photo2.JPG" class="img-fluid" alt="photo2"/></li>
39      <li><img src="img/photo3.JPG" class="img-fluid" alt="photo3"/></li>
40      <li><img src="img/photo4.JPG" class="img-fluid" alt="photo4"/></li>
41      <li><img src="img/photo5.JPG" class="img-fluid" alt="photo5"/></li>
42      <li><img src="img/photo6.JPG" class="img-fluid" alt="photo6"/></li>
43     </ul>
44  </div>
45  <div class="flexslider flexslider-carousel">
46    <ul class="slides">
47      <li><img src="img/photo1.JPG" class="img-fluid" alt="photo1"></li>
48      <li><img src="img/photo2.JPG" class="img-fluid" alt="photo2"/></li>
49      <li><img src="img/photo3.JPG" class="img-fluid" alt="photo3"/></li>
50      <li><img src="img/photo4.JPG" class="img-fluid" alt="photo4"/></li>
51      <li><img src="img/photo5.JPG" class="img-fluid" alt="photo5"/></li>
52      <li><img src="img/photo6.JPG" class="img-fluid" alt="photo6"/></li>
53    </ul>
54  </div>
55</div>
56<div id="slider02" class="container-fluid">
57  <div class="flexslider flexslider-cs">
58    <ul class="slides">
59      <li><img src="img/photo11.JPG" class="img-fluid" alt="photo11"></li>
60      <li><img src="img/photo12.JPG" class="img-fluid" alt="photo12"/></li>
61      <li><img src="img/photo13.JPG" class="img-fluid" alt="photo13"/></li>
62      <li><img src="img/photo14.JPG" class="img-fluid" alt="photo14"/></li>
63      <li><img src="img/photo15.JPG" class="img-fluid" alt="photo15"/></li>
64      <li><img src="img/photo16.JPG" class="img-fluid" alt="photo16"/></li>
65     </ul>
66  </div>
67  <div class="flexslider flexslider-carousel">
68    <ul class="slides">
69      <li><img src="img/photo11.JPG" class="img-fluid" alt="photo11"></li>
70      <li><img src="img/photo12.JPG" class="img-fluid" alt="photo12"/></li>
71      <li><img src="img/photo13.JPG" class="img-fluid" alt="photo13"/></li>
72      <li><img src="img/photo14.JPG" class="img-fluid" alt="photo14"/></li>
73      <li><img src="img/photo15.JPG" class="img-fluid" alt="photo15"/></li>
74      <li><img src="img/photo16.JPG" class="img-fluid" alt="photo16"/></li>
75    </ul>
76  </div>
77</div>
78</body>

HTML5, CSS3, JavaScript, jQuery

試したこと

正常に動いている一番上のスライダーをコピーし全く同じコードで配置しても2つ目以降のスライダーは希望の動作をしませんでした。

補足情報（FW/ツールのバージョンなど）

jQuery FlexSlider v2.2.0
http://www.woothemes.com/flexslider/

...

行動規範の内容に同意します

回答1件

ベストアンサー

これでどうでしょう。

js
1$( function() {
2	$( '.container-fluid' ).each( function() {
3		$( '.flexslider-cs', this ).flexslider( {
4			animation: 'slide',
5			controlNav: false,
6			animationLoop: false,
7			slideshow: false,
8			sync: $( '.flexslider-carousel', this )
9		} );
10		$( '.flexslider-carousel', this ).flexslider( {
11			animation: 'slide',
12			controlNav: false,
13			animationLoop: false,
14			slideshow: false,
15			itemWidth: 223,
16			itemMargin: 5,
17			minItems: 3,
18			maxItems: 6,
19			asNavFor: $( '.flexslider-cs', this )
20		} );
21	} );
22} ); // 未検証