CODEWITHSUNDEEP
javascriptjqueryhtmlcssslider
JeanLeSheep
JeanLeSheep

Reputation: 89

How to add class "current" to pure CSS sliders dots navigation?

I have this codepen which I modified with a little bit of jQuery for extra elements. For better usability I'd like to add the class current to the dot that represents the current slide (label.dot-# where "#" equals the corresponding slide).

I just can't figure out how to do it. I don't mind adding some more jQuery to achieve this. 

$(function() { // run when the DOM is ready

  $(".clickable").click(function() { 
    $(this).parents('div').toggleClass('minimize');
   // $('.information').toggleClass('minimize');  
  });
  
   $(".next").click(function() { 
    $(this).parents('div').removeClass('minimize');
  });

});
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: "Helvetica", sans-serif;
}

img {
  max-width: 100%;
}

.slider-container {
  height: 100vh;
  width: 100%;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.menu {
  position: absolute;
  left: 0;
  z-index: 900;
  width: 100%;
  bottom: 0;
}

.menu label {
  cursor: pointer;
  display: inline-block;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50px;
  margin: 0 .2em 1em;
  position: relative;
}
.menu label:hover {
  background: red;
}

.menu label.current {
  background: red;
}

.slide {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 100%;
  z-index: 10;
  padding: 8em 1em 0;
  background-size: cover;
  background-position: 50% 50%;
  transition: left 0s .75s;
}

[id^="slide"]:checked + .slide {
  left: 0;
  z-index: 100;
  transition: left .65s ease-out;
}

.slide-1 {
  background-image: url("https://source.unsplash.com/t7YycgAoVSw/1600x900");
}

.slide-2 {
  background-image: url("https://source.unsplash.com/11H1SSVcIxc/1600x900");
}

.slide-3 {
  background-image: url("https://source.unsplash.com/OlZ1nWLEEgM/1600x900");
}

.information {
  position: absolute;
  right: 0;
  top: 0;
  width: 40%;
  height: 100%;
  background: pink;
  text-align: left;
  transition: all .3s ease;
}
.information h3 {
  transition: all .5s ease;
  opacity: 1;
}

.information.minimize {
  right: -30%;
}
.information.minimize h3 {
  opacity: 0;
}

.nav label {
  width: 200px;
  height: 100%;
  display: block;
  position: relative;
  opacity: 1;
  z-index: 9;
  cursor: pointer;
  transition: opacity .2s;
  color: #FFF;
  font-size: 156pt;
  text-align: center;
  line-height: 380px;
  font-family: "Varela Round", sans-serif;
}

.nav .next {
  right: 0;
}

.intro {
  position: absolute;
  bottom: 25%;
  left: 0;
  width: 30%;
  background: #fff;
  text-align: left;
  padding-left: 150px;
}
<div class="slider-container">

  <div class="menu">
    <label for="slide-dot-1" class="dot-1"></label>
    <label for="slide-dot-2" class="dot-2"></label>
    <label for="slide-dot-3" class="dot-3"></label>
  </div>

  <input id="slide-dot-1" type="radio" name="slides" checked>
  <div class="slide slide-1">
    <div class="intro">
      <h5>Header</h5>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget purus imperdiet, euismod nisl sit amet, sodales odio.</p>
    </div>
    <div class="information">
      <h1 class="clickable">++</h1>
      <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget purus imperdiet, euismod nisl sit amet, sodales odio. Integer tristique mi eget sem ultrices auctor. Nam quis tellus ac magna ornare ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget purus imperdiet, euismod nisl </h3>
      <div class="nav">
        <label for="slide-dot-2" class="next">&#x203a;</label>
      </div>
    </div>
  </div>

  <input id="slide-dot-2" type="radio" name="slides">
  <div class="slide slide-2">
    <div class="information">
      <h1 class="clickable">++2</h1>
      <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget purus imperdiet, euismod nisl sit amet, sodales odio. Integer tristique mi eget sem ultrices auctor. Nam quis tellus ac magna ornare ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget purus imperdiet, euismod nisl </h3>
      <div class="nav">
        <label for="slide-dot-3" class="next">&#x203a;</label>
      </div>
    </div>
  </div>

  <input id="slide-dot-3" type="radio" name="slides">
  <div class="slide slide-3">
    <div class="information">
      <h1 class="clickable">++3</h1>
      <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget purus imperdiet, euismod nisl sit amet, sodales odio. Integer tristique mi eget sem ultrices auctor. Nam quis tellus ac magna ornare ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget purus imperdiet, euismod nisl </h3>
      <div class="nav">
        <label for="slide-dot-1" class="next">&#x203a;</label>
      </div>
    </div>
  </div>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Upvotes: 1

Views: 651

Answers (1)

Axel
Axel

Reputation: 3323

  1. Listen to on change event of inputs.
  2. Translate changed inputs index retrieved by its id-attribute

Deeper explanations are within the well commented source code:

$(function() { // document ready

  // cache dots
  $Dots = $('.slider-container').find('.menu > label[class^="dot-"]');
  // add class current and cache first dot
  $DotCurrent = $Dots.first().addClass('current');
  $('[name="slides"]').on('change', function() {
    // while in my setup the event only fired when the checked property "changed to true"
    // I recommend to sanitize in case that some environments may also fire on "changed to false" checked property
    if ( !$(this).prop('checked') ) return;
    $DotCurrent.removeClass('current');
    // this.id == "slide-dot-#" where # is the new current slide number (1 is the first slide)
    // so it would be much cheaper to do (-1 (+this.id.substr(10)))
    // but for maintenance we simply delete all non numerics of this.id
    // this way "slide-dot-#" can be "slide-xyz-dot-#" in future without changing the logic here
    $DotCurrent = $Dots.eq( -1 + (+this.id.replace(/[^0-9]/g, '')) ).addClass('current');
  })

});
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: "Helvetica", sans-serif;
}

img {
  max-width: 100%;
}

.slider-container {
  height: 100vh;
  width: 100%;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.menu {
  position: absolute;
  left: 0;
  z-index: 900;
  width: 100%;
  bottom: 0;
}

.menu label {
  cursor: pointer;
  display: inline-block;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50px;
  margin: 0 .2em 1em;
  position: relative;
}
.menu label:hover {
  background: red;
}
.menu label:before {
  content: "";
  width: 16px;
  height: 16px;
  background: red;
  border-radius: 50px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.menu label.current {
  background: red;
}

.slide {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 100%;
  z-index: 10;
  padding: 8em 1em 0;
  background-size: cover;
  background-position: 50% 50%;
  transition: left 0s .75s;
}

[id^="slide"]:checked + .slide {
  left: 0;
  z-index: 100;
  transition: left .65s ease-out;
}

[id^="slide"]:checked + label:before {
  z-index: 100;
}

.slide-1 {
  background-image: url("https://source.unsplash.com/t7YycgAoVSw/1600x900");
}

.slide-2 {
  background-image: url("https://source.unsplash.com/11H1SSVcIxc/1600x900");
}

.slide-3 {
  background-image: url("https://source.unsplash.com/OlZ1nWLEEgM/1600x900");
}

.information {
  position: absolute;
  right: 0;
  top: 0;
  width: 40%;
  height: 100%;
  background: pink;
  text-align: left;
  transition: all .3s ease;
}
.information h3 {
  transition: all .5s ease;
  opacity: 1;
}

.information.minimize {
  right: -30%;
}
.information.minimize h3 {
  opacity: 0;
}

.nav label {
  width: 200px;
  height: 100%;
  display: block;
  position: relative;
  opacity: 1;
  z-index: 9;
  cursor: pointer;
  transition: opacity .2s;
  color: #FFF;
  font-size: 156pt;
  text-align: center;
  line-height: 380px;
  font-family: "Varela Round", sans-serif;
}

.nav .next {
  right: 0;
}

.intro {
  position: absolute;
  bottom: 25%;
  left: 0;
  width: 30%;
  background: #fff;
  text-align: left;
  padding-left: 150px;
}


/* make dots visible on white background */
.menu label {
  box-shadow: 0 0 .2em 0 #000;
}
<div class="slider-container">

  <div class="menu">
    <label for="slide-dot-1" class="dot-1"></label>
    <label for="slide-dot-2" class="dot-2"></label>
    <label for="slide-dot-3" class="dot-3"></label>
  </div>

  <input id="slide-dot-1" type="radio" name="slides" checked>
  <div class="slide slide-1">
    <div class="intro">
      <h5>Header</h5>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget purus imperdiet, euismod nisl sit amet, sodales odio.</p>
    </div>
    <div class="information">
      <h1 class="clickable">++</h1>
      <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget purus imperdiet, euismod nisl sit amet, sodales odio. Integer tristique mi eget sem ultrices auctor. Nam quis tellus ac magna ornare ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget purus imperdiet, euismod nisl </h3>
      <div class="nav">
        <label for="slide-dot-2" class="next">&#x203a;</label>
      </div>
    </div>
  </div>

  <input id="slide-dot-2" type="radio" name="slides">
  <div class="slide slide-2">
    <div class="information">
      <h1 class="clickable">++2</h1>
      <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget purus imperdiet, euismod nisl sit amet, sodales odio. Integer tristique mi eget sem ultrices auctor. Nam quis tellus ac magna ornare ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget purus imperdiet, euismod nisl </h3>
      <div class="nav">
        <label for="slide-dot-3" class="next">&#x203a;</label>
      </div>
    </div>
  </div>

  <input id="slide-dot-3" type="radio" name="slides">
  <div class="slide slide-3">
    <div class="information">
      <h1 class="clickable">++3</h1>
      <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget purus imperdiet, euismod nisl sit amet, sodales odio. Integer tristique mi eget sem ultrices auctor. Nam quis tellus ac magna ornare ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget purus imperdiet, euismod nisl </h3>
      <div class="nav">
        <label for="slide-dot-1" class="next">&#x203a;</label>
      </div>
    </div>
  </div>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

CODEPEN

Actually it would be possible to keep your "Pure CSS Slider" pure CSS but as you mentioned in your Question:

I don't mind adding some more jQuery to achieve this.

Feel free to take some inspiration from this CODEPEN, which is a pure CSS slider. It looks different (actually it is different also) but take a look at the HTML sceleton. You can translate the sceleton to "every" mockup.

Upvotes: 1

Related Questions