画像スライダーに関する不具合html CSS

Question

さんが画像をスライダーにしましたが、最初のクリックではアニメーションがトリガーされません。ターゲットにジャンプするだけです。スムーズに絵を変えたいですが、ファーはただ飛びます。 私の質問をよりよく理解するには、 http://labs.qnimate.com/slider/#slider-image-3に行き、画像間のアニメーションに注意してください。ここ

はHTMLコードです：

<div class="slider-holder"> 
    <span id="slider-image-1"></span> 
    <span id="slider-image-2"></span> 
    <span id="slider-image-3"></span> 
    <div class="image-holder"> 
     <img src="images/slide1.jpg" class="slider-image" /> 
     <img src="images/slide2.jpg" class="slider-image" /> 
     <img src="images/slide3.jpg" class="slider-image" /> 
    </div> 
    <div class="button-holder"> 
     <a href="#slider-image-1" class="slider-change"></a> 
     <a href="#slider-image-2" class="slider-change"></a> 
     <a href="#slider-image-3" class="slider-change"></a> 
    </div> 
</div> 

、ここでは、CSSです：

.slider-holder 
    { 
     width: 800px; 
     height: 400px; 
     background-color: yellow; 
     margin-left: auto; 
     margin-right: auto; 
     margin-top: 0px; 
     text-align: center; 
     overflow: hidden; 
    } 

    .image-holder 
    { 
     width: 2400px; 
     background-color: red; 
     height: 400px; 
     clear: both; 
     position: relative; 

     -webkit-transition: left 2s; 
     -moz-transition: left 2s; 
     -o-transition: left 2s; 
     transition: left 2s; 
    } 

    .slider-image 
    { 
     float: left; 
     margin: 0px; 
     padding: 0px; 
     position: relative; 
    } 

    #slider-image-1:target ~ .image-holder 
    { 
     left: 0px; 
    } 

    #slider-image-2:target ~ .image-holder 
    { 
     left: -800px; 
    } 

    #slider-image-3:target ~ .image-holder 
    { 
     left: -1600px; 
    } 

    .button-holder 
    { 
     position: relative; 
     top: -20px; 
    } 

    .slider-change 
    { 
     display: inline-block; 
     height: 10px; 
     width: 10px; 
     border-radius: 5px; 
     background-color: brown; 
    } 

それを修正する方法はありますか？ 私を助けてくれた皆さんより。

Answer 1

変更するには、このビットを：ここ

#slider-image-1 ~ .image-holder { 
    left: 0px; 
} 

Answer 2

に

#slider-image-1:target ~ .image-holder { 
    left: 0px; 
} 

は、画像の幅と第2の画像の幅を加え与えられます。画像の幅を確認し、画像ごとに変更します。デモが正常に動作している