Bootstrap 4 несколько элементов предыдущего коллапса

Sebastiano спросил: 26 декабря 2017 в 08:15 в: css

Я добавил загрузочную карусель и изменил отображение нескольких элементов, хотя у меня проблемы.

Когда я нажимаю на следующий логотип, все в порядке, но когда я нажимаю на предыдущий логотип, появляются несколько логотипов все вместе, чтобы исправить себя, что происходит? Как я могу исправить эту проблему?

Здесь ссылка на проект, живая страница и полное репо

https://sebalaini.github.io/portfolio_test/

https://github.com/sebalaini/portfolio_test

Здесь Codepen https://codepen.io/sebalaini/pen/wpRVYL и код:

  <div id="carousel" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#carousel" data-slide-to="0" class="active"></li>
        <li data-target="#carousel" data-slide-to="4"></li>
        <li data-target="#carousel" data-slide-to="8"></li>
        <li data-target="#carousel" data-slide-to="10"></li>
      </ol>      <div class="carousel-inner">
        <div class="carousel-item active">
          <img class="d-block" src="https://wallpapercave.com/wp/ci1BoK6.jpg" alt="First slide">
          <div class="carousel-caption d-block">
            <h4>HTML</h4>
          </div>
        </div>        <div class="carousel-item">
          <img class="d-block" src="https://wallpapercave.com/wp/ci1BoK6.jpg" alt="Second slide">
          <div class="carousel-caption d-block">
            <h4>CSS</h4>
          </div>
        </div>        <div class="carousel-item">
          <img class="d-block" src="https://wallpapercave.com/wp/ci1BoK6.jpg" alt="Third slide">
          <div class="carousel-caption d-block">
            <h4>SASS</h4>
          </div>
        </div>        <div class="carousel-item">
          <img class="d-block" src="https://wallpapercave.com/wp/ci1BoK6.jpg" alt="Third slide">
          <div class="carousel-caption d-block">
            <h4>Javascript</h4>
          </div>
        </div>        <div class="carousel-item">
          <img class="d-block" src="https://wallpapercave.com/wp/ci1BoK6.jpg" alt="First slide">
          <div class="carousel-caption d-block">
            <h4>Jquery</h4>
          </div>
        </div>        <div class="carousel-item">
          <img class="d-block" src="https://wallpapercave.com/wp/ci1BoK6.jpg" alt="Second slide">
          <div class="carousel-caption d-block">
            <h4>React</h4>
          </div>
        </div>        <div class="carousel-item">
          <img class="d-block" src="https://wallpapercave.com/wp/ci1BoK6.jpg" alt="First slide">
          <div class="carousel-caption d-block">
            <h4>webpack</h4>
          </div>
        </div>        <div class="carousel-item">
          <img class="d-block" src="https://wallpapercave.com/wp/ci1BoK6.jpg" alt="Third slide">
          <div class="carousel-caption d-block">
            <h4>NPM</h4>
          </div>
        </div>      </div>      <a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>

0 ответов