arrow_back
View code

 <div class="container">
        <div class="carousel">
          <div class="carousel-wrapper">
            <ol class="carousel-items">
              <li class="carousel-item first">
                <div>
                    <div class="image">Lorem ipsum dolor sit amet consectetur adipisicing.</div>
                    <div class="title">title 1</div>
                    <div class="sub-title">subtitle 1</div>
                </div>
              </li>
              <li class="carousel-item second">
                <div>
                    <div class="image">Lorem ipsum dolor sit amet consectetur adipisicing.</div>
                    <div class="title">title 2</div>
                    <div class="sub-title">subtitle 2</div>
                </div>
              </li>
              <li class="carousel-item third">
                <div>
                    <div class="image">Lorem ipsum dolor sit amet consectetur adipisicing.</div>
                    <div class="title">title 3</div>
                    <div class="sub-title">subtitle 3</div>
                    
                </div>
              </li>
              <li class="carousel-item forth">
                <div>
                    <div class="image">Lorem ipsum dolor sit amet consectetur adipisicing.</div>
                    <div class="title">title 4</div>
                    <div class="sub-title">subtitle 4</div>
                </div>
              </li>
              <li class="carousel-item fifth">
                <div>
                    <div class="image">Lorem ipsum dolor sit amet consectetur adipisicing.</div>
                    <div class="title">title 5</div>
                    <div class="sub-title">subtitle 5</div>
                </div>
              </li>
              <li class="carousel-item sixth">
                <div>
                    <div class="image">Lorem ipsum dolor sit amet consectetur adipisicing.</div>
                    <div class="title">title 6</div>
                    <div class="sub-title">subtitle 6</div>
                </div>
              </li>
            </ol>
          </div>
          <nav>
            <ul class="controls">
              <li><button class="prev" style="outline: none;"><svg class="icon" viewBox="0 0 20 20"><polyline points="13 18 5 10 13 2" fill="none" stroke="currentColor"></polyline></svg></button></li>
              <li><button class="next" style="outline: none;"><svg class="icon" viewBox="0 0 20 20"><polyline points="7 18 15 10 7 2" fill="none" stroke="currentColor"></polyline></svg></button></li>
            </ul>
          </nav>
        </div>
      </div>
                        
Copy HTML

/*
 * File: _carousel-v1.scss
 * Location /src/scss/components
 * Carousel v1 component
 */

:root {
	--carousel-items-gap: 10px;
	--carousel-item-base-size: 450px;
	--carousel-item-height: 24rem;
	--carousel-controls-bg-color: var(--primary-color);
	--carousel-controls-arrow-color: var(--color-bg);
	--carousel-transition-duration: 0.4s;
	--carousel-item-bg-color: var(--color-lowest);
	--carousel-controls-width: 50px;
	--icon-arrow-size: 14px;
	--carousel-controls-y-position: 40%;
}

.carousel {
	position: relative;
}

.carousel .carousel-wrapper {
	overflow: hidden;
}

.carousel .carousel-wrapper .carousel-items {
	display: flex;
	flex-wrap: nowrap;
	will-change: transform;
	list-style: none;
	margin: 0;
	padding: 0;
}

.carousel .carousel-wrapper .carousel-items.animating {
	transition-property: transform;
	transition-duration: var(--carousel-transition-duration);
	transition-timing-function: ease-out;
}

.carousel .carousel-wrapper .carousel-items .carousel-item {
	flex-shrink: 0;
	width: var(--carousel-item-base-size);
	margin-right: var(--carousel-items-gap);
	margin-bottom: var(--carousel-items-gap);
}

.carousel .carousel-wrapper .carousel-items .carousel-item div {
	display: flex;
	flex-direction: column;
	height: var(--carousel-item-height);
}

.carousel nav ul.controls {
	list-style: none;
}

.carousel nav ul.controls button {
	position: absolute;
	top: var(--carousel-controls-y-position);
	z-index: 5;
	transform: translateY(-50%);
	border: 0;
	background: var(--carousel-controls-bg-color);
	display: flex;
	justify-content: center;
	align-items: center;
	width: var(--carousel-controls-width);
	height: var(--carousel-controls-width);
	color: var(--carousel-controls-arrow-color);
	border-radius: 50%;
	z-index: 1;
	transition: .2s;
	cursor: pointer;
}

.carousel nav ul.controls button:active {
	transform: translateY(calc(-50%)3px);
}

.carousel nav ul.controls button:hover {
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.carousel nav ul.controls button[disabled] {
	pointer-events: none;
	background-color: #eee;
	color: #ccc;
	display: none;
}

.carousel nav ul.controls button.prev {
	left: calc(-1 * var(--carousel-controls-width) / 2);
}

.carousel nav ul.controls button.next {
	right: calc(-1 * var(--carousel-controls-width) / 2);
}

.carousel nav ul.controls button .icon {
	display: block;
	font-size: var(--icon-arrow-size);
	stroke-width: 2;
}

.carousel-item div .image {
	width: 100%;
	background-size: cover;
	padding: 10%;
	font-size: 20px;
	color: var(--color-lowest);
	height: 400px;
	display: flex;
	align-content: center;
	justify-content: center;
}

.carousel-item div .title {
	padding: 10px 0;
	flex-grow: 0;
	flex-basis: 40px;
	font-size: 26px;
	color: var(--color-higher);
}

.carousel-item div .sub-title {
	flex-grow: 0;
	color: var(--color-higher);
	flex-basis: 20px;
}

.carousel-item.first div .image {
	background-image: url("/assets/images/1.jpg");
}

.carousel-item.second div .image {
	background-image: url("/assets/images/2.jpg");
}

.carousel-item.third div .image {
	background-image: url("/assets/images/3.jpg");
}

.carousel-item.forth div .image {
	background-image: url("/assets/images/4.jpg");
}

.carousel-item.fifth div .image {
	background-image: url("/assets/images/5.jpg");
}

.carousel-item.sixth div .image {
	background-image: url("/assets/images/6.jpg");
}
                        
Copy SCSS

/*
 * File: carousel-v1.js
 * Location /src/js/components
 * Carousel v1 component
*/

const element = document.querySelector('.carousel');
const listWrapper = element.getElementsByClassName('carousel-wrapper')[0];
const list = element.getElementsByClassName('carousel-items')[0];
const items = element.getElementsByClassName('carousel-item');

const prev = document.querySelector('.prev');
const next = document.querySelector('.next');
var carouselResizeId;
var carouselItemAutoSize;
var carouselInitItems = [];

var carouselItemsNb = items.length;
var carouselSelectedItem = 0;
var carouselTotTranslate = 0;
var carouselTranslateContainer = 0;
var carouselItemsWidth;
var carouselContainerWidth;
var carouselVisibItemsNb;
var carouselLoop = true;
var carouselItemOriginalWidth;
var carouselAnimating = false;

function setItemsWidth(bool) {
    for(var i = 0; i < items.length; i++) {
      items[i].style.width = carouselItemsWidth+"px";
      if(bool) carouselInitItems.push(items[i]);
    }
  };

  function insertBefore(nb, delta) {
    if(!carouselLoop) return;
    var clones = document.createDocumentFragment();
    var start = 0;
    if(delta) start = delta;
    for(var i = start; i < nb; i++) {
      var index = getIndex(carouselSelectedItem - i - 1),
        clone = carouselInitItems[index].cloneNode(true);
        clone.classList.add('js-clone');
      clones.insertBefore(clone, clones.firstChild);
    }
    list.insertBefore(clones, list.firstChild);
  };

  function removeClones(index, bool) {
    if(!carouselLoop) return;
    if( !bool) {
      bool = carouselVisibItemsNb;
    }
    for(var i = 0; i < bool; i++) {
      if(items[index]) list.removeChild(items[index]);
    }
  };

  function insertAfter(nb, init) {
      console.log('coming here');
    if(!carouselLoop) return;
    var clones = document.createDocumentFragment();
    for(var i = init; i < nb + init; i++) {
      var index = getIndex(carouselSelectedItem + carouselVisibItemsNb + i),
        clone = carouselInitItems[index].cloneNode(true);
    
        clone.classList.add('js-clone');
      clones.appendChild(clone);
    }
    list.appendChild(clones);
  };

  function updateCarouselClones() { 
      console.log(items.length);
    if(!carouselLoop) return;
    console.log(items.length, carouselVisibItemsNb*3)
    if(items.length < carouselVisibItemsNb*3) {
      insertAfter(carouselVisibItemsNb*3 - items.length, items.length - carouselVisibItemsNb*2);
    } else if(items.length > carouselVisibItemsNb*3 ) {
      removeClones(carouselVisibItemsNb*3, items.length - carouselVisibItemsNb*3);
    }
    setTranslate('translateX('+carouselTranslateContainer+'px)');
  };


 function resetItemAutoSize() {
    items[0].removeAttribute('style');
    carouselItemAutoSize = getComputedStyle(items[0]).getPropertyValue('width');
  };

function getPositiveValue(value, add) {
    value = value + add;
    if(value > 0) return value;
    else return getPositiveValue(value, add);
  };

function resetItemsWidth() {
    for(var i = 0; i < carouselInitItems.length; i++) {
      carouselInitItems[i].style.width = carouselItemsWidth+"px";
    }
  };

function resetCarouselControls(carousel) {
    if(carouselLoop) return;
      (carouselTotTranslate == 0) 
        ? prev.setAttribute('disabled', true) 
        : prev.removeAttribute('disabled');
      (carouselTotTranslate == (- carouselTranslateContainer - carouselContainerWidth) || items.length <= carouselVisibItemsNb) 
        ? next.setAttribute('disabled', true) 
        : next.removeAttribute('disabled');
  };

function getIndex(index) {
    if(index < 0) index = getPositiveValue(index, carouselItemsNb);
    if(index >= carouselItemsNb) index = index % carouselItemsNb;
    return index;
  };

  function setTranslate(translate) {
    list.style.transform = translate;
    list.style.msTransform = translate;
  };

function noLoopTranslateValue(direction) {
    var translate = carouselTotTranslate;
    if(direction == 'next') {
      translate = carouselTotTranslate + carouselTranslateContainer;
    } else if(direction == 'prev') {
      translate = carouselTotTranslate - carouselTranslateContainer;
    }
    if(translate > 0)  {
      translate = 0;
      carouselSelectedItem = 0;
    }
    if(translate < - carouselTranslateContainer - carouselContainerWidth) {
      translate = - carouselTranslateContainer - carouselContainerWidth;
      carouselSelectedItem = items.length - carouselVisibItemsNb;
    }
    if(carouselVisibItemsNb > items.length) translate = 0;
    carouselTotTranslate = translate;
    return translate + 'px';
  };

  function updateClones(direction) {
    if(!carouselLoop) return;
    var index = (direction == 'next') ? 0 : items.length - carouselVisibItemsNb;
    removeClones(index, false);
    
    (direction == 'next') ? insertAfter(carouselVisibItemsNb, 0) : insertBefore(carouselVisibItemsNb);
    setTranslate('translateX('+carouselTranslateContainer+'px)');
  };

  function animateListCb(direction) {
    if(direction) updateClones(direction);
    carouselAnimating = false;
  };

function animateList(translate, direction) {
    list.classList.add('animating');
    console.log(translate);
    var initTranslate = carouselTotTranslate;
    if (!carouselLoop) {
        translate = noLoopTranslateValue(carousel, direction);
    }
    setTimeout(function() {setTranslate('translateX('+translate+')');});
  list.addEventListener('transitionend', function cb(event){
    list.classList.remove('animating');
    list.removeEventListener('transitionend', cb);
    carouselAnimating = false;
    animateListCb(direction);
    
  });
  resetCarouselControls();
  };

function showPrevItems() {
    if(carouselAnimating) return;
    carouselAnimating = true;
    carouselSelectedItem = getIndex(carouselSelectedItem - carouselVisibItemsNb);
    animateList('0', 'prev');
  };

  function showNextItems() {
    if(carouselAnimating) return;
    carouselAnimating = true;
    carouselSelectedItem = getIndex(carouselSelectedItem + carouselVisibItemsNb);
    console.log(carouselTranslateContainer*2);
    animateList(carouselTranslateContainer*2+'px', 'next');
  };

function initCarouselLayout() {
  var 
itemStyle = window.getComputedStyle(items[0]),
    containerStyle = window.getComputedStyle(listWrapper),
    itemWidth = parseFloat(itemStyle.getPropertyValue('width')),
      itemMargin = parseFloat(itemStyle.getPropertyValue('margin-right')),
      containerPadding = parseFloat(containerStyle.getPropertyValue('padding-left')),
    containerWidth = parseFloat(containerStyle.getPropertyValue('width'));
if( !carouselItemOriginalWidth) {
      carouselItemOriginalWidth = itemWidth;
    } else {
      itemWidth = carouselItemOriginalWidth;
    }
  if(carouselItemAutoSize) {
      carouselItemOriginalWidth = parseInt(carouselItemAutoSize);
      itemWidth = carouselItemOriginalWidth;
    }

  if(containerWidth < itemWidth) {
    carouselItemOriginalWidth = containerWidth;
    itemWidth = carouselItemOriginalWidth;
  }
  carouselVisibItemsNb = parseInt((containerWidth - 2*containerPadding + itemMargin)/(itemWidth+itemMargin));

  carouselItemsWidth = parseFloat( (((containerWidth - 2*containerPadding + itemMargin)/carouselVisibItemsNb) - itemMargin).toFixed(1));
  carouselContainerWidth = (carouselItemsWidth+itemMargin)* items.length;
  carouselTranslateContainer = 0 - ((carouselItemsWidth+itemMargin)* carouselVisibItemsNb);
  carouselTotTranslate = 0 - carouselSelectedItem*(carouselItemsWidth+itemMargin);  
}

initCarouselLayout();

setItemsWidth(true);

insertBefore(carouselVisibItemsNb);
updateCarouselClones();

function resetCarouselResize() {
    var visibleItems = carouselVisibItemsNb;
    resetItemAutoSize();
    initCarouselLayout(); 
    setItemsWidth(false);
    resetItemsWidth(); 
    var translate = noLoopTranslateValue();
    setTranslate('translateX('+translate+')');
  };

next.addEventListener('click', function() {
  showNextItems();
});
prev.addEventListener('click', function() {
  showPrevItems();
});
resetCarouselControls();
window.addEventListener('resize', function(event){
      clearTimeout(carouselResizeId);
      carouselResizeId = setTimeout(function(){
        resetCarouselResize();
      }, 200);
    });
Copy JS
Upgrade to professional version

Using professional version, you will have unlimited number of projects and unlimited access to materials in Kodhus.com.