画像を2列に並べた自動スライドショーを作成するには？

Question

2列で画像スライドショーをしようとしましたが、最初の列の画像が2秒後に変更され、2列目の画像が4秒後に変更されます。そして、私は1つの解決策を試してみましたが（下のコードを参照）、最初の列のイメージは変更されていませんが、2番目の列のイメージは変化しているため動作しません。ここで

<script> 
 
    var myIndex = 0; 
 
    carousel(); 
 

 
    function carousel() { 
 
     var i; 
 
     var x = document.getElementsByClassName("home-image-left"); 
 
     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, 2000); // Change image every 2 seconds 
 
} 
 
</script> 
 

 
<script> 
 
    var myIndex = 0; 
 
    carousel(); 
 

 
    function carousel() { 
 
     var i; 
 
     var x = document.getElementsByClassName("home-image-right"); 
 
     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>

.home-image-left { 
 
    display: none; 
 
    padding-left: 20px; 
 
    width: 546px; 
 
    height: 749px; 
 
} 
 

 
.home-image-right { 
 
    padding-right: 13px; 
 
    display: none; 
 
    width: 546px; 
 
    height: 749px; 
 
} 
 
Here

<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-6"> 
 
     <img class="home-image-left" src="gfx/home-image-left.jpg"> 
 
     <img class="home-image-left" src="gfx/home-image-left-2.jpg"> 
 
     <img class="home-image-left" src="gfx/home-image-left-3.jpg"> 
 
    </div> 
 
    <div class="col-sm-6"> 
 
     <img class="home-image-right" src="gfx/home-image-right.jpg"> 
 
     <img class="home-image-right" src="gfx/home-image-right-2.jpg"> 
 
     <img class="home-image-right" src="gfx/home-image-right-3.jpg"> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

で見てくださいあなたのjavascriptのコードを更新する必要がありますそれを両方のために働かせる彼はどのように私は、コードを持っている必要があることを...以下のように

 var myIndex = 1; 
 
     carousel1(); 
 

 
     function carousel1() { 
 
       var i; 
 
       var x = document.getElementsByClassName("home-image-left"); 
 
       for (i = 0; i < x.length; i++) { 
 
       x[i].style.display = "none"; 
 
       } 
 
       window.myIndex++; 
 
       if (window.myIndex > x.length){ 
 
        window.myIndex = 1; 
 
       } 
 
       var newindex = parseInt(window.myIndex-1); 
 
       Object.keys(x).forEach(function (key) { 
 
       if(key == newindex) { 
 
        x[key].style.display = "block"; 
 
       } 
 
       }); 
 
       setTimeout(carousel1, 2000); // Change image every 2 seconds 
 
     } 
 

 
      var secondIndex = 0; 
 
      carousel2(); 
 

 
      function carousel2() { 
 
       var i; 
 
       var x = document.getElementsByClassName("home-image-right"); 
 
       for (i = 0; i < x.length; i++) { 
 
       x[i].style.display = "none"; 
 
       } 
 
       window.secondIndex++; 
 
       if (window.secondIndex > x.length) {window.secondIndex = 1} 
 
       var newindex = parseInt(window.secondIndex-1); 
 
       Object.keys(x).forEach(function (key) { 
 
       if(key == newindex) { 
 
        x[key].style.display = "block"; 
 
       } 
 
       }); 
 
       setTimeout(carousel2, 4000); // Change image every 4 seconds 
 
      }

Answer 2

私はjqueryのを使用せずに行っている、添付のDEMO

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="row"> 
 
     <div class="col-md-6 col-xs-6"> 
 
      <div id="carousel-example-generic" class="carousel slide" data-interval="2000" data-ride="carousel"> 
 
       <!-- Indicators --> 
 
       <ol class="carousel-indicators"> 
 
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
 
        <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
 
        <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
 
       </ol> 
 

 
       <!-- Wrapper for slides --> 
 
       <div class="carousel-inner" role="listbox"> 
 
        <div class="item active"> 
 
         <img src="http://www.mixologyeventstyling.com/files/resized/458397/cropped/1140;550;3634fe4ba4fb02c728ce6d34abfe58e12e5805d8.jpg" alt="1"> 
 
         <div class="carousel-caption"> 
 
          1 
 
         </div> 
 
        </div> 
 
        <div class="item"> 
 
         <img src="http://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg" alt="2"> 
 
         <div class="carousel-caption"> 
 
          2 
 
         </div> 
 
        </div> 
 
        <div class="item"> 
 
         <img src="http://feelgrafix.com/data/images/images-1.jpg" alt="3"> 
 
         <div class="carousel-caption"> 
 
          3 
 
         </div> 
 
        </div> 
 
       </div> 
 

 
       <!-- Controls --> 
 
       <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
 
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
 
        <span class="sr-only">Previous</span> 
 
       </a> 
 
       <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
 
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
        <span class="sr-only">Next</span> 
 
       </a> 
 
      </div> 
 

 
     </div> 
 
    <div class="col-md-6 col-xs-6"> 
 
      <div id="carousel-example-generic" class="carousel slide" data-interval="4000" data-ride="carousel"> 
 
       <!-- Indicators --> 
 
       <ol class="carousel-indicators"> 
 
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
 
        <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
 
        <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
 
       </ol> 
 

 
       <!-- Wrapper for slides --> 
 
       <div class="carousel-inner" role="listbox"> 
 
        <div class="item active"> 
 
         <img src="http://www.mixologyeventstyling.com/files/resized/458397/cropped/1140;550;3634fe4ba4fb02c728ce6d34abfe58e12e5805d8.jpg" alt="1"> 
 
         <div class="carousel-caption"> 
 
          1 
 
         </div> 
 
        </div> 
 
        <div class="item"> 
 
         <img src="http://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg" alt="2"> 
 
         <div class="carousel-caption"> 
 
          2 
 
         </div> 
 
        </div> 
 
        <div class="item"> 
 
         <img src="http://feelgrafix.com/data/images/images-1.jpg" alt="3"> 
 
         <div class="carousel-caption"> 
 
          3 
 
         </div> 
 
        </div> 
 
       </div> 
 

 
       <!-- Controls --> 
 
       <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
 
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
 
        <span class="sr-only">Previous</span> 
 
       </a> 
 
       <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
 
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
        <span class="sr-only">Next</span> 
 
       </a> 
 
      </div> 
 

 
     </div> 
 
     
 
     
 
     </div>