Test Carousel

In this example below you will see how to do a Test Carousel with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by ovdojoey, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ovdojoey ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Test Carousel</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="car-wrapper">
  <ul class="car-item-list">
    <li class="car-item car-item-active">
      <div class="car-item-image">
        image
      </div>
      <div class="car-item-footer">
         text
      </div>
    </li>
    <li class="car-item ">
      <div class="car-item-image">
        image
      </div>
      <div class="car-item-footer">
         text
      </div>
    </li>
    <li class="car-item">
      <div class="car-item-image">
        image
      </div>
      <div class="car-item-footer">
         text
      </div>
    </li>
    <li class="car-item">
      <div class="car-item-image">
        image
      </div>
      <div class="car-item-footer">
         text
      </div>
    </li>
    <li class="car-item">
      <div class="car-item-image">
        image
      </div>
      <div class="car-item-footer">
         text
      </div>
    </li>
  </ul>
</div>
  
  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/ovdojoey/test-carousel-EbKmRL */
body, html {
  padding: 0;
  width: 100%;
  overflow: hidden;
  margin: 0;
}

.car-wrapper {
  width: 100%;
  height: 200px;
  overflow: hidden;
  padding: 40px 0;
  max-width: 400px;
  background: #ccc;
  margin: auto;
}

.car-item-list {
  list-style: none;
  padding: 0 10px;
  margin: 0;
  white-space: nowrap;
  width: 1300px;
  transition: transform 200ms;
  position: relative;
}
.car-item-list.car-item-list-scrolling-end {
  transition-duration: 150ms;
}
.car-item-list.car-item-list-scrolling {
  transition-duration: 0ms;
}
.car-item-list .car-item {
  float: left;
  width: 300px;
  transform: scale(0.85);
  height: 200px;
  background: #191919;
  display: block;
  transition: opacity 250ms, transform 300ms;
  position: relative;
}
.car-item-list .car-item-active {
  transform: scale(1);
  transition: transform 400ms 100ms cubic-bezier(0.175, 0.985, 0.32, 1.3), opacity 50ms;
}
.car-item-list .car-item-exit {
  transform: scale(0.85) translateX(30px);
  transition-timing-function: ease;
  opacity: 0.5;
}
.car-item-list .car-item-footer {
  position: absolute;
  width: 100%;
  height: 100px;
  background: yellow;
  left: 0;
  bottom: 0;
}


/*Downloaded from https://www.codeseek.co/ovdojoey/test-carousel-EbKmRL */
function iWheelsCarousel() {
  if (!(this instanceof iWheelsCarousel)){
    return new iWheelsCarousel();
  }
  
  let _this = this; // for binding purposes
  
  const wrapper = document.querySelector(".car-wrapper"),
      list = document.querySelector(".car-item-list"),
      listItems = list.querySelectorAll(".car-item"),
      lastListItemIdx = listItems.length - 1,
      listItemWidth = listItems[0].offsetWidth,
      
      classes = {
        activeItem: "car-item-active",
        exitingItem: "car-item-exit",
        listIsBeingScrolled: "car-item-list-scrolling",
        listScrollingEnded: "car-item-list-scrolling-end"
      };
  
  let activeListItemIdx = 0,
      listXPos = 0;
      
  
  this.goForward = function(numberOfTimes = 1) {
    numberOfTimes = (numberOfTimes + activeListItemIdx <= lastListItemIdx) ? numberOfTimes : lastListItemIdx - activeListItemIdx;    
    listItems[activeListItemIdx].classList.remove(classes.activeItem);
    listItems[activeListItemIdx].classList.add(classes.exitingItem);
    activeListItemIdx = activeListItemIdx + numberOfTimes;
    let newListXPos = (activeListItemIdx * listItemWidth * -1);
    list.style.transform = `translateX(${newListXPos}px)`; // refactor to ES5 \
    listXPos = newListXPos;
    listItems[activeListItemIdx].classList.remove(classes.exitingItem);
    listItems[activeListItemIdx].classList.add(classes.activeItem);
    
  };
  
  
  this.goBack = function(numberOfTimes = 1) {
    numberOfTimes = (activeListItemIdx - numberOfTimes > 0) ? numberOfTimes : activeListItemIdx;
    listItems[activeListItemIdx].classList.remove(classes.activeItem);
    activeListItemIdx = activeListItemIdx - numberOfTimes;
    let newListXPos = (activeListItemIdx * listItemWidth * -1);  
    list.style.transform = `translateX(${newListXPos}px)`; // refactor to ES5 and maybe polyfill
    listXPos = newListXPos;
    listItems[activeListItemIdx].classList.remove(classes.exitingItem);
    listItems[activeListItemIdx].classList.add(classes.activeItem);
  };
     
  
  function setupList() {
    // Set width to exceed item count
    let width = listItems.length * listItemWidth;
    list.style.width = width + "px";
  }
  
  function itemClickHandler(index, carousel, evt) {
    if (index > activeListItemIdx) {
      carousel.goForward(index - activeListItemIdx);
    } else {
      carousel.goBack(activeListItemIdx - index);
    }
  }
  
  function setupClickListeners() {
    let items = [].slice.call(listItems);
    items.forEach(function(ele, idx) {
      ele.addEventListener("click", itemClickHandler.bind(ele, idx, _this));
    });
  }
  
  function SwipeHandler(carousel) {
    let xPos = 0,
        yPos = 0,
        newListXPos = listXPos,
        multiplier = 1.05,
        distance = 0;
    
    this.start = function(evt) {
      distance = 0;
      xPos = evt.touches[0].clientX;
      yPos = evt.touches[0].clientY;
      list.classList.add(classes.listIsBeingScrolled);
    }
    this.move = function(evt) {
      distance = xPos - evt.touches[0].clientX;
      newListXPos = (listXPos - distance) * multiplier;
      list.style.transform = `translateX(${newListXPos}px)`; // refactor to ES5 and maybe polyfill
    }
    this.end = function(evt) {
      list.classList.remove(classes.listIsBeingScrolled);
      list.classList.add(classes.listScrollingEnded);
      setTimeout(() => { list.classList.remove(classes.listScrollingEnded); }, 200);  // refactor this to jQuery (this removes momentium from the scroll)
      
      if (Math.abs(distance) < 30) return false;
      
      if (newListXPos > listXPos) {
        carousel.goBack(1);
      } else {
        carousel.goForward(1);
      }
      
      // listXPos = newListXPos; 
      
    }
  }
  
  function setupSwipeListeners() {
    let swipeHandler = new SwipeHandler(_this);
    wrapper.addEventListener("touchstart", swipeHandler.start);
    wrapper.addEventListener("touchmove", swipeHandler.move);
    wrapper.addEventListener("touchend", swipeHandler.end);
  }
    
  function init() {
    setupList();
    setupClickListeners();
    setupSwipeListeners();
  }
  
  init();
  
}
var carousel = iWheelsCarousel();

Comments