Html 断开图像滑块

我为我的公司创建了一个新网站，并制作了自己的滑块。滑块可以工作，但图像显示不正确： 有没有办法轻松解决这个问题？ 源代码：（大多数代码对每个图像重复）

我只想知道如何在正确的位置获取图像，在滑块到达之前隐藏在页面中。

---

如果它更容易，并且有人可以提供一个工作代码而不是修复此代码，那将非常感谢。

尝试将此代码添加到主div，它在800x400图像中工作得更好：

<div class="slider-holder">

    @charset "utf-8";
/* CSS Document */

.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;
        }
        
        #slider-image-4:target ~ .image-holder
        {
            left: -2400px;
        }
        
        #slider-image-5:target ~ .image-holder
        {
            left: -3200px;
        }
        
        #slider-image-6:target ~ .image-holder
        {
            left: -4000px;
        }
        
        #slider-image-7:target ~ .image-holder
        {
            left: -4800px;
        }
        
        #slider-image-8:target ~ .image-holder
        {
            left: -5600px;
        }
        
        #slider-image-9:target ~ .image-holder
        {
            left: -6400px;
        }
        
        .button-holder
        {
            position: relative;
            top: -20px;
        }
        
        .slider-change
        {
            display: inline-block;
            height: 10px;
            width: 10px;
            border-radius: 5px;
            background-color: brown;
        }

<div class="slider-holder">