Image switcher using slider ui

In this example below you will see how to do a Image switcher using slider ui with some HTML / CSS and Javascript

Just a prototype to help a brother out.

Thumbnail
This awesome code was written by digitalcraft, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright digitalcraft ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Image switcher using slider ui</title>
  
  
  <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="wrapper">
  <div id="slider-container">
    <div id="slider-vertical" style="height:360px;"></div>
    <p>
      <label for="amount">position:</label>
      <input type="text" id="amount" readonly style="border:0; background: none; c font-weight:bold;">
    </p>
    <h2>For Utopian</h2>
  </div>

  <div id="image-container">
    <div id="img1" style="background-image:url('http://www.fillmurray.com/g/600/400')"></div>
    <div id="img2" style="background-image:url('http://www.fillmurray.com/500/600')"></div>
    <div id="img3" style="background-image:url('http://www.fillmurray.com/g/800/600')"></div>
    <div id="img4" style="background-image:url('http://www.fillmurray.com/540/400')"></div>
    <div id="img5" style="background-image:url('http://www.fillmurray.com/g/700/500')"></div>
  </div>
</div>
<br clear="all"/>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/digitalcraft/image-switcher-using-slider-ui-zrLVPg */
body {
  padding: 30px;
  background: #2FC1AB;
  font: 12px/16px Monaco, sans-serif;
  color: #111;
  text-transform: uppercase;
  letter-spacing: 2px;
}

img {
  max-width: 100%;
}

#wrapper {
  width: 100%;
  margin: 0 auto;
}

#slider-container {
  width: 33.333%;
  float: left;
  padding: 10px;
   min-height:540px;
}

#image-container {
  position: relative;
  width: 60%;
  height:500px;
  float: left;
}

#image-container div {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  width:500px;
  height:500px;
   border-radius: 50%;
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  transition: opacity 1s linear;

}

#image-container div.active {
  opacity: 1;
}

/* slider over-rides */
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
  background:#333; 
  border:none;
}

.ui-slider .ui-slider-handle {
    width: 1em;
    height: 2.6em;
  left: 0.16em;
  margin-bottom: -36px !important;
}

.ui-corner-all{
  border-radius: 20px;
}

.ui-widget-content{
    border: none;
    background: rgba(0,0,0,0.3);
    color: #222222;
    width:1.3em;
}
.ui-widget-header {
  background:none; 
}

/*Downloaded from https://www.codeseek.co/digitalcraft/image-switcher-using-slider-ui-zrLVPg */
$(function() {
  $("#img1").addClass('active');
  $("#slider-vertical").slider({
    orientation: "vertical",
    range: "min",
    min: 0,
    max: 100,
    value: 100,
    slide: function(event, ui) {
      $("#amount").val(ui.value);

      var slider_value = ui.value;

      if (slider_value <= 100 && slider_value > 80) {
        $("#img1").addClass("active").siblings().removeClass('active');
      } else if (slider_value <= 80 && slider_value > 60) {
        $("#img2").addClass("active").siblings().removeClass('active');
      } else if (slider_value <= 60 && slider_value > 40) {
        $("#img3").addClass("active").siblings().removeClass('active');
      } else if (slider_value <= 40 && slider_value > 20) {
        $("#img4").addClass("active").siblings().removeClass('active');
      } else {
        $("#img5").addClass("active").siblings().removeClass('active');
      }
    }
  });
  $("#amount").val($("#slider-vertical").slider("value"));

});

Comments