在html中向左移动幻灯片

Question

在我的网站上，我添加了一个幻灯片放映，它工作。但是我的幻灯片在左边我想把整个幻灯片移动到我想要的位置。我该怎么做??我只把幻灯片的代码放在底部。我一直在使用Html和Css。

<div class="SlideShow" style="max-width:500px">
  <img class="mySlides" src="Image1.jpg" style="width:100%"/>
  <img class="mySlides" src="Image2.jpg" style="width:100%">
  <a class="display-left" onclick="plusDivs(-1)">&#10094;</a>
<a class="display-right" onclick="plusDivs(+1)">&#10095;</a>
</div>

<script>
var myIndex = 0;
carousel();
function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";
    }
    myIndex++;
    if (myIndex > x.length) {myIndex = 1}
    x[myIndex-1].style.display = "block";
    setTimeout(carousel, 4000); // Change image every 4 seconds
}
</script>
</style>

Answer 1

.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;
        }

<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="http://labs.qnimate.com/slider/1.jpg" class="slider-image" />
            <img src="http://labs.qnimate.com/slider/2.jpg" class="slider-image" />
            <img src="http://labs.qnimate.com/slider/3.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>

#outerbox{
	width:700px;
	overflow:hidden;
	
	}
#sliderbox{
	position:relative;
	width:2800px;
	animation:animation 20s infinite;
	
	}
#sliderbox img{
	float:left;
	} 
@keyframes animation{
	0%{
		left:0px;
		}
	100%{
		left:-2800px;	
			}
		}

<div id="outerbox">
<div id="sliderbox">
<img src="http://labs.qnimate.com/slider/1.jpg"/> 
<img src="http://labs.qnimate.com/slider/2.jpg"/>
<img src="http://labs.qnimate.com/slider/3.jpg"/>