Как избавиться от лишнего пробела в слайдшоу CSS, не избавившись от ручного перехода кнопки?

Question

У меня есть слайд-шоу из чистого CSS3. Он останется только CSS, а не JS вообще. Он автоматически переходит через 5 секунд (с использованием анимации), назад и вперед между двумя изображениями, которые он удерживает. Пользователь также может вручную нажать кнопку, чтобы вызвать слайд (с использованием перехода). Div для двух изображений до тех пор, пока они есть. Моя проблема заключается в том, что если слайд-шоу автоматически переходит на второе изображение, и пользователь нажимает кнопку для второго изображения, он снова будет перемещаться в пустое пространство без изображения. Как я могу остановить его от скольжения снова на второй щелчок мыши после автоматического слайда на это второе изображение?

CSS:

.slideshowcontainer { 
    width: 800px; 
    height: 400px; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 0px; 
    text-align: center; 
    overflow: hidden; 
    position: relative; 
    top: 30px; 
    border-style: solid; 
    border-width: 10px; 
    border-color: white; 
    border-radius: 15px; 
} 

.imagecontainer { 
    width: 1800px; 
    height: 400px; 
    clear: both; 
    position: relative; 
    -webkit-transition: left 3s; 
    -moz-transition: left 3s; 
    -o-transition: left 3s; 
    -ms-transition: left 3s; 
    transition: left 3s; 
    animation: scroller 16s infinite; 
} 

@keyframes scroller { 
    0% { 
     transform: translateX(0); 
    } 
    31.25% { 
     transform: translateX(0); 
    } 
    50% { 
     transform: translateX(-800px); 
    } 
    81.25% { 
     transform: translateX(-800px); 
    } 
    100% { 
     transform: translateX(0); 
    } 
} 

.slideshowimage { 
    float: left; 
    margin: 0px; 
    padding: 0px; 
    position: relative; 
} 


#slideshowimage-1:target ~ .imagecontainer { 
animation: none; 
transform: translateX(0px); 
} 

#slideshowimage-2:target ~ .imagecontainer { 
animation: none; 
transform: translateX(-800px); 
} 

.buttoncontainer { 
    position: relative; 
    top: -20px; 
} 

.button { 
    display: inline-block; 
    height: 10px; 
    width: 10px; 
    border-radius: 10px; 
    background-color: darkgray; 
    -webkit-transition: background-color 0.25s; 
    -moz-transition: background-color 0.25s; 
    -o-transition: background-color 0.25s; 
    -ms-transition: background-color 0.25s; 
    transition: background-color 0.25s; 
} 

.button:hover { 
    background-color: gray; 
} 

HTML:

<div class="slideshowcontainer"> 
    <span id="slideshowimage-1"></span> 
    <span id="slideshowimage-2"></span> 
    <span id="slideshowimage-3"></span> 
     <div class="imagecontainer"> 
      <a href="#"><img src="WebServiceSlide.png" class="slideshowimage" style="width:800px;height:400px;"></a> 
      <a href="#"><img src="es-flag.png" class="slideshowimage" style="width:800px;height:400px;"></a> 
     </div> 
     <div class="buttoncontainer"> 
      <a href="#slideshowimage-1" class="button"></a> 
      <a href="#slideshowimage-2" class="button"></a> 
     </div> 
    </div> 

Answer 1

Когда кнопка получает щелкнул у вас есть переключение анимации от и сделать перевод

я добавил код фрагмент

.slideshowcontainer { 
 
    width: 800px; 
 
    height: 400px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    margin-top: 0px; 
 
    text-align: center; 
 
    overflow: hidden; 
 
    position: relative; 
 
    top: 30px; 
 
    border-style: solid; 
 
    border-width: 10px; 
 
    border-color: white; 
 
    border-radius: 15px; 
 
} 
 

 
.imagecontainer { 
 
    width: 1800px; 
 
    height: 400px; 
 
    clear: both; 
 
    position: relative; 
 
    -webkit-transition: all 3s; 
 
    -moz-transition: all 3s; 
 
    -o-transition: all 3s; 
 
    -ms-transition: all 3s; 
 
    transition: all 3s; 
 
    transform: translateX(0px); 
 
    animation: scroller 16s infinite; 
 
} 
 

 
@keyframes scroller { 
 
    0% { 
 
     transform: translateX(0); 
 
    } 
 
    31.25% { 
 
     transform: translateX(0); 
 
    } 
 
    50% { 
 
     transform: translateX(-800px); 
 
    } 
 
    81.25% { 
 
     transform: translateX(-800px); 
 
    } 
 
    100% { 
 
     transform: translateX(0); 
 
    } 
 
} 
 

 
.slideshowimage { 
 
    float: left; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    position: relative; 
 
} 
 

 
#slideshowimage-1:target ~ .imagecontainer { 
 
    animation: none; 
 
    transform: translateX(0px); 
 
} 
 

 
#slideshowimage-2:target ~ .imagecontainer { 
 
    animation: none; 
 
    transform: translateX(-800px); 
 
} 
 

 
.buttoncontainer { 
 
    position: relative; 
 
    top: -20px; 
 
} 
 

 
.button { 
 
    display: inline-block; 
 
    height: 10px; 
 
    width: 10px; 
 
    border-radius: 10px; 
 
    background-color: darkgray; 
 
    -webkit-transition: background-color 0.25s; 
 
    -moz-transition: background-color 0.25s; 
 
    -o-transition: background-color 0.25s; 
 
    -ms-transition: background-color 0.25s; 
 
    transition: background-color 0.25s; 
 
} 
 

 
.button:hover { 
 
    background-color: gray; 
 
}

<div class="slideshowcontainer"> 
 
    <span id="slideshowimage-1"></span> 
 
    <span id="slideshowimage-2"></span> 
 
    <span id="slideshowimage-3"></span> 
 
     <div class="imagecontainer"> 
 
      <a href="#"><img src="https://www.internetcreation.net/wp-content/uploads/2015/04/banner-web-design.png" class="slideshowimage" style="width:800px;height:400px;"></a> 
 
      <a href="#"><img src="http://23k8dv4brsbv18vf5lh7gb21.wpengine.netdna-cdn.com/wp-content/uploads/2015/04/banner-web-development.png" class="slideshowimage" style="width:800px;height:400px;"></a> 
 
     </div> 
 
     <div class="buttoncontainer"> 
 
      <a href="#slideshowimage-1" class="button"></a> 
 
      <a href="#slideshowimage-2" class="button"></a> 
 
     </div> 
 
    </div>