beamly image slider markup v2

I am refactoring the html markup and and mousemove/touchmove event handler

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>beamly image slider markup v2</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div class="photoslider" style="width: 300px;">        
  <img src="http://img-w.zeebox.com/images/z/904f6e0f-2141-4af3-80f8-0ecaa8a4dc28.jpg" width="300">        
  <img class="top-pic" src="http://img-w.zeebox.com/images/z/cc6ec40f-83ef-4422-b689-b582f789c635.jpg" width="300">
  <a class="drag">← Slide →</a>
</div>

<svg>
  <defs>
    <clipPath id="clipping">
      <circle cx="284" cy="213" r="213" />
    </clipPath>
  </defs>
</svg>
<img id="test" src="http://img-w.zeebox.com/images/z/cc6ec40f-83ef-4422-b689-b582f789c635.jpg" width="568">
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

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

</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
.photoslider {
  position: relative;
}
.top-pic {
  position: absolute;  
  top: 0;
  left: 0;
  clip: rect(0px,150px,300px,0px);
}
.drag {
  position:absolute;
  top: 0;
  height: 300px;
  line-height: 300px;
  left: 150px;
  margin-left: -36px;
  color: red;
  font-weight: bold;
}
#test:hover {
  clip-path: polygon(0px 208px, 146.5px 207px, 147px 141.2px, ...);
  animate: star 3s;
}

@keyframes star {
  0% {
    clip-path: polygon(0px 208px, 146.5px 207px, 147px 141.2px, ...);
  },
  100% {
    clip-path: polygon(0px 208px, 146.5px 207px, 147px 141.2px, ...);
  }
}
/* Downloaded from https://www.codeseek.co/ */
var positionX, topImage, touch, positionX, sliderWidth, clip, adjustTopImage, drag, slider, isTouch, myevent;

sliderWidth = 300;

adjustTopImage = function(evt) {
    if (evt.type === "touchmove") {
        evt.preventDefault();
        touch = evt.touches[0] || evt.changedTouches[0];
        positionX = touch.pageX;
    } else {
        positionX = evt.pageX;
    }

    if (!topImage) {
        topImage = $('.top-pic');
    }
    if (!drag) {
        drag = $('.drag');
    }

    if (positionX > sliderWidth - 15 || positionX < 15) {
        return false;
    }
    clip = 'rect(' + getClip(positionX) + ')';
    topImage.css({
        clip: clip
    });
    drag.css({
        left: positionX + 'px'
    });

};

function getDrag(x) {
    return {
        '-webkit-transform': 'translateX(' + x + 'px)',
        transform: 'translateX(' + x + 'px)'
    };

}

function getClip(right) {
    return [0, right, sliderWidth, 0].join('px, ');
}
slider = document.querySelector('.photoslider');
isTouch = 'ontouchstart' in window || 'onmsgesturechange' in window;
myevent = isTouch ? 'touchmove' : 'mousemove';
slider.addEventListener(myevent, adjustTopImage, false);

This awesome code ( beamly image slider markup v2 ) is write by Aneudy Abreu, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Aneudy Abreu