手動でボタンを移動させずに余分な空白をCSSスライドショーで取り除く方法は？

Question

私は純粋なCSS3で作られたスライドショーを持っています。それはCSSだけで、JSは全く残っていません。アニメーションを使用して5秒後に自動的にスライドし、保持している2つの画像の間を行き来します。ユーザーはボタンを手動でクリックしてスライドを作成することもできます（トランジションを使用）。 2つの画像のdivは同じ長さです。私の問題は、スライドショーが自動的に2番目の画像にスライドし、ユーザーがその2番目の画像のボタンをクリックすると、画像がない空のスペースに再びスライドすることです。その2番目の画像に自動的にスライドした後、2番目の画像ボタンをクリックして再度スライドするのを止めるにはどうしたらいいですか？

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>