Here I combined two technologies: light-box and “slide show”
1. The first css part – “Code for lightbox” belongs to light-box only, I would not recommend to adjust it unless you know what you do.
Keep “mlightbox.min.js” file in the folder as it is. The link for it is the line at the bottom of the page:
<script src="mlightbox.min.js"></script>
2. The second css part – “Code for slideshow” belongs to the slide-show with all its components. You can adjust it carefully, if you need.
The bottom Javascript is the part of this slide-show; leave it as it is.
3. The icon and the image is the same file; keep the image the usual display size, let’s say width around 900px.
All images should have the same sizes and proportions.
4. The size of the icons (in this case 300px) are indicated in 2 places:
The lower part of the “Code for lightbox” (the only value that you can change)
[mlightbox] img{
width:300px; /* here is width of the icon*/
transition:transform .3s ease;
}
And in the upper CSS part:
.slideshow-container {
max-width: 300px;
…
5. You cannot see the icon/slides in the Dreamweaver, only in the browser
6. The position of the descriptive text, if you need it, depends on the height of the icon/slide. In this case - top 420px
.text {
…
position: absolute;
top: 420px;
…
}
7. The amount of dots/circles and the corresponding numbers should correspond to the amount of icons/slides
<span class="dot" onclick="currentSlide(1)"></span>
etc.
8. I would not recommend to put anything under the slide-show and text because of the absolute positioning of some elements