Simple slider

by Matthew Day

HTML

<div class="viewport">
  <ul class="button-wrap cf">
    <li class="active" data-position="0">Ana</li>
    <li data-position="-100">Billy</li>
    <li data-position="-200">Carlos</li>
  </ul>
  <ul class="slides cf">
    <li id="t-ana" class="slide ana">
      <div class="nimg">
        <img src="http://placekitten.com/g/300/600" />
      </div>
    </li>
    <li id="t-billy" class="slide billy">
      <div class="nimg">
        <img src="http://placekitten.com/g/300/500" />
      </div>
    </li>
    <li id="t-carlos" class="slide carlos">
      <div class="nimg">
        <img src="http://placekitten.com/g/300/400" />
      </div>
    </li>
  </ul>
</div>

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

img {
  height: auto;
  width: 100%;
}

li {
  list-style: none;
}

.cf:before,
.cf:after {
  content: "";
  display: table;
}

.cf:after {
  clear: both;
}

.viewport {
  border: 1px solid gray;
  margin: 20px auto;
  overflow: hidden;
  width: 80%;
}

.button-wrap li {
  cursor: pointer;
  display: block;
  float: left;
  padding: 6px 0;
  text-align: center;
  width: 33.3333%;
}

li.active {
  color: crimson;
}

.nimg {
  height: 200px;
  margin: 0 auto;
  overflow: hidden;
  width: 160px;
}

.slides {
  margin-left: 0;
  width: 300%;
}

.slide {
  float: left;
  padding: 50px 0;
  width: 33.333%;
}

JavaScript

(($) => {
  var app = {
    init: () => {
      app.whichOne();
    },
    whichOne: () => {
      $('.button-wrap').on('click', 'li', function(e) {
      	$('.button-wrap li').removeClass('active');
      	$(this).addClass('active');
        var _pos = $(this).data('position');
      	$(".slides").animate({'marginLeft': _pos + '%'}, 600);
      });
    }
  };

  $(document).ready(function() {
  	app.init();
  })

})(window.jQuery);