Slider

index.html

  <div class="slider" data-state="0">  
   
      <svg id="prev" viewBox="0 0 31 101" version="1.1" class="pfeil prev left"><path d="M 0,0 30,50 0,100"></path></svg>
      <svg id="next" viewBox="0 0 31 101" version="1.1" class="pfeil next left"><path d="M 0,0 30,50 0,100"></path></svg>
    
    <div class="status">
      <div class="stat" data-key="0"></div>
      <div class="stat" data-key="1"></div>
      <div class="stat" data-key="2"></div>
      <div class="stat" data-key="3"></div>
      <div class="stat" data-key="4"></div>
      <div class="stat" data-key="5"></div>
    </div>
    <div class="image" data-key="0" >
      <img src="https://picsum.photos/1200/1200/?image=999" alt=""/>
    </div>
    <div class="image" data-key="1">
      <img src="https://picsum.photos/1200/1200/?image=998" alt=""/>
    </div>
    <div class="image" data-key="2">
      <img src="https://picsum.photos/1200/1200/?image=977" alt=""/>
    </div>
    <div class="image" data-key="3">
      <img src="https://picsum.photos/1200/1200/?image=996" alt=""/>
    </div>
    <div class="image" data-key="4" data-active>
      <img src="https://picsum.photos/1200/1200/?image=972" alt=""/>
    </div>
    <div class="image" data-key="5">
      <img src="https://picsum.photos/1200/1200/?image=974" alt=""/>
    </div>
  </div>

script.js

console.clear();
initslider();
function initslider() {
  const elPrevButton = document.querySelector('.slider #prev');
  const elNextButton = document.querySelector('.slider #next');

  const elImages = Array.from(document.querySelectorAll('.slider .image'));

  let state = {
    photo: 0
  };

  function send(event) {

    const elActives = document.querySelectorAll('.slider [data-active]');

    Array.from(elActives)
      .forEach(el => el.removeAttribute('data-active'));

    switch (event) {
      case 'PREV':
        state.photo--;
        // Math.max(state.photo - 1, 0);
        break;
      case 'NEXT':
        state.photo++;
        // Math.min(state.photo + 1, elImages.length - 1);
        break;
      default:
        state.photo = +event;
        break;
    }

    var len = elImages.length;
    // Loop Around
    //state.photo = ( ( state.photo % len) + len ) % len;
    state.photo = Math.max(0, Math.min( state.photo, len - 1) );

    Array.from(document.querySelectorAll(`.slider [data-key="${state.photo}"]`))
      .forEach( el => {
      el.setAttribute('data-active', true);
    });


  }
  elPrevButton.addEventListener('click', () => {
    send('PREV');
  });

  elNextButton.addEventListener('click', () => {
    send('NEXT');
  });

  const elStatus = Array.from(document.querySelectorAll('.slider .stat'));
  elStatus.forEach( stat => { 
    stat.addEventListener('click', () => {
      send(stat.dataset.key);
    });
  });
  send(0);
};

slider.markdown

Slider

A Pen by Tu Pham on CodePen.

License.

style.stylus

body {
  display:flex;
  justify-content:center;
  align-items: center;
}
*, *:before, *:after {
  box-sizing: border-box;
  position: relative;
  transition-property: transform, opacity, filter;
  transition-duration: 600ms, 600ms, 600ms;
  transition-timing-function: cubic-bezier(.5, 0, .5, 1);
}
.slider {
  position:relative;
  display: flex;
  width: 90vw;
  height: 90vh;
  overflow: hidden;
  .status {
    position: absolute;
    left:40%;
    bottom: 10px;
    display:flex;
    .stat {
      width:10px;
      height:10px;
      background-color:transparent;
      border-radius:50%;
      z-index:11;
      margin: 0px 5px;
      border: 2px solid #fff;
    }
    .stat[data-active] {
      background-color:#fff;
    }
  }
  
  img {
    object-fit: cover;
    object-position: center 80%;
    width: 100%;
    height: 100%;
    display: block;
  }
  .image {
    width: 100%;
    margin-right: -100%;
    opacity: 0;
    transform: translateX(-100%);
    img {
      transform:scale(.8);
    }
  }
  .image[data-active] {
    opacity:1;
    transform: translateX(0);
    img {
      transform: scale(1.4);
    }
  }
  .image[data-active] ~.image {
    opacity: 0;
    transform: translateX(100%);
  }
  svg {
   height: 60px;
    position:absolute;
    top:50%;
    margin-top:-30px;
    z-index: 1000;
    cursor: pointer;
    path {
      stroke: #fff;
      stroke-width:3px;
      fill:transparent;
    }
    &#next {
      right:10px;

    }
    &#prev {
      left:10px;
      transform:rotate(180deg);
    }
  }
}