slide-2
<!DOCTYPE html>
<html>
<head><style>
#hcg-slider-1 .hcg-slide-container {
width: auto;
height: auto;
}
.hcg-slider {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
.hcg-slide-container {
max-width: 100%;
display: inline-block;
position: relative;
}
.hcg-slides {
display: none;
overflow: hidden;
justify-content: center;
align-items: center;
border-radius: 5px;
border: solid 1px #a0a0a0;
}
.hcg-slides img {
max-width: 100%;
max-height: 100%;
display: inline-block;
}
.hcg-slide-text {
color: #ffffff;
font-size: 14px;
padding: 3px 5px;
position: absolute;
bottom: 0;
border-radius: 5px;
left: 50%;
text-align: center;
text-shadow: 0 0 2px #000;
background-color: rgba(255,255,255,0.30);
display: inline-block;
transform: translate(-50%, -5px);
}
.hcg-slide-dot-control {
margin-top: 10px;
text-align: center;
}
.hcg-slide-dot {
cursor: pointer;
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
}
.hcg-slide-dot.dot-active {
background-color: #717171;
}
.hcg-slide-number {
color: #ffffff;
font-size: 12px;
padding: 4px 7px;
position: absolute;
border-radius: 5px;
top: 5px;
left: 5px;
background-color: rgba(255,255,255,0.30);
}
/************CSS Animation***********/
.animated {
animation-name: fadeIn;
animation-duration: 1s;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.fadeIn {
animation-name: fadeIn;
}
</style>
<title>Page Title</title>
</head>
<body>
<div id="hcg-slider-1" class="hcg-slider">
<div class="hcg-slide-container">
<div class="hcg-slider-body">
<a class="hcg-slides animated" style="display:flex">
<span class="hcg-slide-number">1/5</span>
<img src="https://www.html-code-generator.com/images/slider/1.png" alt="image 1">
<span class="hcg-slide-text">image 1</span>
</a>
</div>
</div>
<div class="hcg-slide-dot-control"></div>
</div>
<script>
(() => {
//If you want to add more images, add the link name and URL image URL in the array list below.
const images_list = [
{
"url": "https://www.html-code-generator.com/images/slider/1.png",
"alt": "",
"name": "image 1",
"link": ""
},
{
"url": "https://www.html-code-generator.com/images/slider/2.png",
"alt": "",
"name": "image 2",
"link": ""
},
{
"url": "https://www.html-code-generator.com/images/slider/3.png",
"alt": "",
"name": "image 3",
"link": ""
},
{
"url": "https://www.html-code-generator.com/images/slider/4.png",
"alt": "",
"name": "image 4",
"link": ""
},
{
"url": "https://www.html-code-generator.com/images/slider/5.png",
"alt": "",
"name": "image 5",
"link": ""
}
];
// generated by https://www.html-code-generator.com/html/image-slideshow-generator
let slider_id = document.querySelector("#hcg-slider-1");
// append all images
let dots_div = "";
let images_div = "";
for (let i = 0; i < images_list.length; i++) {
// if no link without href="" tag
let href = (images_list[i].link == "" ? "":' href="'+images_list[i].link+'"');
images_div += '<a'+href+' class="hcg-slides animated"'+(i === 0 ? ' style="display:flex"':'')+'>'+
'<span class="hcg-slide-number">'+(i+1)+'/'+images_list.length+'</span>'+
'<img src="'+images_list[i].url+'" alt="'+images_list[i].name+'">'+
'<span class="hcg-slide-text">'+images_list[i].name+'</span>'+
'</a>';
dots_div += '<a href="#" class="hcg-slide-dot'+(i === 0 ? ' dot-active':'')+'" data-id="'+i+'"></a>';
}
slider_id.querySelector(".hcg-slider-body").innerHTML = images_div;
slider_id.querySelector(".hcg-slide-dot-control").innerHTML = dots_div;
let slide_index = 0;
const images = slider_id.querySelectorAll(".hcg-slides");
const dots = slider_id.querySelectorAll(".hcg-slide-dot");
const showSlides = () => {
if (slide_index > images.length-1) {
slide_index = 0;
}
if (slide_index < 0) {
slide_index = images.length-1;
}
for (let i = 0; i < images.length; i++) {
images[i].style.display = "none";
dots[i].classList.remove("dot-active");
if (i == slide_index) {
images[i].style.display = "flex";
dots[i].classList.add("dot-active");
}
}
}
const dot_click = event => {
event.preventDefault();
slide_index = event.target.dataset.id;
showSlides();
}
for (let i = 0; i < dots.length; i++) {
dots[i].addEventListener("click", dot_click, false);
}
// auto play
setInterval(() => {
slide_index++;
showSlides();
}, 4000);
})();
</script>
</body>
</html>////////////////////////////참고 페이지 - https://www.html-code-generator.com/html/image-slideshow-generator -