Responsive Slideshow with Pure Javascript

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<div class="smerf-item">
<img decoding="async" src="https://html-editor.vpsweb-hosting.com/wp-content/webp-express/webp-images/doc-root/wp-content/uploads/2023/04/introspeksi.jpg.webp"><a href="#">Most Largest Sea Sky Cloud in The Mountain</a>
        </div>

<div class="smerf-item">
<img decoding="async" src="https://html-editor.vpsweb-hosting.com/wp-content/webp-express/webp-images/doc-root/wp-content/uploads/2023/04/ha-long-bay.jpg.webp"><a href="#">The Most Amazing Places In The World Full of Color</a>
        </div>

<div class="smerf-item">
<img decoding="async" src="https://html-editor.vpsweb-hosting.com/wp-content/webp-express/webp-images/doc-root/wp-content/uploads/2023/04/akal.jpg.webp"><a href="#">The World’s Best and Fantastic Blue Bird</a>
        </div>

<div class="smerf-item">
<img decoding="async" src="https://html-editor.vpsweb-hosting.com/wp-content/webp-express/webp-images/doc-root/wp-content/uploads/2023/04/bald-eagle.jpg.webp"><a href="#">The Most Beautiful Bird Flying in The Sky</a>
        </div>

<div class="smerf-item">
<img decoding="async" src="https://html-editor.vpsweb-hosting.com/wp-content/webp-express/webp-images/doc-root/wp-content/uploads/2023/04/vibrant.jpg.webp"><a href="#">Amazing Places in the World like Fairytale</a>
        </div>

</div>
</div>

</body>
</html>

Ã¢â‚¬â€¹x
 
<!-- HTML Source Code -->
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
 
<div class="slider">
    <div class="smerf-container fade-self">
 
        <div class="smerf-item">
<img decoding="async" src="https://html-editor.vpsweb-hosting.com/wp-content/webp-express/webp-images/doc-root/wp-content/uploads/2023/04/introspeksi.jpg.webp"><a href="#">Most Largest Sea Sky Cloud in The Mountain</a>
        </div>
 
        <div class="smerf-item">
<img decoding="async" src="https://html-editor.vpsweb-hosting.com/wp-content/webp-express/webp-images/doc-root/wp-content/uploads/2023/04/ha-long-bay.jpg.webp"><a href="#">The Most Amazing Places In The World Full of Color</a>
        </div>
 
        <div class="smerf-item">
<img decoding="async" src="https://html-editor.vpsweb-hosting.com/wp-content/webp-express/webp-images/doc-root/wp-content/uploads/2023/04/akal.jpg.webp"><a href="#">The World’s Best and Fantastic Blue Bird</a>
        </div>
 
        <div class="smerf-item">
<img decoding="async" src="https://html-editor.vpsweb-hosting.com/wp-content/webp-express/webp-images/doc-root/wp-content/uploads/2023/04/bald-eagle.jpg.webp"><a href="#">The Most Beautiful Bird Flying in The Sky</a>
        </div>
 
        <div class="smerf-item">
<img decoding="async" src="https://html-editor.vpsweb-hosting.com/wp-content/webp-express/webp-images/doc-root/wp-content/uploads/2023/04/vibrant.jpg.webp"><a href="#">Amazing Places in the World like Fairytale</a>
        </div>
 
    </div>
</div>
 
</body>
</html>
 
 
 

/* CSS Source Code */
.smerf-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 420px;
    margin: 20px auto;
    max-width: 900px
}

.smerf-item {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition-property: opacity
}

.smerf-item img {
    width: 100%;
    height: auto
}

.smerf-item a {
    background: #151515;
    background: rgb(0 0 0 / 60%);
    left: 20px;
    display: block;
    position: absolute;
    bottom: 20px;
    font-size: 21px;
    color: #fff;
    padding: 5px 30px;
    font-weight: bold;
    z-index: 99;
    font-family: arial;
    text-decoration: none
}

.smerf-item a:hover {
    color: #3dff00
}

.smerf-item:nth-of-type(1) {
    background: #69d2e7
}

.smerf-item:nth-of-type(2) {
    background: #fa6900
}

.smerf-item:nth-of-type(3) {
    background: #1fda9a
}

.smerf-item:nth-of-type(4) {
    background: #e8b71a
}

.smerf-item:nth-of-type(5) {
    background: #9b539c
}

@media (max-width:800px) {
    .smerf-container {
        height: 400px
    }
}

@media (max-width:720px) {
    .smerf-container {
        height: 320px
    }

.smerf-item a {
        font-size: 19px
    }
}

@media (max-width:520px) {
    .smerf-container {
        height: 250px
    }

.smerf-item a {
        font-size: 18px
    }
}

xxxxxxxxxx
 
/* CSS Source Code */
.smerf-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 420px;
    margin: 20px auto;
    max-width: 900px
}
 
.smerf-item {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition-property: opacity
}
 
.smerf-item img {
    width: 100%;
    height: auto
}
 
.smerf-item a {
    background: #151515;
    background: rgb(0 0 0 / 60%);
    left: 20px;
    display: block;
    position: absolute;
    bottom: 20px;
    font-size: 21px;
    color: #fff;
    padding: 5px 30px;
    font-weight: bold;
    z-index: 99;
    font-family: arial;
    text-decoration: none
}
 
.smerf-item a:hover {
    color: #3dff00
}
 
.smerf-item:nth-of-type(1) {
    background: #69d2e7
}
 
.smerf-item:nth-of-type(2) {
    background: #fa6900
}
 
.smerf-item:nth-of-type(3) {
    background: #1fda9a
}
 
.smerf-item:nth-of-type(4) {
    background: #e8b71a
}
 
.smerf-item:nth-of-type(5) {
    background: #9b539c
}
 
@media (max-width:800px) {
    .smerf-container {
        height: 400px
    }
}
 
@media (max-width:720px) {
    .smerf-container {
        height: 320px
    }
 
    .smerf-item a {
        font-size: 19px
    }
}
 
@media (max-width:520px) {
    .smerf-container {
        height: 250px
    }
 
    .smerf-item a {
        font-size: 18px
    }
}
 
 
 

// Javascript Source Code
(function(w, d) {
    "use strict";
    let options = {};
    let SmerfSlider = function() {};
    let changeProperty = function(items, index, prevIndex) {
        items[prevIndex].style.opacity = 0;
        items[index].style.opacity = 1;
    }
    let fade = function(container, items, index) {
        let prevIndex = (index === 0) ? items.length - 1 : index - 1;
        items[index].style.opacity = 1;
        setInterval(() => {
            prevIndex = index;
            index++;
            if (index > items.length - 1) {
                index = 0;
            }
            changeProperty(items, index, prevIndex);
        }, parseInt(options.timeInterval));
    }
    let chooseSlider = function(container, items, index) {
        if (options.animationType === 'fade' && options.type === 'auto') {
            fade(container, items, index);
        } else if (options.animationType === 'fade' && options.type === 'self') {
            fade(container, items, index);
        }
    }
    SmerfSlider.prototype.setLibrary = function(opt) {
        options = {
            container: opt.container || 'smerf-container',
            items: opt.items || 'smerf-item',
            transitionDuration: opt.transitionDuration || '300',
            transitionFunction: opt.transitionFunction || 'ease-in',
            timeInterval: opt.timeInterval || '5000',
            animationType: opt.animationType || 'fade',
            type: opt.type || 'auto',
            startAt: opt.startAt || 0
        }
        const containerDOM = d.getElementsByClassName(options.container)[0];
        const itemsDOM = Array.prototype.slice.call(containerDOM.getElementsByClassName(options.items));
        if (containerDOM && itemsDOM.length > 0) {
            itemsDOM.forEach(item => {
                item.style.transitionTimingFunction = options.transitionFunction;
                item.style.transitionDuration = `${options.transitionDuration}ms`;
            });
            if (options.startAt > itemsDOM.length - 1) {
                options.startAt = 0;
            }
            chooseSlider(containerDOM, itemsDOM, options.startAt);
        } else {
            console.error('Container or Items have been not found');
        }
    };
    SmerfSlider.prototype.startLibrary = function(opt) {
        d.addEventListener('DOMContentLoaded', function evt() {
            d.removeEventListener('DOMContentLoaded', evt, false);
            w.SmerfSlider.setLibrary(opt);
        }, false);
    }
    w.SmerfSlider = new SmerfSlider();
})(window, document);

(function() {
    "use strict";
    SmerfSlider.startLibrary({
        container: 'fade-self',
        timeInterval: '6000',
        type: 'self'
    });
})();

xxxxxxxxxx
 
// Javascript Source Code
(function(w, d) {
    "use strict";
    let options = {};
    let SmerfSlider = function() {};
    let changeProperty = function(items, index, prevIndex) {
        items[prevIndex].style.opacity = 0;
        items[index].style.opacity = 1;
    }
    let fade = function(container, items, index) {
        let prevIndex = (index === 0) ? items.length - 1 : index - 1;
        items[index].style.opacity = 1;
        setInterval(() => {
            prevIndex = index;
            index++;
            if (index > items.length - 1) {
                index = 0;
            }
            changeProperty(items, index, prevIndex);
        }, parseInt(options.timeInterval));
    }
    let chooseSlider = function(container, items, index) {
        if (options.animationType === 'fade' && options.type === 'auto') {
            fade(container, items, index);
        } else if (options.animationType === 'fade' && options.type === 'self') {
            fade(container, items, index);
        }
    }
    SmerfSlider.prototype.setLibrary = function(opt) {
        options = {
            container: opt.container || 'smerf-container',
            items: opt.items || 'smerf-item',
            transitionDuration: opt.transitionDuration || '300',
            transitionFunction: opt.transitionFunction || 'ease-in',
            timeInterval: opt.timeInterval || '5000',
            animationType: opt.animationType || 'fade',
            type: opt.type || 'auto',
            startAt: opt.startAt || 0
        }
        const containerDOM = d.getElementsByClassName(options.container)[0];
        const itemsDOM = Array.prototype.slice.call(containerDOM.getElementsByClassName(options.items));
        if (containerDOM && itemsDOM.length > 0) {
            itemsDOM.forEach(item => {
                item.style.transitionTimingFunction = options.transitionFunction;
                item.style.transitionDuration = `${options.transitionDuration}ms`;
            });
            if (options.startAt > itemsDOM.length - 1) {
                options.startAt = 0;
            }
            chooseSlider(containerDOM, itemsDOM, options.startAt);
        } else {
            console.error('Container or Items have been not found');
        }
    };
    SmerfSlider.prototype.startLibrary = function(opt) {
        d.addEventListener('DOMContentLoaded', function evt() {
            d.removeEventListener('DOMContentLoaded', evt, false);
            w.SmerfSlider.setLibrary(opt);
        }, false);
    }
    w.SmerfSlider = new SmerfSlider();
})(window, document);
 
(function() {
    "use strict";
    SmerfSlider.startLibrary({
        container: 'fade-self',
        timeInterval: '6000',
        type: 'self'
    });
})();
  
 
 

This is a Responsive Slideshow with Pure Javascript, complete preview with syntax highlighting of html, css, js or javascript source code.