[jQuery]スライドUIに関して質問

他の方の記事を利用してスライドショーの自作の仕方をやってみて
動作自体はうまくいって良かったですが、
実際にページに組み込む際、「.slide-set」のクラスをabsolute指定しているため、
スライドショーの下に文字等内容を組み込もうとした際、写真と被ってしまい、レイアウトが思うようにいきません（高さが0のため）。
無理やり空の要素をぶち込む方法もあるが、あまりスマートな方法であるようにはどうしても思えません。

しかも自作でスライドショーを作る記事を検索した場合、どの記事もabsoluteで指定している記事ばっかりです。

どのようにすれば、スマートにスライドショーをページに組み込むことができるのでしょうか？

HTML
1<!DOCTYPE HTML>
2<html lang="ja">
3<head>
4<meta charset="utf-8">
5<meta http-equiv="X-UA-Compatible" content="IE=edge">
6<meta name="viewport" content="width=device-width, initial-scale=1.0">
7<title>Page</title>
8<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
9<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
10<link rel="stylesheet" href="./css/all.css">
11<style>
12    * {
13        margin: 0;
14        padding: 0;
15        box-sizing: border-box;
16    }
17    .slide{
18        position:relative;
19    }
20    .slide .slide-set{
21        position:absolute;
22        left:0;
23        top:0;
24    }
25</style>
26</head>
27<body>
28    <div class="container">
29        <div class="contents">
30            <span class="arrow-prev"><a href="#"><i class="fas fa-chevron-left"></i></a></span>
31            <span class="arrow-next"><a href="#"><i class="fas fa-chevron-right"></i></a></span>
32            <div class="slide">
33                <div class="slide-set">
34                    <img src="ph1.jpg">
35                    <div class="slide-title">画像1</div>
36                </div>
37                <div class="slide-set">
38                    <img src="ph2.jpg">
39                    <div class="slide-title">画像2</div>
40                </div>
41                <div class="slide-set">
42                    <img src="ph3.jpg">
43                    <div class="slide-title">画像3</div>
44                </div>
45            </div>
46            <p>※例えばここに要素を組み込むと上に上がってしまい画像と重なる</p>
47        </div>
48    </div>
49
50    <script>
51        $(function(){
52            // single-loop-slider
53            // 初期ページ設定
54            let page = 0;
55            // 画像数を最後のページとして設定
56            let lastPage = parseInt($('.slide-set').length-1);
57            // 一旦全ての画像を非表示
58            $('.slide-set').css('display','none');
59            // 初期ページ表示
60            $('.slide-set').eq(page).css('display','block');
61            // ページ切り替え用関数
62            function changePage(){
63                $('.slide-set').fadeOut(1000);
64                $('.slide-set').eq(page).fadeIn(1000);
65            }
66            // 画像切り替えの発火設定（タイマー）
67            let Timer;
68            function startTimer(){
69                Timer = setInterval(function(){
70                    if(page === lastPage){
71                        page = 0;
72                        changePage();
73                    } else {
74                        page ++;
75                        changePage();
76                    }
77                }, 5000);
78            }
79            // 画像切り替えの停止設定
80            function stopTimer(){
81                clearInterval(Timer);
82            }
83            // タイマースタート
84            startTimer();
85            // 次へをクリック
86            $('.arrow-next a').on('click', function(){
87                // タイマー停止&スタート（クリック後タイマースタート）
88                stopTimer();
89                startTimer();
90                if(page === lastPage){
91                    page = 0;
92                    changePage();
93                } else {
94                    page ++;
95                    changePage();
96                }
97            });
98            // 戻るをクリック
99            $('.arrow-prev a').on('click', function(){
100                stopTimer();
101                startTimer();
102                if(page === 0){
103                    page = lastPage;
104                    changePage();
105                } else {
106                    page --;
107                    changePage();
108                }
109            });
110        });
111    </script>
112</body>
113</html>

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

回答1件

ベストアンサー

どのようにすれば、スマートにスライドショーをページに組み込むことができるのでしょうか？

自作せずにライブラリ化されたものを使う
スライド開始時に高さを取得し、包括要素に設定する

投稿2019/11/28 10:36

kei344

総合スコア69596

DaisukeMori

2019/11/28 13:39

運用する場合は自作せずにライブラリ化が一般的なのでしょうか？もし自作で運用させようと思った場合の学習コストは高いのでしょうか？ Webデザイナーでは難しいでしょうか？

kei344

2019/11/28 14:29

「高さを指定すればよい」という回答もしているのですが…。 > 一般的なのでしょうか？一般的かどうかはわかりませんが、ライブラリを公開する文化があるということは、それを利用することもあるでしょう。 > 学習コストは高いのでしょうか？人によります。ただ、コストを意識しすぎて基礎がおろそかになる例をよく見ます。 > Webデザイナーでは難しいでしょうか？人によります。国家試験があるわけでもないので「Webデザイナー」と名乗るだけならどんな人でも名乗れますし、当然スライドショーを特に苦も無くつくれる「Webデザイナー」もいます。

DaisukeMori

2019/11/29 04:27

ご回答ありがとうございます。試しに「slide-set」クラスの親要素である「slide」クラスにheight指定をすれば下に要素を追加しても写真とかぶるということはなくなりました（変にmargin指定しなくても）。スライドショーに限らずjQueryの自作は1つ1つ要件ごとに仕組みを作ることを目標にして、現状はできる限りプラグイン利用を試みます。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

[jQuery]スライドUIに関して質問

関連した質問