页面上的第二个轮播

时间:2019-01-19 08:54:34

标签: html css twitter-bootstrap

我正在尝试在页面上创建第二个引导轮播。但是我发现问题。轮播本身在等待时确实会移动,但是轮播指示器(4个点)在轮播项目周围移动时不起作用。有人可以帮我吗?

<div class="testimonialblok">
  <div id="carouselExampleIndicators" class="testimonialcarousel carousel slide" data-ride="testimonialCarousel">

    <div class="carousel-inner">

      <div class="carousel-item active">
        <div class="row">
          <div class="col-7"><img class="d-block testimonialfoto" src="#" alt="First slide"></div>
          <div class="col-5 testimonialtextcarousel">
            <h1 class="montserratblack textblue">Dummy text</h1>
            <span class="testimonialundertext"><img class="testimonialiconundertext" src="#"> Dummy text</span>


            <p class="testimonialtext opensanssemibold textblue">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temporut labore.
            </p>

            <p class="testimonialtext opensanssemibold textgrey">
              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
            </p>

            <button type="button" class="btn btn-danger montserratregular textuppercase btnonzevoordelen">Dummy text</button>


          </div>
        </div>
      </div>

      <div class="carousel-item">
        <div class="row">
          <div class="col-7"><img class="d-block testimonialfoto" src="#" alt="First slide"></div>
          <div class="col-5 testimonialtextcarousel">
            <h1 class="montserratblack textblue">Dummy text</h1>
            <span class="testimonialundertext"><img class="testimonialiconundertext" src="#"> Dummy text</span>


            <p class="testimonialtext opensanssemibold textblue">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temporut labore.
            </p>

            <p class="testimonialtext opensanssemibold textgrey">
              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
            </p>

            <button type="button" class="btn btn-danger montserratregular textuppercase btnonzevoordelen">Dummy text</button>



          </div>
        </div>
      </div>

      <div class="carousel-item">
        <div class="row">
          <div class="col-7"><img class="d-block testimonialfoto" src="#" alt="First slide"></div>
          <div class="col-5 testimonialtextcarousel">
            <h1 class="montserratblack textblue">Dummy text</h1>
            <span class="testimonialundertext"><img class="testimonialiconundertext" src="#"> Dummy text</span>


            <p class="testimonialtext opensanssemibold textblue">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temporut labore.
            </p>

            <p class="testimonialtext opensanssemibold textgrey">
              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
            </p>

            <button type="button" class="btn btn-danger montserratregular textuppercase btnonzevoordelen">Dummy text</button>



          </div>
        </div>
      </div>

      <div class="carousel-item">
        <div class="row">
          <div class="col-7"><img class="d-block testimonialfoto" src="#" alt="First slide"></div>
          <div class="col-5 testimonialtextcarousel">
            <h1 class="montserratblack textblue">Dummy text</h1>
            <span class="testimonialundertext"><img class="testimonialiconundertext" src="#"> Dummy text</span>


            <p class="testimonialtext opensanssemibold textblue">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temporut labore.
            </p>

            <p class="testimonialtext opensanssemibold textgrey">
              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
            </p>

            <button type="button" class="btn btn-danger montserratregular textuppercase btnonzevoordelen">Dummy text</button>



          </div>
        </div>
      </div>

      <div class="carousel-item">
        <div class="row">
          <div class="col-7"><img class="d-block testimonialfoto" src="#" alt="First slide"></div>
          <div class="col-5 testimonialtextcarousel">
            <h1 class="montserratblack textblue">Dummy text</h1>
            <span class="testimonialundertext"><img class="testimonialiconundertext" src="#"> Dummy text</span>


            <p class="testimonialtext opensanssemibold textblue">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temporut labore.
            </p>

            <p class="testimonialtext opensanssemibold textgrey">
              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
            </p>

            <button type="button" class="btn btn-danger montserratregular textuppercase btnonzevoordelen">Dummy text</button>



          </div>
        </div>
      </div>

      <div class="carousel-item">
        <div class="row">
          <div class="col-7"><img class="d-block testimonialfoto" src="#" alt="First slide"></div>
          <div class="col-5 testimonialtextcarousel">
            <h1 class="montserratblack textblue">Dummy text</h1>
            <span class="testimonialundertext"><img class="testimonialiconundertext" src="#"> Dummy text</span>


            <p class="testimonialtext opensanssemibold textblue">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temporut labore.
            </p>

            <p class="testimonialtext opensanssemibold textgrey">
              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
            </p>

            <button type="button" class="btn btn-danger montserratregular textuppercase btnonzevoordelen">Dummy text</button>



          </div>
        </div>
      </div>

      <div class="carousel-item">
        <div class="row">
          <div class="col-7"><img class="d-block testimonialfoto" src="#" alt="First slide"></div>
          <div class="col-5 testimonialtextcarousel">
            <h1 class="montserratblack textblue">Dummy text</h1>
            <span class="testimonialundertext"><img class="testimonialiconundertext" src="#"> Dummy text</span>


            <p class="testimonialtext opensanssemibold textblue">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temporut labore.
            </p>

            <p class="testimonialtext opensanssemibold textgrey">
              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
            </p>

            <button type="button" class="btn btn-danger montserratregular textuppercase btnonzevoordelen">Dummy text</button>



          </div>
        </div>
      </div>



    </div>
  </div>

  <ol class="carousel-indicators testimonialindicators">
    <li data-target="#testimonialIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#testimonialIndicators" data-slide-to="1"></li>
    <li data-target="#testimonialIndicators" data-slide-to="2"></li>
    <li data-target="#testimonialIndicators" data-slide-to="3"></li>
  </ol>

  <a class="carousel-control left" href="#testimonialIndicators" 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 right" href="#testimonialIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>

 

这是我的第二个滑块。我还有一个标题滑块,它包含引导滑块的所有标准值,我在那里没有进行任何更改,并且工作正常。我试图将其重置为blanc,但是当使用相同的类时,我的指标和内容将无法正常工作。

1 个答案:

答案 0 :(得分:0)

轮播指标中数据目标的

值必须与轮播ID相同,在这种情况下,应为data-target =“#carouselExampleIndicators”