Screen Color Carousel

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

Thumbnail
This awesome code was written by StevenVentimiglia, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright StevenVentimiglia ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Screen Color Carousel</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="mainContainer">
	<div class="wrapper">
		<div class="page">
			<div class="content">
				<div id="carousel"></div>
			</div>
		</div>
	</div>
</div>
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/StevenVentimiglia/screen-color-carousel-eMRarQ */
*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  color: #333;
  font-size: 14px;
  line-height: 1.25;
  font-family: Arial, Helvetica, sans-serif;
  background: #333;
  min-width: 320px;
  overflow-x: hidden;
}

#mainContainer {
  padding: 20px;
}

.wrapper {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
}

.page {
  min-height: 400px;
}

.content {
  padding: 20px;
}

.group:before, .group:after {
  content: "";
  display: table;
}
.group:after {
  clear: both;
}

#carousel .slide {
  display: block;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transition: 0.25s linear;
  background-color: #999;
}
#carousel .slide .slideInfo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgba(0, 0, 0, 0.15);
  font-size: 2em;
}
#carousel .slide .leftArrow,
#carousel .slide .rightArrow {
  content: ' ';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  cursor: pointer;
}
#carousel .slide .leftArrow {
  left: 20px;
  border-right: 20px solid rgba(0, 0, 0, 0.15);
}
#carousel .slide .leftArrow:hover {
  border-right: 20px solid rgba(0, 0, 0, 0.25);
}
#carousel .slide .rightArrow {
  right: 20px;
  border-left: 20px solid rgba(0, 0, 0, 0.15);
}
#carousel .slide .rightArrow:hover {
  border-left: 20px solid rgba(0, 0, 0, 0.25);
}


/*Downloaded from https://www.codeseek.co/StevenVentimiglia/screen-color-carousel-eMRarQ */
// Define parent element
const carousel = document.getElementById('carousel');

// Create dynamic slide
const slide = document.createElement('div');
slide.classList.add('slide');
carousel.appendChild(slide);

// Create left and right navigation
const leftArrow = document.createElement('div');
const rightArrow = document.createElement('div');
leftArrow.classList.add('leftArrow');
rightArrow.classList.add('rightArrow');
slide.appendChild(leftArrow);
slide.appendChild(rightArrow);

// Add and display the initial slide count
let slideNum = 0;

// Initialize slide info and nav options
slide.insertAdjacentHTML('beforeend', '<span class="slideInfo">Slide #' + slideNum + '</span>');
leftArrow.style.display = "none";

// Control slide navigation
function chooseSlide(direction) {
	
	// Establish the slide count element
	const slideInfo = document.querySelector('.slideInfo');
	
	// Remove/Append slide count info
	viewSlide = () => {
		
		if (slideInfo) { slide.removeChild(slideInfo); };
		slide.insertAdjacentHTML('beforeend', '<span class="slideInfo">Slide #' + slideNum + '</span>');
		
		if (slideNum === 0) {
			leftArrow.style.display = "none";
		} else if (slideNum === 3) {
			rightArrow.style.display = "none";
		} else {
			leftArrow.style.display = "block";
			rightArrow.style.display = "block";
		}
		
	};
	
	// Navigate slides in the direction chosen by user
	if (direction === 'left' && slideNum > 0) { slideNum -= 1; };
	if (direction === 'right' && slideNum < 3) { slideNum += 1;	};
	
	// Display slides according to validated slide numbers
	if (slideNum > 0) {

		if (slideNum === 1) {
			slide.style.backgroundColor = "green";
			viewSlide();
		} else if (slideNum === 2) {
			slide.style.backgroundColor = "orange";
			viewSlide();
		} else if (slideNum === 3) {
			slide.style.backgroundColor = "purple";
			viewSlide();
		}

	} else if (slideNum <= 0) {
	
		slide.style.backgroundColor = "";
		viewSlide();
		
	}
};

// Slide navigation
leftArrow.addEventListener('click', () => {chooseSlide("left");});
rightArrow.addEventListener('click', () => {chooseSlide("right");});

Comments