4

I've this caroussel made by Html and Css only, it works fine if it is used alone, but if i add the same one on the same page it does make a confusion when i slide my images, i can't figure out where is the problem.

I tried using a second folder for the second caroussel but still the same problem. Thanks for helping me.

.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>
alioua walid
  • 247
  • 3
  • 19
  • 1
    Checked the new carousell has different ids? You may not copy+paste the same code and just change the img sources – AugustoM Aug 09 '19 at 21:04
  • Yes the classes name are the same, if i change the classes name of the seconde one, i also need another css file related to it, right ? – alioua walid Aug 09 '19 at 21:07
  • 1
    I was just wondering if the labels were pointing to the correct ids, in your carousel, the user clicks on label which triggers the "checked" event in the radio input, but the id should be unique to work, if you duplicate id's this could be causing the issue – AugustoM Aug 09 '19 at 21:10
  • 1
    @aliouawalid not the classes, the ID's. You can reuse the classes for having the same styling, but the duplication of the `id` attribute on your carousel is the problem. Make sure each `id` is unique. – BugsArePeopleToo Aug 09 '19 at 22:16
  • @BugsArePeopleToo i did try it with different id and even on the css, still the same problem, when i load the page, the second caroussel disapears right arway. – alioua walid Aug 09 '19 at 22:27
  • 1
    On top of changing the ```id``` you need to change the ```for=""``` on all of the labels to match the new ```id``` – Vch Cvh Hvc Aug 09 '19 at 23:45
  • @VchCvhHvc i've just triyed, it didn't worked. – alioua walid Aug 11 '19 at 21:32

1 Answers1

2

Edit :

Since your comment I changed how I did it.
I keep the Carousel-1-2-3 but prefix them instead. aCarousel-1.. etc (and don't touch control-1,-2,-3)
Which in turn allow me in the CSS to select all inputs with an id ending by "Carousel-1" etc :

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

This way you won't need new/duplicate rules in the css for new carousels. Those will work for every carousel.

.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);
}
<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>

Original :

I did a few changes for the 2nd slider:
In the HTML

  • replaced every -1 by -4, -2 by -5 and -3 by -6 (ex: control-1 by control-4)

  • replaced in the input tags : name="carousel" by name="carousel2" (was causing the visibility issue)

In the CSS i added

#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;
}


.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>
Pierre-Yves Legeay
  • 638
  • 5
  • 14
  • Thank you, i'm willing to generate those caroussel automaticaly, so i need to asign different – alioua walid Aug 11 '19 at 22:38
  • 1
    I would keep the "-1-2-3" and prefix them instead (example: aaCarousel-1, abCarousel-1 ...) – Pierre-Yves Legeay Aug 12 '19 at 07:13
  • 1
    Did an edit with a more efficient solution for automatical generation – Pierre-Yves Legeay Aug 12 '19 at 08:16
  • 1
    Succinctly, for the JS I would create a Classe Carousel (with properties like : prefix, image, id..). For incrementing the prefix I would use [this JS solution](https://stackoverflow.com/questions/12504042/what-is-a-method-that-can-be-used-to-increment-letters/12504061#12504061). And I would use `cloneNode()` and `append()` to make new copies of the 1st one in the html. [Here](https://codepen.io/pi-L/pen/ymMYWJ) is a pen where I did all this for 3D cubes – Pierre-Yves Legeay Aug 12 '19 at 11:03