Content jumping on load when I use CSS and HTML only

user_13957058 0
Viewed 319

I have an internal ticketing system which does not allow JS and also does not fully allow all the CSS tags. For that reason I had to adapt all the possible ways how to build a simple CSS slider for some image (using only CSS and HTML ).

The only problem I have, anytime I click on Next/Prev button, creates the Jump effect then the next picture loads. I am trying to find a way where the picture stays in the same position when the next image is loaded. I have tried max-width: 100%; height: auto; but still nothing :( .

Any advice??? Thanks a lot in advance

<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">&lt;</a> <a class="next" href="#pic2" rel="nofollow">&gt;</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">&lt;</a> <a class="next" href="#pic3" rel="nofollow">&gt;</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">&lt;</a> <a class="next" href="#pic1" rel="nofollow">&gt;</a>
<h3>Image 3</h3>
<p>Text of image 3.</p>
</div>
</div>
</div>

slideshow css html
1 Answers

Basically your image is jumping because you haven't fixed the padding-top therefore the total height of #slide is changing

<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" />
                <div>
                    <a class="previous" href="#pic5" rel="nofollow">&lt;</a>
                    <a class="next" href="#pic2" rel="nofollow">&gt;</a>
                </div>

                <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" />
                <div>
                    <a class="previous" href="#pic1" rel="nofollow">&lt;</a>
                    <a class="next" href="#pic3" rel="nofollow">&gt;</a>
                </div>
                <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" />
                <div>
                    <a class="previous" href="#pic2" rel="nofollow">&lt;</a>
                    <a class="next" href="#pic1" rel="nofollow">&gt;</a>
                </div>
                <h3>Image 3</h3>
                <p>Text of image 3.</p>
            </div>
        </div>
    </div>


<style>
        #slidepicswrap {
            width: 640px;
            height: 450px;
            margin: 0 auto;
            position: relative;
            font-family: verdana, arial, sans-serif;
            /* background: violet; */
            overflow: hidden;
        }
        
        #slidepicswrap #slides {
            position: absolute;
            left: 0;
            top: 0;
            height: 450px;
            width: 640px;
            overflow: hidden;
            text-align: center;
        }
        
        #gallerywrapper #gallery div {
            width: 640px;
            height: 920px;
            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;
            text-decoration: none;
        }
        
        .round {
            border-radius: 50%;
        }
        
        img {
            padding-top: 10px;
        }
    </style>
user_106124070
Related