슬라이드 쇼를 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{ 
 
\t width:700px; 
 
\t overflow:hidden; 
 
\t 
 
\t } 
 
#sliderbox{ 
 
\t position:relative; 
 
\t width:2800px; 
 
\t animation:animation 20s infinite; 
 
\t 
 
\t } 
 
#sliderbox img{ 
 
\t float:left; 
 
\t } 
 
@keyframes animation{ 
 
\t 0%{ 
 
\t \t left:0px; 
 
\t \t } 
 
\t 100%{ 
 
\t \t left:-2800px; \t 
 
\t \t \t } 
 
\t \t }

<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"/>