JavaScriptで実装したスライドショーにリンクや文章を入れたい

前提・実現したいこと

HTML・CSS・JavascriptでHPを作成しています。
HPにスライドショーを実装しましたが、下記を行う方法がわかりません。

・親要素である入れ替え対象をimg要素では無くdiv要素等にして、その子要素として左側を(これまでスライドショーで入れ替わっていた)img要素、右側を文章を記載する要素に分割し、その親要素をスライドショーで入れ替えたい。

初心者にて説明が上手く出来ず申し訳ありません。
ご教授の程何卒よろしくお願い致します。

該当のソースコード

HTML
1 <section id="works">
2   <h2 class="title">
3    <img src="image/works.png" width=200px height=60px>
4   </h2>
5
6   <div class="works_background">
7     <div class="center">
8         <img src="image/img1.jpg" id="bigimg">
9       <ul class="works_ul">
10         <li class="works_li">
11           <img src="image/thumb-img1.jpg" class="thumb" data-image="image/img1.jpg">       
12         </li> 
13         <li class="works_li">
14           <img src="image/thumb-img2.jpg" class="thumb" data-image="image/img2.jpg">    
15         </li>
16         <li class="works_li">
17           <img src="image/thumb-img3.jpg" class="thumb" data-image="image/img3.jpg">
18         </li>
19       </ul>
20     </div>
21   </div>
22 </section>
23
24

JavaScript
1
2<script>
3  var thumbs = document.querySelectorAll('.thumb');
4  for(var i = 0; i < thumbs.length; i++) {
5    thumbs[i].onclick = function() {
6    document.getElementById("bigimg").src=this.dataset.image;
7    };
8  }
9</script>
10
11

kei344

2018/12/23 03:09

「スライドショー」に使用しているプラグイン／ライブラリは公式配布サイトのURLを質問文に追記ください。（URLにはリンクを張ることができます）また、その呼び出し部分のJavaScriptも提示してください。

kanetugu_70e

2018/12/23 03:27 編集

見た限り素のjsであり、外部ライブラリは未使用ではないでしょうか。

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

回答1件

色々方法はあると思いますが、現コードを崩さず利用する場合は以下が考えられます。
[html]
・imgタグ(#bigimg)の弟要素に、リストで各画像毎の文章を記述する。(li styleは無効)
・上記画像と文章をdiv等で囲む
[css]
・作成したdivにdisplayのfloat又はflexを適用する。
・初期表示(サンプルコードだと、image1)以外のliを非表示にする。(display:none)
[js]
・thumbsの様に文章liの配列を取得する。
・function()にて、該当li cssの表示及び、他liの非表示を記述する。