Skip to content

Instantly share code, notes, and snippets.

@haydenwagner
Last active February 12, 2017 05:13
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save haydenwagner/c23f63ad4c94622b14fdab9a62075d0b to your computer and use it in GitHub Desktop.
slideswell slider demo
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slideswell demo</title>
<link rel="stylesheet" type="text/css" href="slideswell.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style>.container{width: 600px;margin: 0 auto;}</style>
</head>
<body>
<div class="container">
<div class="slideSwell" id="testSlideswell">
<img src="http://imgur.com/AD0C3wz.jpg"/>
<img src="http://imgur.com/xhl5g8g.jpg"/>
<img src="http://imgur.com/9EhApkU.jpg"/>
<img src="http://imgur.com/SHqVTlC.jpg"/>
</div>
</div>
<script src="slideswell.min.js"></script>
<script>
new SlideSwell("testSlideswell");
</script>
</body>
</html>
.slideSwell,.slideSwell_arrow-div,.slideSwell_image,.slideSwell_image--selected,.slideSwell_image-div{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.slideSwell{width:100%;overflow:hidden;height:0;margin:25px 0;position:relative}.slideSwell_image-div{height:100%;position:absolute;left:0}.slideSwell_image{height:calc(100% - 50px);margin:25px 0;transition:height .25s,padding .25s,margin .25s;box-shadow:0 3px 5px rgba(0,0,0,.3)}.slideSwell_image--selected{padding:0;height:100%;transition:height .15s,padding .15s,margin .15s;box-shadow:0 3px 5px rgba(0,0,0,.3);width:auto}.slideSwell--no-caption{margin-bottom:0}.slideSwell--no-caption--gray{padding-top:15px;background:#ccc}.slideSwell_captionDiv{height:100%;display:inline-block;position:relative}.slideSwell_caption{font-size:95%;font-style:italic;margin:5px 0;line-height:1.2;width:calc(100% - 8px);text-align:center;padding:0;opacity:0;transition:opacity .25s;position:absolute}.slideSwell_arrow-div{cursor:pointer;border-radius:5px;width:25px;height:25px;position:absolute;top:calc(50% - 20px);box-shadow:0 2px 6px rgba(0,0,0,.5);opacity:.85;background:-moz-linear-gradient(top,#fff 35%,#c8c8c8 100%);background:-webkit-linear-gradient(top,#fff 35%,#c8c8c8 100%);background:linear-gradient(to bottom,#fff 35%,#c8c8c8 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#c8c8c8', GradientType=0 )}@media screen and (max-width:481px){.slideSwell_caption{line-height:1}.slideSwell_arrow-div{opacity:.9}}@media screen and (min-width:481px){.slideSwell_arrow-div:hover{opacity:1}}.slideSwell_arrow-div--right{padding:7px 4px 7px 7px;right:1%}.slideSwell_arrow-div--left{padding:7px 7px 7px 4px;left:1%;display:none}.slideSwell_arrow-div svg{width:100%;height:100%}.slideSwell_arrow-div path{fill:#424242;stroke:none}
!function(){"use strict";function t(t){this.dragThresholdRatio=.5,this.data={},this.wrapperDiv=document.getElementById(t),function(){var t=[].slice.call(this.wrapperDiv.children),e=this;this.images=[],t.map(function(t){"img"===t.nodeName.toLowerCase()?(t.setAttribute("class","slideSwell_image"),e.images.push({el:t})):e.wrapperDiv.removeChild(t)})}.call(this),function(){var t=this,e=document.createElement("div"),i=document.createElement("div"),a=document.createElement("div"),o=mobileCheck()?"touchstart":"click";e.setAttribute("class","slideSwell_image-div"),this.images.map(function(t){"img"===t.el.nodeName.toLowerCase()&&(t.el.setAttribute("class","slideSwell_image"),e.appendChild(t.el))}),this.wrapperDiv.appendChild(e),this.movingDiv=e,i.setAttribute("class","slideSwell_arrow-div slideSwell_arrow-div--left"),i.innerHTML='<?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="22.135px" height="34.01px" viewBox="1.575 1.432 22.135 34.01" enable-background="new 1.575 1.432 22.135 34.01" xml:space="preserve"><g><path fill="#FFFFFF" stroke="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M20.285,2.898c1.542-1.242,2.803-0.64,2.803,1.341v28.608c0,1.979-1.261,2.583-2.803,1.341L3.677,20.802c-1.541-1.242-1.541-3.275,0-4.519L20.285,2.898z"/></g></svg>',this.wrapperDiv.appendChild(i),this.arrowLeft=i,i.addEventListener(o,function(e){t.arrowPress("left")}),a.setAttribute("class","slideSwell_arrow-div slideSwell_arrow-div--right"),a.innerHTML='<?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="22.135px" height="34.01px" viewBox="1.575 1.432 22.135 34.01" enable-background="new 1.575 1.432 22.135 34.01" xml:space="preserve"><g><path fill="#FFFFFF" stroke="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M21.931,16.283c1.541,1.243,1.541,3.276,0,4.519L5.324,34.188c-1.542,1.242-2.803,0.639-2.803-1.341V4.239c0-1.98,1.261-2.583,2.803-1.341L21.931,16.283z"/></g></svg>',this.wrapperDiv.appendChild(a),this.arrowRight=a,a.addEventListener(o,function(e){t.arrowPress("right")})}.call(this),function(){function t(){var t=this.naturalHeight,i=this.naturalWidth,a=s*t/i;e.data.natH=t,e.data.natW=i,e.data.imageWidth=s,e.wrapperDiv.style.height=a+"px"}var e=this,i=this.wrapperDiv.parentElement.clientWidth,a=this.images.length,o=.9,s=i*o,n=.025*i,r=s+n,l=a*s+a*n;this.data.halfImageTotal=r/2,this.movingDiv.style.width=l+"px",this.movingDiv.style["padding-left"]=(100-100*o)/2+"%",this.data.currentPos=0,this.data.centeredPositions=[],this.images.map(function(t,i){e.data.centeredPositions.push(i*r),e.images[i].position=i*r,e.images[i].el.style.width=s+"px",e.images[i].el.style["margin-right"]=n+"px",e.data.measureImg=e.images[i].el}),e.data.measureImg.complete?t.call(e.data.measureImg):this.data.measureImg.addEventListener("load",t),this.changeHeight(!0)}.call(this),function(){var t=this;"function"==typeof window.addEventListener&&this.movingDiv.addEventListener("touchstart",function(e){t.handleStart(e)}),"function"==typeof window.addEventListener&&this.movingDiv.addEventListener("touchmove",function(e){t.handleMove(e)}),"function"==typeof window.addEventListener&&this.movingDiv.addEventListener("touchend",function(){t.handleEnd()})}.call(this)}window.mobileCheck=function(){var t=!1;return function(e){(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(e)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(e.substr(0,4)))&&(t=!0)}(navigator.userAgent||navigator.vendor||window.opera),t},t.prototype.changeHeight=function(t){void 0!=t?this.images[this.data.currentPos].el.className="slideSwell_image--selected":(this.images[this.data.currentPos].el.className="slideSwell_image--selected",this.images[this.data.pastPosition].el.className="slideSwell_image")},t.prototype.arrowPress=function(t){var e=this.data,i=e.currentPos;"right"===t?i++:"left"===t&&i--,0===e.centeredPositions[i]?(e.xCurrent=e.centeredPositions[i],e.xUpdate=e.centeredPositions[i]):(e.xCurrent=-e.centeredPositions[i],e.xUpdate=-e.centeredPositions[i]),e.pastPosition=e.currentPos,e.currentPos=i,this.changeHeight(),this.cycle(this.movingDiv,e.centeredPositions[i]),this.checkArrowVis()},t.prototype.checkArrowVis=function(){0===this.data.currentPos?this.arrowLeft.style.display="none":this.arrowLeft.style.display="block",this.data.currentPos===this.images.length-1?this.arrowRight.style.display="none":this.arrowRight.style.display="block"},t.prototype.handleStart=function(t){this.data.xStart=t.touches[0].pageX,this.data.xCurrent=this.data.xUpdate,this.data.moved=!1},t.prototype.handleMove=function(t){var e=t.touches[0].pageX,i=this.data.xStart;this.data.xUpdate||(this.data.xUpdate=0);var a=this.data.xUpdate,o=Number(e-i+a);if(!this.data.moved){if(Math.abs(o-a)<35)return;Math.abs(o-a)>35&&(this.data.moved=!0)}this.disableScroll(),this.data.xCurrent=o,this.movingDiv.style.left=Math.floor(o)+"px",this.data.noMove=!1},t.prototype.handleEnd=function(){function t(t,e){i.pastPosition=t,i.currentPos=e,this.changeHeight(),this.checkArrowVis()}if(this.data.moved!==!1){var e,i=this.data,a=i.currentPos,o=i.xCurrent,s=i.centeredPositions,n=s.length;0>-o?(e=s[0],0!=a&&t.call(this,a,0)):-o>s[n-1]?(e=s[n-1],a!=n-1&&t.call(this,a,n-1)):-o<s[a]-i.halfImageTotal*this.dragThresholdRatio?(e=s[a-1],t.call(this,a,a-1)):-o>s[a]+i.halfImageTotal*this.dragThresholdRatio?(e=s[a+1],t.call(this,a,a+1)):e=s[a],this.cycle(this.movingDiv,e),i.xUpdate=-e,this.enableScroll()}},t.prototype.handleCancel=function(t){t.preventDefault()},t.prototype.cycle=function(t,e){function i(t){var e=new Date,i=setInterval(function(){var a=new Date-e,o=a/t.duration;o>1&&(o=1);var s=t.delta(o);t.step(s),1==o&&clearInterval(i)},t.delay||10)}var a=function(t){return t},o=250,s=+t.style.left.slice(0,-2),n=s+e;i({delay:1,duration:o||250,delta:a,step:function(e){t.style.left=s-n*e+"px"}})},t.prototype.disableScroll=function(){var t=this;document.addEventListener("touchstart",t.preventTouchStart,!1),document.addEventListener("touchmove",t.preventTouchMove,!1)},t.prototype.enableScroll=function(){var t=this;document.removeEventListener("touchstart",t.preventTouchStart,!1),document.removeEventListener("touchmove",t.preventTouchMove,!1)},t.prototype.preventTouchStart=function(t){t.preventDefault()},t.prototype.preventTouchMove=function(t){t.preventDefault()},window.SlideSwell=t}();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment