3列幻灯片

3列幻灯片

关注
发信
关注(28)粉丝(399)

javascript - 中间有3列幻灯片的图像时删除标签

$('#myCarousel').carousel({
  interval: 2000
})

$('.carousel .item').each(function() {
  var next = $(this).next();
  if (!next.length) {
    next = $(this).siblings(':first');
  }
  next.children(':first-child').clone().appendTo($(this));

  if (next.next().length > 0) {
    next.next().children(':first-child').clone().appendTo($(this));
  } else {
    $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
  }
});

clearA();

function clearA() {
  var x = document.getElementsByClassName("active");
  var list = x[0].getElementsByClassName("overlay")[0];
  list.style.display = "none";

}

/* override position and transform in 3.3.x */

.carousel-inner .item.left.active {
  transform: translateX(-33%);
}

.carousel-inner .item.right.active {
  transform: translateX(33%);
}

.carousel-inner .item.next {
  transform: translateX(33%)
}

.carousel-inner .item.prev {
  transform: translateX(-33%)
}

.carousel-inner .item.right,
.carousel-inner .item.left {
  transform: translateX(0);
}

.carousel-control.left,
.carousel-control.right {
  background-image: none;
}

.overlay {
  width: 100%;
  height: 100%;
  background-color: rgba(27, 26, 29, 0.6);
  opacity: 1;
  bottom: 0;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
}

.overlay p {
  text-align: center;
  color: white;
}

.overlay hr {
  width: 20%;
}

.col3 {
  float: left;
  display: block;
  height: 200px;
  width: 33.33%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center fixed;
}

.col-md-4 {
  padding-right: 0px;
  padding-left: 0px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <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/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


</head>

<body>

  <div class="col-md-6 col-md-offset-3">
    <div class="carousel slide" id="myCarousel">
      <div class="carousel-inner">
        <div class="item">
          <div class="col-md-4 col3" style="background-image: url(img_nature_wide.jpg);">
            <a class="overlay" href="#">
              <p>Signature</p>
              <hr>
              <p>text here</p>
            </a>
          </div>
        </div>
        <div class="item active">
          <div class="col-md-4 col3" style="background-image: url(img_fjords_wide.jpg);">
            <a class="overlay" href="#">
              <p>Signature</p>
              <hr>
              <p>ext here</p>
            </a>
          </div>
        </div>
        <div class="item">
          <div class="col-md-4 col3" style="background-image: url(img_mountains_wide.jpg);">
            <a class="overlay" href="#">
              <p>Signature</p>
              <hr>
              <p>text here</p>
            </a>
          </div>
        </div>
      </div>
      <a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
      <a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
    </div>
  </div>



</body>

</html>





大家好，我在创建3列幻灯片时遇到问题。我已经创建了3列幻灯片。现在，我希望中间的图像仅显示图像，而不显示其中的内容。我上面的脚本请看一下并给我解决方案。非常感谢。
enter image description here

最佳答案

只需添加此CSS：

.active div:nth-child(2) .overlay > *{
  display: none;
}





$('#myCarousel').carousel({
  interval: 2000
})

$('.carousel .item').each(function() {
  var next = $(this).next();
  if (!next.length) {
    next = $(this).siblings(':first');
  }
  next.children(':first-child').clone().appendTo($(this));

  if (next.next().length > 0) {
    next.next().children(':first-child').clone().appendTo($(this));
  } else {
    $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
  }
});

clearA();

function clearA() {
  var x = document.getElementsByClassName("active");
  var list = x[0].getElementsByClassName("overlay")[0];
  list.style.display = "none";

}

/* override position and transform in 3.3.x */

.active div:nth-child(2) .overlay>* {
  display: none;
}

.carousel-inner .item.left.active {
  transform: translateX(-33%);
}

.carousel-inner .item.right.active {
  transform: translateX(33%);
}

.carousel-inner .item.next {
  transform: translateX(33%)
}

.carousel-inner .item.prev {
  transform: translateX(-33%)
}

.carousel-inner .item.right,
.carousel-inner .item.left {
  transform: translateX(0);
}

.carousel-control.left,
.carousel-control.right {
  background-image: none;
}

.overlay {
  width: 100%;
  height: 100%;
  background-color: rgba(27, 26, 29, 0.6);
  opacity: 1;
  bottom: 0;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
}

.overlay p {
  text-align: center;
  color: white;
}

.overlay hr {
  width: 20%;
}

.col3 {
  float: left;
  display: block;
  height: 200px;
  width: 33.33%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center fixed;
}

.col-md-4 {
  padding-right: 0px;
  padding-left: 0px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <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/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


</head>

<body>

  <div class="col-md-6 col-md-offset-3">
    <div class="carousel slide" id="myCarousel">
      <div class="carousel-inner">
        <div class="item">
          <div class="col-md-4 col3" style="background-image: url(img_nature_wide.jpg);">
            <a class="overlay" href="#">
              <p>Signature</p>
              <hr>
              <p>text here</p>
            </a>
          </div>
        </div>
        <div class="item active">
          <div class="col-md-4 col3" style="background-image: url(img_fjords_wide.jpg);">
            <a class="overlay" href="#">
              <p>Signature</p>
              <hr>
              <p>ext here</p>
            </a>
          </div>
        </div>
        <div class="item">
          <div class="col-md-4 col3" style="background-image: url(img_mountains_wide.jpg);">
            <a class="overlay" href="#">
              <p>Signature</p>
              <hr>
              <p>text here</p>
            </a>
          </div>
        </div>
      </div>
      <a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
      <a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
    </div>
  </div>



</body>

</html>

10-02 20:09
Powered by LMLPHP ©2024 3列幻灯片 0.048403