I have a unique internal ticketing system that has restrictions on using JavaScript and limited CSS tags. Due to this limitation, I needed to explore different methods of creating a simple CSS slider for images using only HTML and CSS.
However, I encountered an issue where clicking on the Next/Prev button causes a jump effect before loading the next image. I've tried using max-width: 100%; height: auto;, but so far, it hasn't solved the problem.
Does anyone have any advice on how to prevent the picture from moving when the next image is loaded? Any help would be greatly appreciated!
<style>
#slidepicswrap {
width:640px;
height:450px;
margin:0 auto;
position:relative;
font-family:verdana, arial, sans-serif;
}
#slidepicswrap #slides {
position:absolute;
left:0;
top:0;
height:450px;
width:640px;
overflow:hidden;
text-align:center;
}
#gallerywrapper #gallery div {
width:640px; height:900px;
padding-top:10px;
position:relative;
}
#gallerywrapper #gallery div img {
clear:both;
display:block;
margin:0 auto;
border:0;
}
#gallerywrapper #gallery div h3 {
padding:10px 0 0 0;
margin:0;
font-size:18px;
}
#gallerywrapper #gallery div p {
padding:5px 0;
margin:0;
font-size:12px;
line-height:18px;
}
a {
text-decoration: none;
display: inline-block;
padding: 8px 16px;
}
a:hover {
background-color: #ddd;
color: black;
}
.previous {
background-color: #f1f1f1;
color: black;
display:inline;
float:left;
margin-left:80px;
}
.next {
background-color: #4CAF50;
color: white;
display:inline;
float:right;
margin-right:80px;<span id="CmCaReT"></span>
text-decoration:none;
}
.round {
border-radius: 50%;
}
</style><div id="slidepicswrap">
<div id="slides">
<div id="pic1"><img src="https://unsplash.it/g/500/350?random" alt="Image 1" width="500" height="350" /> <a class="previous" href="#pic5" rel="nofollow"><</a> <a class="next" href="#pic2" rel="nofollow">></a>
<h3>Image 1</h3>
<p>Text of image 1.</p>
</div>
<div id="pic2"><img src="https://unsplash.it/g/500/350" alt="Image 2" width="500" height="350" /> <a class="previous" href="#pic1" rel="nofollow"><</a> <a class="next" href="#pic3" rel="nofollow">></a>
<h3>Image 2</h3>
<p>Text of image 2.</p>
</div>
<div id="pic3"><img src="https://unsplash.it/g/500/350?random" alt="Image 3" width="500" height="350" /> <a class="previous" href="#pic2" rel="nofollow"><</a> <a class="next" href="#pic1" rel="nofollow">></a>
<h3>Image 3</h3>
<p>Text of image 3.</p>
</div>
</div>
</div>