Reusing image slider with ID

13
February 09, 2019, at 11:30 AM

I am trying to use a pure html/css image slider on a webpage which was working great until I tried to put a second slider on the same page. In the code snip below you will see that IDs are used to map labels to sections to allow the transition between elements. Using IDs in this way breaks when you try to put a second slider on the page. I have attached a full plunkr below with example code. Is there a simple way to adjust this to allow having 2 sliders on the page that operate independently?

<input type="radio" name="radio-buttons" id="img-1" checked />
<li class="slide-container">
  <div class="slide-image">
    first slide
  </div>
  <div class="carousel-controls">
    <label for="img-3" class="prev-slide">
      <span>&lsaquo;</span>
    </label>
    <label for="img-2" class="next-slide">
      <span>&rsaquo;</span>
    </label>
  </div>
</li>

https://plnkr.co/edit/jxg1OsvfHFbHQPb49TDm?p=preview

Answer 1

This is happening because both of your slider's input radio have the same name (radio-buttons), which allows you to choose one item only from all radio-buttons inputs. Each slider must have its own input radio with different name.

/* Styles go here */ 
 
ul.slides { 
    display: block; 
    position: relative; 
    width: 100%; 
    height: 400px; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    list-style: none; 
} 
 
.slides * { 
    user-select: none; 
    -ms-user-select: none; 
    -moz-user-select: none; 
    -khtml-user-select: none; 
    -webkit-user-select: none; 
    -webkit-touch-callout: none; 
} 
 
ul.slides input { 
    display: none; 
} 
 
 
.slide-container { 
    display: block; 
} 
 
.slide-image { 
    display: block; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    opacity: 0; 
    transition: all .7s ease-in-out; 
} 
 
    .slide-image img { 
        width: auto; 
        min-width: 100%; 
        height: 100%; 
    } 
 
.carousel-controls { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    z-index: 199; 
    font-size: 100px; 
    line-height: 400px; 
    color: #000; 
} 
 
    .carousel-controls label { 
        display: none; 
        position: absolute; 
        padding: 0 20px; 
        opacity: 0; 
        transition: opacity .2s; 
        cursor: pointer; 
    } 
 
.slide-image:hover + .carousel-controls label { 
    opacity: 0.5; 
} 
 
.carousel-controls label:hover { 
    opacity: 1; 
} 
 
.carousel-controls .prev-slide { 
    width: 49%; 
    text-align: left; 
    left: 0; 
} 
 
.carousel-controls .next-slide { 
    width: 49%; 
    text-align: right; 
    right: 0; 
} 
 
.carousel-dots { 
    position: absolute; 
    left: 0; 
    right: 0; 
    bottom: 10px; 
    z-index: 199; 
    text-align: center; 
} 
 
    .carousel-dots .carousel-dot { 
        display: inline-block; 
        width: 15px; 
        height: 15px; 
        border-radius: 50%; 
        background-color: #000; 
        opacity: 0.5; 
        margin: 10px; 
        cursor: pointer; 
    } 
 
input:checked + .slide-container .slide-image { 
    opacity: 1; 
    transform: scale(1); 
    transition: opacity 1s ease-in-out; 
} 
 
input:checked + .slide-container .carousel-controls label { 
    display: block; 
} 
 
input#img-0:checked ~ .carousel-dots label#img-dot-0, 
input#img-1:checked ~ .carousel-dots label#img-dot-1, 
input#img-2:checked ~ .carousel-dots label#img-dot-2, 
input#img-3:checked ~ .carousel-dots label#img-dot-3, 
input#img-4:checked ~ .carousel-dots label#img-dot-4, 
input#img-5:checked ~ .carousel-dots label#img-dot-5, 
input#img-6:checked ~ .carousel-dots label#img-dot-6 { 
    opacity: 1; 
} 
 
 
input:checked + .slide-container .nav label { 
    display: block; 
}
  <div> 
    <div class="carousel"> 
      <ul class="slides"> 
        <input type="radio" name="radio-buttons" id="img-1" checked /> 
        <li class="slide-container"> 
          <div class="slide-image"> 
            first slide 
          </div> 
          <div class="carousel-controls"> 
            <label for="img-3" class="prev-slide"> 
              <span>&lsaquo;</span> 
            </label> 
            <label for="img-2" class="next-slide"> 
              <span>&rsaquo;</span> 
            </label> 
          </div> 
        </li> 
        <input type="radio" name="radio-buttons" id="img-2" /> 
        <li class="slide-container"> 
          <div class="slide-image"> 
            second slide 
          </div> 
          <div class="carousel-controls"> 
            <label for="img-1" class="prev-slide"> 
              <span>&lsaquo;</span> 
            </label> 
            <label for="img-3" class="next-slide"> 
              <span>&rsaquo;</span> 
            </label> 
          </div> 
        </li> 
        <input type="radio" name="radio-buttons" id="img-3" /> 
        <li class="slide-container"> 
          <div class="slide-image"> 
            third slide 
          </div> 
          <div class="carousel-controls"> 
            <label for="img-2" class="prev-slide"> 
              <span>&lsaquo;</span> 
            </label> 
            <label for="img-1" class="next-slide"> 
              <span>&rsaquo;</span> 
            </label> 
          </div> 
        </li> 
        <div class="carousel-dots"> 
          <label for="img-1" class="carousel-dot" id="img-dot-1"></label> 
          <label for="img-2" class="carousel-dot" id="img-dot-2"></label> 
          <label for="img-3" class="carousel-dot" id="img-dot-3"></label> 
        </div> 
      </ul> 
    </div> 
  </div> 
 
  <div> 
    <div class="carousel"> 
      <ul class="slides"> 
        <input type="radio" name="radio-buttons2" id="img-4" checked /> 
        <li class="slide-container"> 
          <div class="slide-image"> 
            first slide 
          </div> 
          <div class="carousel-controls"> 
            <label for="img-6" class="prev-slide"> 
              <span>&lsaquo;</span> 
            </label> 
            <label for="img-5" class="next-slide"> 
              <span>&rsaquo;</span> 
            </label> 
          </div> 
        </li> 
        <input type="radio" name="radio-buttons2" id="img-5" /> 
        <li class="slide-container"> 
          <div class="slide-image"> 
            second slide 
          </div> 
          <div class="carousel-controls"> 
            <label for="img-4" class="prev-slide"> 
              <span>&lsaquo;</span> 
            </label> 
            <label for="img-6" class="next-slide"> 
              <span>&rsaquo;</span> 
            </label> 
          </div> 
        </li> 
        <input type="radio" name="radio-buttons2" id="img-6" /> 
        <li class="slide-container"> 
          <div class="slide-image"> 
            third slide 
          </div> 
          <div class="carousel-controls"> 
            <label for="img-5" class="prev-slide"> 
              <span>&lsaquo;</span> 
            </label> 
            <label for="img-4" class="next-slide"> 
              <span>&rsaquo;</span> 
            </label> 
          </div> 
        </li> 
        <div class="carousel-dots"> 
          <label for="img-4" class="carousel-dot" id="img-dot-4"></label> 
          <label for="img-5" class="carousel-dot" id="img-dot-5"></label> 
          <label for="img-6" class="carousel-dot" id="img-dot-6"></label> 
        </div> 
      </ul> 
    </div> 
  </div>

Answer 2

https://plnkr.co/edit/KeJGhctcsPcJScajsylk?p=preview

<input type="radio" name="radio-buttons" id="img-4" checked />
<label for="img-4" class="carousel-dot" id="img-dot-4"></label>

Here is an adjusted version. You were using id's multiple times which is a no-no. IDs are unique and should only be used on 1 element.

When I change the second slider id's to 4-5-6 instead of the same 1-2-3 as above, it works fine. Just take a look on how you are displaying the side arrows and you should be good to go. I would look into showing the arrows on hover over the element.

READ ALSO
How can i get my PHP SoapClient to Authenticate with Digest

How can i get my PHP SoapClient to Authenticate with Digest

I currently have a vbnet ASMX web service hosted on IIS along with a PHP page which is calling the web service via a SoapClient

27
i know that closure can use as variable value.But i am confused which are called this value

i know that closure can use as variable value.But i am confused which are called this value

I'm declaring an anonymous function hereIn this code I want to know what is the value or expression of variable $a

22
Take number from date

Take number from date

Here is my php function for taking First day & last day of a month

31
My Core php website sitemap not index in google webmaster

My Core php website sitemap not index in google webmaster

When I was running my website on WordPress, my website was also indexing Google's index and my Alexa rank was also decreasing, but since I created my website on Core php Since then, my website's sitemap is not indexing in Google and my website's Alexa rank should...

48