C-Sliders

by Sam Fereday

HTML

<div class="slider-container">
  <div class="nav">
    <div class="prev"><a href="#">&lt;</a></div>
    <div class="next"><a href="#">&gt;</a></div>
  </div>
  <div class="slide-wrap">
    <div class="item">
      <img src="https://via.placeholder.com/1024x768" />
    </div>
    <div class="item">
      <img src="https://via.placeholder.com/1024x768" />
    </div>
    <div class="item">
      <img src="https://via.placeholder.com/1024x768" />
    </div>
  </div>
</div>

SCSS

html,
body {
  padding: 0;
  margin: 0;
  * {
    box-sizing: border-box;
  }
}

.ms-touch.slider {
  overflow-x: scroll;
  overflow-y: hidden;
  -ms-overflow-style: none;
  /* Hides the scrollbar. */
  -ms-scroll-chaining: none;
  /* Prevents Metro from swiping to the next tab or app. */
  -ms-scroll-snap-type: mandatory;
  /* Forces a snap scroll behavior on your images. */
  -ms-scroll-snap-points-x: snapInterval(0%, 100%);
  /* Defines the y and x intervals to snap to when scrolling. */
}

.slider-container {
  position: relative;
  overflow: hidden;
  .slide-wrap {
    overflow: hidden;
    transition: all 0.3s ease;
  }
  .item {
    float: left;
    position: relative;
    img {
      max-width: 100%;
      object-fit: cover;
    }
  }
  .nav {
    width: 100%;
    padding: 32px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
  }
  .next,
  .prev {
    width: 92px;
    font-size: 32px;
    a {
      color: #000;
    }
  }
  .next {
    float: right;
    text-align: right;
  }
  .prev {
    float: left;
  }
}

JavaScript 1.7

tconst getElements = (query, el = document) =>
  Array.prototype.slice.call(el.querySelectorAll(query), 0);

const getElement = (query, el) =>
  getElements(query, el)[0];

// Const stuff
const SLIDER_CLASSES = {
  NEXT: '.next',
  PREV: '.prev',
  ITEMS: '.item',
  CONTAINER: '.slider-container',
  HOLDER: '.slide-wrap'
}

const ANIMATE_CLASS = 'animate';

// Slider methods
const calculateMovementMargin = (width, index) =>
  ((width * (index)) - width);

const getPrevIndex = (index, len) =>
  index > 0 ? index - 1 : len - 1;

const getNextIndex = (index, len) =>
  index >= len - 1 ? 0 : index + 1;

const getTX = (event) =>
  event.touches[0].pageX;

// Treat it as a class.
const SliderComponent = ({
  container,
  holder,
  items,
  next,
  prev
}) => () => {

  // Measurements
  const collectionLength = items.length;
  const containerWidth = container.clientWidth;
  const totalWidth = collectionLength * containerWidth;
  const itemWidth = totalWidth / collectionLength;

  // Keep a constant global record of the index in this slider
  let index = 0,
    touchPointX = 0,
    movex = 0;

  // Bind input events
  prev.addEventListener('click', () => {
    index = getPrevIndex(index, collectionLength);
    holder.style.marginLeft = '-' + calculateMovementMargin(containerWidth, index + 1) + 'px';
  });

  next.addEventListener('click', () => {
    index = getNextIndex(index, collectionLength);
    holder.style.marginLeft = '-' + calculateMovementMargin(containerWidth, index + 1) + 'px';
  });

  // Apply dimensions
  holder.style.width = totalWidth + 'px';
  items.forEach(item => item.style.width = itemWidth + 'px');

  // MS events (not yet implemented)
  /*if (navigator.msMaxTouchPoints) {
    $(originContainer).addClass('ms-touch');
    $(originContainer).on('scroll', function() {
      $('.item').css('transform', 'translate3d(-' + (100 - $(this).scrollLeft() / 6) + 'px,0,0)');
    });
    return;
  }*/

  // Bind touch events
 ...