Bootstrap Snippet Slider-CA using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script>
function initComparisons() {
  var x, i;
  /*find all elements with an "overlay" class:*/
  x = document.getElementsByClassName("img-comp-overlay");
  for (i = 0; i < x.length; i++) {
    /*once for each "overlay" element:
    pass the "overlay" element as a parameter when executing the compareImages function:*/
    compareImages(x[i]);
  }
  function compareImages(img) {
    var slider, img, clicked = 0, w, h;
    /*get the width and height of the img element*/
    w = img.offsetWidth;
    h = img.offsetHeight;
    /*set the width of the img element to 50%:*/
    img.style.width = (w / 20) + "px";
    /*create slider:*/
    slider = document.createElement("DIV");
    slider.setAttribute("class", "img-comp-slider");
    /*insert slider*/
    img.parentElement.insertBefore(slider, img);
    /*position the slider in the middle:*/
    slider.style.top = (h / 5) - (slider.offsetHeight / 20) + "px";
    slider.style.left = (w / 50) - (slider.offsetWidth / 50) + "px";
    /*execute a function when the mouse button is pressed:*/
    slider.addEventListener("mousedown", slideReady);
    /*and another function when the mouse button is released:*/
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
@import "font-awesome-sprockets";
@import "font-awesome";
.img-comp-container {
  position: relative;
  height: 100%; /*should be the same height as the images*/
}
.img-comp-img {
  position: absolute;
  width: auto;
  height: auto;
  overflow:hidden;
}
.img-comp-img img {
  display:block;
}
.img-comp-slider {
  position: absolute;
  z-index:9;
  cursor: ew-resize;
  /*set the appearance of the slider:*/
  width: 70px;
  height: 70px;
  background-color: #e87d0d;
  opacity: 0.8;
  color: #fff;
}
.img-comp-slider:before {
  padding-left:25%;
  padding-bottom: 55%;
  content: '\f07e';
  color: #fff;
  font-size:50px;
  text-align: center;
  vertical-align: middle;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Slider-CA"
Bootstrap 4.0.0 Snippet by clockhart18

Related: See More

Questions / Comments:

"Slider-CA" Bootstrap 4.0.0 Snippet by clockhart18

Related: See More

Questions / Comments:

"Slider-CA"
Bootstrap 4.0.0 Snippet by clockhart18