显示2个胡萝卜，不显示图像混乱

时间：2019-08-09 21:00:24

标签： html css

我只有Html和Css制作的这种胡萝卜，如果单独使用它效果很好，但是如果我在同一页面上添加相同的胡萝卜，在滑动图像时会造成混乱，我无法找出问题出在哪里。

我尝试将第二个文件夹用于第二个卡塞尔，但仍然是相同的问题。感谢您的帮助。

.carousel-inner {
    position: relative;
    overflow: hidden;
    width: 200px;
  height: 200px;
}

.carousel-open:checked + .carousel-item {
    position: static;
    opacity: 100;
}

.carousel-item {
    position: absolute;
    opacity: 0;
    -webkit-transition: opacity 0.6s ease-out;
    transition: opacity 0.6s ease-out;
}

.carousel-item img {
    display: block;
    height: auto;
    max-width: 200px;
height:200px
}

.carousel-control {
    background: rgba(0, 0, 0, 0.28);
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: none;
    font-size: 40px;
    height: 40px;
    line-height: 35px;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    cursor: pointer;
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    text-align: center;
    width: 40px;
    z-index: 10;
    
}



.carousel-control.prev {
    left: 2%;
}

.carousel-control.next {
    right: 2%;
}

.carousel-control:hover {
    background: rgba(0, 0, 0, 0.8);
    color: #aaaaaa;
}

#carousel-1:checked ~ .control-1,
#carousel-2:checked ~ .control-2,
#carousel-3:checked ~ .control-3 {
    display: block;
}

.carousel-indicators {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: 2%;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 10;
}

.carousel-indicators li {
    display: inline-block;
    margin: 0 5px;
}

.carousel-bullet {
    color: #fff;
    cursor: pointer;
    display: block;
    font-size: 35px;
}

.carousel-bullet:hover {
    color: #aaaaaa;
}

#carousel-1:checked ~ .control-1 ~ .carousel-indicators li:nth-child(1) .carousel-bullet,
#carousel-2:checked ~ .control-2 ~ .carousel-indicators li:nth-child(2) .carousel-bullet,
#carousel-3:checked ~ .control-3 ~ .carousel-indicators li:nth-child(3) .carousel-bullet {
    color: #428bca;
}

#title {
    width: 100%;
    position: absolute;
    padding: 0px;
    margin: 0px auto;
    text-align: center;
    font-size: 27px;
    color: rgba(255, 255, 255, 1);
    font-family: 'Open Sans', sans-serif;
    z-index: 9999;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.33), -1px 0px 2px rgba(255, 255, 255, 0);
}
<link rel="stylesheet" href="style_caroussel.css" >


    <div class="carousel-inner">
        <input class="carousel-open" type="radio" id="carousel-1" name="carousel" aria-hidden="true" hidden="" checked="checked">
        <div class="carousel-item">
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </div>
        <input class="carousel-open" type="radio" id="carousel-2" name="carousel" aria-hidden="true" hidden="">
        <div class="carousel-item">
            <img src="https://img.lemde.fr/2019/04/22/0/191/1619/1079/688/0/60/0/e39da8d_2FIads9h8wB-0SwSgxVaVWsp.jpg">
        </div>
        <input class="carousel-open" type="radio" id="carousel-3" name="carousel" aria-hidden="true" hidden="">
        <div class="carousel-item">
            <img src="https://image.shutterstock.com/image-photo/white-transparent-leaf-on-mirror-260nw-1029171697.jpg">
        </div>
        <label for="carousel-3" class="carousel-control prev control-1">‹</label>
        <label for="carousel-2" class="carousel-control next control-1">›</label>
        <label for="carousel-1" class="carousel-control prev control-2">‹</label>
        <label for="carousel-3" class="carousel-control next control-2">›</label>
        <label for="carousel-2" class="carousel-control prev control-3">‹</label>
        <label for="carousel-1" class="carousel-control next control-3">›</label>
        <ol class="carousel-indicators">
            <li>
                <label for="carousel-1" class="carousel-bullet">•</label>
            </li>
            <li>
                <label for="carousel-2" class="carousel-bullet">•</label>
            </li>
            <li>
                <label for="carousel-3" class="carousel-bullet">•</label>
            </li>
        </ol>
    </div>
</div>

<div class="carousel">
    <div class="carousel-inner">
        <input class="carousel-open" type="radio" id="carousel-1" name="carousel" aria-hidden="true" hidden="" checked="checked">
        <div class="carousel-item">
            <img src="user__002/6.jpg">
        </div>
        <input class="carousel-open" type="radio" id="carousel-2" name="carousel" aria-hidden="true" hidden="">
        <div class="carousel-item">
            <img src="user__002/7.jpg">
        </div>
        <input class="carousel-open" type="radio" id="carousel-3" name="carousel" aria-hidden="true" hidden="">
        <div class="carousel-item">
            <img src="user__002/8.jpg">
        </div>
        <label for="carousel-3" class="carousel-control prev control-1">‹</label>
        <label for="carousel-2" class="carousel-control next control-1">›</label>
        <label for="carousel-1" class="carousel-control prev control-2">‹</label>
        <label for="carousel-3" class="carousel-control next control-2">›</label>
        <label for="carousel-2" class="carousel-control prev control-3">‹</label>
        <label for="carousel-1" class="carousel-control next control-3">›</label>
        <ol class="carousel-indicators">
            <li>
                <label for="carousel-1" class="carousel-bullet">•</label>
            </li>
            <li>
                <label for="carousel-2" class="carousel-bullet">•</label>
            </li>
            <li>
                <label for="carousel-3" class="carousel-bullet">•</label>
            </li>
        </ol>
    </div>
</div>

1 个答案:

答案 0 :(得分：2)

编辑：

自从您发表评论以来，我改变了方式。
我保留Carousel-1-2-3，但给它们加上前缀。 aCarousel-1 .. etc（并且不要触摸control-1，-2，-3）
反过来，这允许我在CSS中选择所有以“ id”结尾的input[id$="Carousel-1"]:checked~.control-1, input[id$="Carousel-2"]:checked~.control-2, input[id$="Carousel-3"]:checked~.control-3 { display: block; user-select: none; } input[id$="Carousel-1"]:checked~.control-1~.carousel-indicators li:nth-child(1) .carousel-bullet, input[id$="Carousel-2"]:checked~.control-2~.carousel-indicators li:nth-child(2) .carousel-bullet, input[id$="Carousel-3"]:checked~.control-3~.carousel-indicators li:nth-child(3) .carousel-bullet { color: #428bca; } 等输入：

.carousel-inner {
  position: relative;
  overflow: hidden;
  width: 200px;
  height: 200px;
}

.carousel-open:checked+.carousel-item {
  position: static;
  opacity: 1;
}

.carousel-item {
  position: absolute;
  opacity: 0;
  -webkit-transition: opacity 0.6s ease-out;
  transition: opacity 0.6s ease-out;
}

.carousel-item img {
  display: block;
  height: auto;
  max-width: 200px;
  height: 200px
}

.carousel-control {
  background: rgba(0, 0, 0, 0.28);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: none;
  font-size: 40px;
  height: 40px;
  line-height: 35px;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  cursor: pointer;
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  text-align: center;
  width: 40px;
  z-index: 10;
}

.carousel-control.prev {
  left: 2%;
}

.carousel-control.next {
  right: 2%;
}

.carousel-control:hover {
  background: rgba(0, 0, 0, 0.8);
  color: #aaaaaa;
}

input[id$="Carousel-1"]:checked~.control-1,
input[id$="Carousel-2"]:checked~.control-2,
input[id$="Carousel-3"]:checked~.control-3 {
  display: block;
  user-select: none;
}

.carousel-indicators {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  bottom: 2%;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 10;
}

.carousel-indicators li {
  display: inline-block;
  margin: 0 5px;
}

.carousel-bullet {
  color: #fff;
  cursor: pointer;
  display: block;
  font-size: 35px;
}

.carousel-bullet:hover {
  color: #aaaaaa;
}

input[id$="Carousel-1"]:checked~.control-1~.carousel-indicators li:nth-child(1) .carousel-bullet,
input[id$="Carousel-2"]:checked~.control-2~.carousel-indicators li:nth-child(2) .carousel-bullet,
input[id$="Carousel-3"]:checked~.control-3~.carousel-indicators li:nth-child(3) .carousel-bullet {
  color: #428bca;
}

#title {
  width: 100%;
  position: absolute;
  padding: 0px;
  margin: 0px auto;
  text-align: center;
  font-size: 27px;
  color: rgba(255, 255, 255, 1);
  font-family: 'Open Sans', sans-serif;
  z-index: 9999;
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.33), -1px 0px 2px rgba(255, 255, 255, 0);
}

这样，您将不需要在CSS中为新轮播使用新的/重复的规则。这些将适用于每个轮播。

<div class="carousel-inner">
  <input class="carousel-open" type="radio" id="aCarousel-1" name="aCarousel" aria-hidden="true" hidden="" checked="checked">
  <div class="carousel-item">
    <img src="https://www.w3schools.com/w3css/img_lights.jpg">
  </div>
  <input class="carousel-open" type="radio" id="aCarousel-2" name="aCarousel" aria-hidden="true" hidden="">
  <div class="carousel-item">
    <img src="https://img.lemde.fr/2019/04/22/0/191/1619/1079/688/0/60/0/e39da8d_2FIads9h8wB-0SwSgxVaVWsp.jpg">
  </div>
  <input class="carousel-open" type="radio" id="aCarousel-3" name="aCarousel" aria-hidden="true" hidden="">
  <div class="carousel-item">
    <img src="https://image.shutterstock.com/image-photo/white-transparent-leaf-on-mirror-260nw-1029171697.jpg">
  </div>
  <label for="aCarousel-3" class="carousel-control prev control-1">‹</label>
  <label for="aCarousel-2" class="carousel-control next control-1">›</label>
  <label for="aCarousel-1" class="carousel-control prev control-2">‹</label>
  <label for="aCarousel-3" class="carousel-control next control-2">›</label>
  <label for="aCarousel-2" class="carousel-control prev control-3">‹</label>
  <label for="aCarousel-1" class="carousel-control next control-3">›</label>
  <ol class="carousel-indicators">
    <li>
      <label for="aCarousel-1" class="carousel-bullet">•</label>
    </li>
    <li>
      <label for="aCarousel-2" class="carousel-bullet">•</label>
    </li>
    <li>
      <label for="aCarousel-3" class="carousel-bullet">•</label>
    </li>
  </ol>
</div>
</div>

<div class="carousel">
  <div class="carousel-inner">
    <input class="carousel-open" type="radio" id="bCarousel-1" name="bCarousel" aria-hidden="true" hidden="" checked="checked">
    <div class="carousel-item">
      <img src='https://picsum.photos/id/133/200/200'>
    </div>
    <input class="carousel-open" type="radio" id="bCarousel-2" name="bCarousel" aria-hidden="true" hidden="">
    <div class="carousel-item">
      <img src='https://picsum.photos/id/134/200/200'>
    </div>
    <input class="carousel-open" type="radio" id="bCarousel-3" name="bCarousel" aria-hidden="true" hidden="">
    <div class="carousel-item">
      <img src='https://picsum.photos/id/135/200/200'>
    </div>
    <label for="bCarousel-3" class="carousel-control prev control-1">‹</label>
    <label for="bCarousel-2" class="carousel-control next control-1">›</label>
    <label for="bCarousel-1" class="carousel-control prev control-2">‹</label>
    <label for="bCarousel-3" class="carousel-control next control-2">›</label>
    <label for="bCarousel-2" class="carousel-control prev control-3">‹</label>
    <label for="bCarousel-1" class="carousel-control next control-3">›</label>
    <ol class="carousel-indicators">
      <li>
        <label for="bCarousel-1" class="carousel-bullet">•</label>
      </li>
      <li>
        <label for="bCarousel-2" class="carousel-bullet">•</label>
      </li>
      <li>
        <label for="bCarousel-3" class="carousel-bullet">•</label>
      </li>
    </ol>
  </div>
</div>
input

原始：

我对第二个滑块进行了一些更改：
在HTML中

  • 每-1被-4替换，-2被-5替换，并且-3被-6替换（例如：control-1被control-4替换）

  • 在#carousel-4:checked~.control-4, #carousel-5:checked~.control-5, #carousel-6:checked~.control-6 { display: block; } #carousel-4:checked~.control-4~.carousel-indicators li:nth-child(1) .carousel-bullet, #carousel-5:checked~.control-5~.carousel-indicators li:nth-child(2) .carousel-bullet, #carousel-6:checked~.control-6~.carousel-indicators li:nth-child(3) .carousel-bullet { color: #428bca; } 标记中替换为：name =“ carousel2”和name =“ carousel2”（造成可见性问题）

在我添加的CSS中

.carousel-inner {
  position: relative;
  overflow: hidden;
  width: 200px;
  height: 200px;
}

.carousel-open:checked+.carousel-item {
  position: static;
  opacity: 1;
}

.carousel-item {
  position: absolute;
  opacity: 0;
  -webkit-transition: opacity 0.6s ease-out;
  transition: opacity 0.6s ease-out;
}

.carousel-item img {
  display: block;
  height: auto;
  max-width: 200px;
  height: 200px
}

.carousel-control {
  background: rgba(0, 0, 0, 0.28);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: none;
  font-size: 40px;
  height: 40px;
  line-height: 35px;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  cursor: pointer;
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  text-align: center;
  width: 40px;
  z-index: 10;

}



.carousel-control.prev {
  left: 2%;
}

.carousel-control.next {
  right: 2%;
}

.carousel-control:hover {
  background: rgba(0, 0, 0, 0.8);
  color: #aaaaaa;
}

#carousel-1:checked~.control-1,
#carousel-2:checked~.control-2,
#carousel-3:checked~.control-3 {
  display: block;
}

/* added */

#carousel-4:checked~.control-4,
#carousel-5:checked~.control-5,
#carousel-6:checked~.control-6 {
  display: block;
}

.carousel-indicators {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  bottom: 2%;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 10;
}

.carousel-indicators li {
  display: inline-block;
  margin: 0 5px;
}

.carousel-bullet {
  color: #fff;
  cursor: pointer;
  display: block;
  font-size: 35px;
}

.carousel-bullet:hover {
  color: #aaaaaa;
}

#carousel-1:checked~.control-1~.carousel-indicators li:nth-child(1) .carousel-bullet,
#carousel-2:checked~.control-2~.carousel-indicators li:nth-child(2) .carousel-bullet,
#carousel-3:checked~.control-3~.carousel-indicators li:nth-child(3) .carousel-bullet {
  color: #428bca;
}

/* added */
#carousel-4:checked~.control-4~.carousel-indicators li:nth-child(1) .carousel-bullet,
#carousel-5:checked~.control-5~.carousel-indicators li:nth-child(2) .carousel-bullet,
#carousel-6:checked~.control-6~.carousel-indicators li:nth-child(3) .carousel-bullet {
  color: #428bca;
}

#title {
  width: 100%;
  position: absolute;
  padding: 0px;
  margin: 0px auto;
  text-align: center;
  font-size: 27px;
  color: rgba(255, 255, 255, 1);
  font-family: 'Open Sans', sans-serif;
  z-index: 9999;
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.33), -1px 0px 2px rgba(255, 255, 255, 0);
}

 <div class="carousel-inner">
        <input class="carousel-open" type="radio" id="carousel-1" name="carousel" aria-hidden="true" hidden=""
            checked="checked">
        <div class="carousel-item">
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </div>
        <input class="carousel-open" type="radio" id="carousel-2" name="carousel" aria-hidden="true" hidden="">
        <div class="carousel-item">
            <img src="https://img.lemde.fr/2019/04/22/0/191/1619/1079/688/0/60/0/e39da8d_2FIads9h8wB-0SwSgxVaVWsp.jpg">
        </div>
        <input class="carousel-open" type="radio" id="carousel-3" name="carousel" aria-hidden="true" hidden="">
        <div class="carousel-item">
            <img src="https://image.shutterstock.com/image-photo/white-transparent-leaf-on-mirror-260nw-1029171697.jpg">
        </div>
        <label for="carousel-3" class="carousel-control prev control-1">‹</label>
        <label for="carousel-2" class="carousel-control next control-1">›</label>
        <label for="carousel-1" class="carousel-control prev control-2">‹</label>
        <label for="carousel-3" class="carousel-control next control-2">›</label>
        <label for="carousel-2" class="carousel-control prev control-3">‹</label>
        <label for="carousel-1" class="carousel-control next control-3">›</label>
        <ol class="carousel-indicators">
            <li>
                <label for="carousel-1" class="carousel-bullet">•</label>
            </li>
            <li>
                <label for="carousel-2" class="carousel-bullet">•</label>
            </li>
            <li>
                <label for="carousel-3" class="carousel-bullet">•</label>
            </li>
        </ol>
    </div>
    </div>

    <div class="carousel">
        <div class="carousel-inner">
            <input class="carousel-open" type="radio" id="carousel-4" name="carousel2" aria-hidden="true" hidden=""
                checked="checked">
            <div class="carousel-item">
                <img src='https://picsum.photos/id/133/200/200'>
            </div>
            <input class="carousel-open" type="radio" id="carousel-5" name="carousel2" aria-hidden="true" hidden="">
            <div class="carousel-item">
                <img src='https://picsum.photos/id/134/200/200'>
            </div>
            <input class="carousel-open" type="radio" id="carousel-6" name="carousel2" aria-hidden="true" hidden="">
            <div class="carousel-item">
                <img src='https://picsum.photos/id/135/200/200'>
            </div>
            <label for="carousel-6" class="carousel-control prev control-4">‹</label>
            <label for="carousel-5" class="carousel-control next control-4">›</label>
            <label for="carousel-4" class="carousel-control prev control-5">‹</label>
            <label for="carousel-6" class="carousel-control next control-5">›</label>
            <label for="carousel-5" class="carousel-control prev control-6">‹</label>
            <label for="carousel-4" class="carousel-control next control-6">›</label>
            <ol class="carousel-indicators">
                <li>
                    <label for="carousel-4" class="carousel-bullet">•</label>
                </li>
                <li>
                    <label for="carousel-5" class="carousel-bullet">•</label>
                </li>
                <li>
                    <label for="carousel-6" class="carousel-bullet">•</label>
                </li>
            </ol>
        </div>
    </div>
$statement = app('db')->prepare("SELECT as_produtos.nome, as_produtos.preco FROM as_produtos WHERE id = :s LIMIT 1");  
$statement->bindParam(':s', $product['id']);

相关问题
最新问题