Как сделать автоматическое слайд-шоу с изображениями в двух колонках?

Я пытаюсь сделать слайд-шоу изображений в двух столбцах, но я хочу, чтобы изображение в первом столбце изменилось через 2 с, и это изображение во втором столбце будет изменено через 4 с. И я пробую одно решение (см. Ниже в коде), но не работает, потому что изображения в первом столбце не меняются, но изображения во втором столбце меняются.

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

jquery,html,css,twitter-bootstrap,

1

Ответов: 2


0 принят

Вам нужно обновить свой 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
          }


0

Здесь я сделал, не используя 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>

JQuery, HTML, CSS, твиттер-самозагрузки,
Похожие вопросы