uiSlide

uiSlide demo

by uiwwnw

HTML

<div class="wrap">
  <h1>
    uiSlide demo page</h1>
  <h2>normal & loop & fixed & indicator</h2>
  <div class="slideNormal loopfixed">
    <ul>
      <li><img src="https://raw.githubusercontent.com/uiwwnw/uislide/master/data/img/sampleimg1.jpg"><span>unfixed info1</span></li>
      <li><img src="https://raw.githubusercontent.com/uiwwnw/uislide/master/data/img/sampleimg2.jpg"><span>fixed info2</span></li>
      <li><img src="https://raw.githubusercontent.com/uiwwnw/uislide/master/data/img/sampleimg3.jpg"><span>fixed info3</span></li>
      <li><img src="https://raw.githubusercontent.com/uiwwnw/uislide/master/data/img/sampleimg4.jpg"><span>unfixed info4</span></li>
      <li><img src="https://raw.githubusercontent.com/uiwwnw/uislide/master/data/img/sampleimg5.jpg"><span>fixed info5</span></li>
      <li><img src="https://raw.githubusercontent.com/uiwwnw/uislide/master/data/img/sampleimg6.jpg"><span>fixed info6</span></li>
      <li><img src="https://raw.githubusercontent.com/uiwwnw/uislide/master/data/img/sampleimg7.jpg"><span>unfixed info7</span></li>
      <li><img src="https://raw.githubusercontent.com/uiwwnw/uislide/master/data/img/sampleimg8.jpg"><span>unfixed info8</span></li>
      <li><img src="https://raw.githubusercontent.com/uiwwnw/uislide/master/data/img/sampleimg9.jpg"><span>unfixed info9</span></li>
      <li><img src="https://raw.githubusercontent.com/uiwwnw/uislide/master/data/img/sampleimg10.jpg"><span>unfixed info10</span></li>
    </ul>
  </div>
  <h2>normal & unloop & unfixed & non indicator & no button</h2>
  <div class="slideNormal unloopunfixed">
    <ul>
      <li><img src="https://raw.githubusercontent.com/uiwwnw/uislide/master/data/img/sampleimg1.jpg"><span>unfixed info1</span></li>
      <li><img src="https://raw.githubusercontent.com/uiwwnw/uislide/master/data/img/sampleimg2.jpg"><span>unfixed info2</span></li>
      <li><img src="https://raw.githubusercontent.com/uiwwnw/uislide/master/data/img/sampleimg3.jpg"><span>unfixed...

CSS

html {
    font-size: 62.5%;
}

.wrap {
    max-width: 600px;
    margin: auto;
}

img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

ul {
    display: flex;
    padding: 0;
}

li {
    flex-shrink: 0;
    list-style: none;
}

.slideNormal {
    overflow: hidden;
    height: 30rem;
}

.slideNormal.fixed li {
    position: static;
}

.slideNormal.fixed li span {
    display: none;
    color: #fff;
    border-color: #fff;
    background: rgba(0, 0, 0, .7);
}

.slideNormal.fixed li.current span {
    display: block;
}

.slideNormal ul {
    height: 100%;
    margin: 0;
}

.slideNormal li {
    position: relative;
    width: 100%;
    height: 100%;
}

.slideNormal.width3loopfixed li span ,
.slideNormal.width3loopfixed3 li span {
    left: 50%;
    margin-left: -7.5rem;
}

.slideNormal li span {
    position: absolute;
    top: 50%;
    left: 5rem;
    width: 14rem;
    height: 10rem;
    margin-top: -5rem;
    line-height: 10rem;
    text-align: center;
    border: .5rem double #333;
    transition: 1s;
    background: rgba(255, 255, 255, .7);
}

.slideNormal button {
    z-index: 3;
    position: absolute;
    top: 50%;
    width: 3rem;
    height: 3rem;
    margin-top: -1.5rem;
    font-size: 2rem;
    color: #333;
    border: none;
    text-indent: -9999rem;
    background: rgba(255, 255, 255, .3);
}

.slideNormal button:before {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -1.3rem -.4rem;
    text-indent: 0;
    content: "";
}

.slideNormal .leftBtn {
    left: 0;
}

.slideNormal .leftBtn:before {
    content: "<";
}

.slideNormal .rightBtn {
    right: 0;
}

.slideNormal .rightBtn:before {
    content: ">";
}

.slideNormal .indicator {
    z-index: 3;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: .5rem 0;
    text-align: center;
    font-size: 0;
    background: rgba(0, 0, 0, .5);
}

.slideNormal .indicator i {
    display: inline-block;
    width: .8rem;
    height: .8rem;
...

JavaScript

!function(){var t=window,m={ready:function(t){(document.attachEvent?"complete"===document.readyState:"loading"!==document.readyState)?t():document.addEventListener("DOMContentLoaded",t)},style:function(a,o,r){for(var t in o)a.style[t]=o[t];r&&function t(){var e,n=[];for(var i in o)n.push(a.style[i]===o[i]);e=-1===n.indexOf(!1),r&&(!e&&requestAnimationFrame(t),e&&r())}()},ease:function(t){return(t*=2)<1?.5*t*t:-.5*(--t*(t-2)-1)},position:function(i,t,e,n,a,o){var r=!1,s=n,d=e,c=t,u=null;function l(t){if(!r){c<=t-u&&(r=!0);var e=(t-u)/c;val=m.ease(e);var n=r?d:(s+(d-s)*val).toFixed(1);a?(m.style(i,{transform:"none"}),m.style(i,{marginLeft:n+"px"})):(m.style(i,{marginLeft:"auto"}),m.style(i,{transform:"translateX("+n+"px)"})),requestAnimationFrame(l)}}requestAnimationFrame(function(t){l(u=t)})},returnOption:function(t){var e={ltr:!0,startIndex:0,loop:!1,double:!1,auto:!0,autoIng:!1,autoTime:3e3,view:1,slideNumber:1,zIndex:!0,currentClassName:"current",fixedClassName:"fixed",fixed:!1,center:!1,touchSafeWidth:40,button:!0,buttonLeftClassName:"leftBtn",buttonRightClassName:"rightBtn",indicator:!0,indicatorClassName:"indicator",animationTime:499};return(e=Object.assign(e,t)).direct=e.ltr?e.slideNumber:-e.slideNumber,e},repeat:function(t,e){for(var n=0;n<t;n++)e(n)}};t.uiSlide=function(t,e){var n=document.querySelector(t);if(0===n.length)return!1;var c=new Object,u=0,l=m.returnOption(e),r=(c.siv,c.ingSto,c.aniSto,c.ing=!1,c.slide=n,c.slideWidth=c.slide.offsetWidth,c.wrap=c.slide.children[0],c.item=Array.prototype.slice.call(c.wrap.children),c.itemWidth=c.slideWidth/l.view,c.itemLength=c.item.length,c.indLast=c.itemLength%l.direct==0,m.style(c.slide,{overflow:"hidden",position:"relative"}),m.style(c.wrap,{display:"flex",width:c.slideWidth+"px"}),m.repeat(c.itemLength,function(t){m.style(c.item[t],{zIndex:l.zIndex?1:void 0,flexShrink:0,width:1/l.view*100+"%"})}),l.loop&&(c.cloneLength=l.view,c.afterClone=[],c.beforeClone=[],m.repeat(c.cloneLength,function(t){var...