cuteribs-1/carousel.html

## carousel.html
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Carousel</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ"
    crossorigin="anonymous">
  <style>
    .carousel {
      border: 1px solid;
      position: relative;
    }

    .carousel-slices {
      position: relative;
      overflow: hidden;
      width: 100%;
    }

    .carousel-slices::after {}

    .carousel-slices>div {
      position: relative;
      width: 100%;
      display: none;
      transition: 0.6s ease-in-out left;
    transform: translate3d(100%, 0, 0);
    }

    .carousel-slices>div.active {
      display: block;
    transform: translate3d(0, 0, 0);
    }

    .carousel-left,
    .carousel-right {
      position: absolute;
      display: flex;
      top: 0;
      bottom: 0;
      width: 15%;
      text-align: center;
      justify-content: center;
      align-items: center;
      opacity: .5;
      font-size: 40px;
      font-weight: 600;
      cursor: pointer;
    }

    .carousel-left:hover,
    .carousel-right:hover {
      color: #ffffff;
      text-decoration: none;
      outline: 0;
      opacity: .9;
    }

    .carousel-left {
      left: 0;
    }

    .carousel-right {
      right: 0;
    }

  </style>
</head>

<body>
  <app-root>Loading...</app-root>
  <div class="container">
    <div class="carousel" style="width: 900px; height: 500px;">
      <div class="carousel-slices">
        <div class="active"><img src="https://lorempixel.com/900/500?r=1"></div>
        <div><img src="https://lorempixel.com/900/500?r=2"></div>
        <div><img src="https://lorempixel.com/900/500?r=3"></div>
        <div><img src="https://lorempixel.com/900/500?r=4"></div>
      </div>
      <a class="carousel-left">&lt;</a>
      <a class="carousel-right">&gt;</a>
    </div>
  </div>
  <script>
    var slices = document.querySelectorAll('.carousel-slices > div');

    var moveSlice = function (isNext) {
      var activeSlice = document.querySelector('.carousel-slices > div.active');
      var nextSlice;

      if (isNext) {
        nextSlice = activeSlice.nextElementSibling || slices[0];
      } else {
        nextSlice = activeSlice.previousElementSibling || slices[slices.length - 1];
      }

      activeSlice.classList.remove('active');
      nextSlice.classList.add('active');
    };

    document.querySelector('.carousel-left').addEventListener('click', function () {
      moveSlice(false);
    });
    document.querySelector('.carousel-right').addEventListener('click', function () {
      moveSlice(true);
    });

  </script>
</body>

</html>
	<!doctype html>
	<html>

	<head>
	<meta charset="utf-8">
	<title>Carousel</title>
	<base href="/">

	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="icon" type="image/x-icon" href="favicon.ico">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ"
	crossorigin="anonymous">
	<style>
	.carousel {
	border: 1px solid;
	position: relative;
	}

	.carousel-slices {
	position: relative;
	overflow: hidden;
	width: 100%;
	}

	.carousel-slices::after {}

	.carousel-slices>div {
	position: relative;
	width: 100%;
	display: none;
	transition: 0.6s ease-in-out left;
	transform: translate3d(100%, 0, 0);
	}

	.carousel-slices>div.active {
	display: block;
	transform: translate3d(0, 0, 0);
	}

	.carousel-left,
	.carousel-right {
	position: absolute;
	display: flex;
	top: 0;
	bottom: 0;
	width: 15%;
	text-align: center;
	justify-content: center;
	align-items: center;
	opacity: .5;
	font-size: 40px;
	font-weight: 600;
	cursor: pointer;
	}

	.carousel-left:hover,
	.carousel-right:hover {
	color: #ffffff;
	text-decoration: none;
	outline: 0;
	opacity: .9;
	}

	.carousel-left {
	left: 0;
	}

	.carousel-right {
	right: 0;
	}

	</style>
	</head>

	<body>
	<app-root>Loading...</app-root>
	<div class="container">
	<div class="carousel" style="width: 900px; height: 500px;">
	<div class="carousel-slices">
	<div class="active"><img src="https://lorempixel.com/900/500?r=1"></div>
	<div><img src="https://lorempixel.com/900/500?r=2"></div>
	<div><img src="https://lorempixel.com/900/500?r=3"></div>
	<div><img src="https://lorempixel.com/900/500?r=4"></div>
	</div>
	<a class="carousel-left"><</a>
	<a class="carousel-right">></a>
	</div>
	</div>
	<script>
	var slices = document.querySelectorAll('.carousel-slices > div');

	var moveSlice = function (isNext) {
	var activeSlice = document.querySelector('.carousel-slices > div.active');
	var nextSlice;

	if (isNext) {
	nextSlice = activeSlice.nextElementSibling \|\| slices[0];
	} else {
	nextSlice = activeSlice.previousElementSibling \|\| slices[slices.length - 1];
	}

	activeSlice.classList.remove('active');
	nextSlice.classList.add('active');
	};

	document.querySelector('.carousel-left').addEventListener('click', function () {
	moveSlice(false);
	});
	document.querySelector('.carousel-right').addEventListener('click', function () {
	moveSlice(true);
	});

	</script>
	</body>

	</html>