Add slider navigation using javascript

Question

i made this slider only using unordered list - http://codepen.io/celicoo/pen/ZYPBem

And now i am trying to apply the javascript, but I'm having trouble changing the slider through the navigation. I tried to change the z -index of the slide chosen for 5000 and the others to 1, but did not work:

$(document).ready(function(){
  $('.hero-slider-navbar_item').on('click', function(e) {
    e.preventDefault();
    var target = $(this).data('slider');

    var actual = $('.hero-slider_item.' + actual);
    var notActual = $('.hero-slider_item').not(actual);

    actual.css('z-index', '5000');
    notActual.css('z-index', '1');

  })

});

What i am doing wrong here?

---

UPDATE:

HTML:

<main>
    <section class="hero">
            <ul class="hero-slider">
                    <li class="hero-slider_item one active">
                        <div class="container">
                                <h2 class="hero-slider_title">Test</h2>
                                <h3 class="hero-slider_subtitle">test</h3>
                            <p class="hero-slider_legend">algo</p>
                        </div>
                    </li>
                    <li class="hero-slider_item two">
                        <div class="container">
                                <h2 class="hero-slider_title">Test</h2>
                                <h3 class="hero-slider_subtitle">test</h3>
                                <p class="hero-slider_legend">algo</p>
                        </div>  
                    </li>
                    <li class="hero-slider_item three">
                        <div class="container">
                                <h2 class="hero-slider_title">Test</h2>
                                <h3 class="hero-slider_subtitle">test</h3>
                                <p class="hero-slider_legend">algo</p>
                        </div>
                    </li>
            </ul>
            <nav class="hero-slider-navbar">
     <div class="container">
                      <ul class="hero-slider-navbar_nav" role="navigation">
                          <li class="hero-slider-navbar_item" data-slider="one" ></li>
                            <li class="hero-slider-navbar_item" data-slider="two" ></li>
                            <li class="hero-slider-navbar_item" data-slider="three" ></li>
                      </ul>
    </div>
            </nav>
    </section>
    <!-- End hero -->
</main>

CSS:

body {
  margin: 0;
  padding: 0;
}
h1, h2, h3, h4, h5, h6, ul {
  padding: 0;
  margin: 0;
}
.container {
  padding-left: 2%;
  padding-right: 2%;
  margin-left: auto;
  margin-right: auto;
  height: 100%;
}
.hero {
  width: 100%;
  height: 100vh;
}
.hero-slider {
  width: 100%;
  height: 100%;
  list-style: none;
}
.hero-slider_item {
  width: 100%;
  height: 100%;
  position: absolute;
}
.hero-slider_item.one {
  background: red;
  z-index: 3;
}
.hero-slider_item.two {
  background: yellow;
  z-index: 2;
}
.hero-slider_item.three{
  background: green;
  z-index: 1;
}
.hero-slider-navbar {
  position: relative;
  bottom: 20px;
  z-index: 9999;
  width: 100%;
}
.hero-slider-navbar_nav {
  text-align: center;
}
.hero-slider-navbar_item {
  list-style: none;
  display: inline-block;
  background: black;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  cursor: pointer;
}

Answer 1

So, here you go. You were nearly there. I have only improved the code a bit whilst got it to work.

Demo@ Code Pen

$(function() {
    $('.hero-slider-navbar_item').on('click', function(e) {
      e.preventDefault();
      var target = $(this).data('slider');
      //Item corresponding to the clicked element
      var actual = $(['.hero-slider_item', '.', target].join(''));
      //And it's siblings
      var others = actual.siblings();
      actual.css('z-index', '5000');
      others.css('z-index', '1');
    });
});

Another way that doesn't require data-slider:

Demo@ Code Pen

$(function() {
    $('.hero-slider-navbar_item').on('click', function(e) {
      e.preventDefault();
      $('.hero-slider_item').eq($(this).index()).siblings().css({
        'z-index': 1
      }).end().css({
        'z-index': 10
      });
    });
});