Home>

Try using other people's articles to create your own slideshow
The operation itself was fine, but
Since the class of ".slide-set" is specified absolute when actually incorporating it into the page,
When I try to embed text, etc. under the slideshow, it gets covered with photos and the layout does not go as expected (because the height is 0).
There is a way to force the empty element, but it doesn't seem to be a smart way.

Furthermore, if you search for an article that creates a slideshow by yourself, all articles are all articles specified by absolute.

How can I smartly incorporate a slideshow into a page?

<! DOCTYPE HTML>
<html lang = "en">
<head>
<meta charset = "utf-8">
<meta http-equiv = "X-UA-Compatible" content = "IE = edge">
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<title>Page</title>
<script src = "https://code.jquery.com/jquery-2.2.4.min.js"></script>
<link href = "https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel = "stylesheet">
<link rel = "stylesheet" href = "./ css/all.css">
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .slide {
        position: relative;
    }
    .slide .slide-set {
        position: absolute;
        left: 0;
        top: 0;
    }
</style>
</head>
<body>
    
        
            <span><i></i></span>
            <span><i></i></span>
            
                
                     Image 1 
                
                
                    
                     Image 2 
                
                
                    
                     Image 3 
                
            
            <p>* For example, if you include an element here, it will go up and overlap the image</p>
        
    
    <script>
        $(function () {
            // single-loop-slider
            // Initial page setting
            let page = 0;
            // Set the number of images as the last page
            let lastPage = parseInt ($('. slide-set'). length-1);
            // temporarily hide all images
            $('. slide-set'). css ('display', 'none');
            // Initial page display
            $('. slide-set'). eq (page) .css ('display', 'block');
            // Page switching function
            function changePage () {
                $('. slide-set'). fadeOut (1000);
                $('. slide-set'). eq (page) .fadeIn (1000);
            }
            // Image switching firing setting (timer)
            let Timer;
            function startTimer () {
                Timer = setInterval (function () {
                    if (page === lastPage) {
                        page = 0;
                        changePage ();
                    } else {
                        page ++;
                        changePage ();}
                },

 5000);
            }
            // Stop image switching setting
            function stopTimer () {
                clearInterval (Timer);
            }
            // Timer start
            startTimer ();
            // Click Next
            $('. arrow-next a'). on ('click', function () {
                // Timer stop&start (Timer start after click)
                stopTimer ();
                startTimer ();
                if (page === lastPage) {
                    page = 0;
                    changePage ();
                } else {
                    page ++;
                    changePage ();
                }
            });
            // Click back
            $('. arrow-prev a'). on ('click', function () {
                stopTimer ();
                startTimer ();
                if (page === 0) {
                    page = lastPage;
                    changePage ();
                } else {
                    page-;
                    changePage ();
                }
            });
        });
    </script>
</body>
</html>