Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

            
              <div id="carousel">
  <div class="slides">
    <div class="hero hero1"></div>
  </div>
  <div class="slides">
    <div class="hero hero2"></div>
  </div>
  <div class="slides">
    <div class="hero hero3"></div>
  </div>

  <a id="heroPrev" class="prev hero-nav">&#10094</a>
  <a id="heroNext" class="next hero-nav">&#10095</a>

</div>
<!-- end #carousel -->

<div id="heroBtnContainer" class="button-container">
  <div id="heroNav0" class="hero-radio-button"></div>
  <div id="heroNav1" class="hero-radio-button"></div>
  <div id="heroNav2" class="hero-radio-button"></div>
</div>
            
          
!

CSS

            
              /* https://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
/* line 6, ../scss/partials/_reset.scss */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
/* line 27, ../scss/partials/_reset.scss */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

/* line 31, ../scss/partials/_reset.scss */
body {
	line-height: 1; }

/* line 34, ../scss/partials/_reset.scss */
ol, ul {
	list-style: none; }

/* line 37, ../scss/partials/_reset.scss */
blockquote, q {
	quotes: none; }

/* line 40, ../scss/partials/_reset.scss */
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}

/* line 45, ../scss/partials/_reset.scss */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* line 2, ../scss/partials/_global.scss */
html {
	box-sizing: border-box;
}

/* line 5, ../scss/partials/_global.scss */
*, *:before, *:after {
	box-sizing: inherit;
}

/* line 9, ../scss/partials/_global.scss */
body {
	background-color: #e6e8e1;
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

/* line 14, ../scss/partials/_global.scss */
h1 {
	font-size: 30px;
	line-height: 0.65;
}

/* line 19, ../scss/partials/_global.scss */
h5 {
	font-size: 14px;
	line-height: 1.857;
}

/* line 24, ../scss/partials/_global.scss */
p {
	color: rgba(58, 68, 72, 0.8);
	font-size: 13px;
	line-height: 1.385;
	text-align: justify;
}

/* line 32, ../scss/partials/_global.scss */
.centered {
	margin: 0 auto;
}

/* line 37, ../scss/partials/_global.scss */
.shadowed {
	box-shadow: 0 0 8px 1px #b3b6b6;
}

#carousel .animate {
	animation: animate 1s;
}
@-webkit-keyframes slide-over {
	from {
		opacity: 0;
	}
	to {
	opacity: 100%;
	}
}

/* line 1, ../scss/partials/_carousel.scss */
#carousel {
	height: 450px;
	width: 900px;
	margin: 20px auto 0;
	overflow: hidden;
	position: relative;
}
@media (max-width: 768px) {
	/* line 1, ../scss/partials/_carousel.scss */
	#carousel {
		height: 300px;
		width: 600px;
	}
}
@media (max-width: 480px) {
	/* line 1, ../scss/partials/_carousel.scss */
	#carousel {
		height: 225px;
		width: 450px;
	}
}
/* line 16, ../scss/partials/_carousel.scss */
#carousel .slides {
	-webkit-animation: slide-over 1s;
	border: 5px solid white;
	display: none;
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
/* line 25, ../scss/partials/_carousel.scss */
#carousel .slides .hero {
	height: 100%;
	width: 100%;
}
/* line 29, ../scss/partials/_carousel.scss */
#carousel .slides .hero1 {
	background: url("http://drewtadams.com/images/hero1.png") white;
	background-size: 100% auto;
}
/* line 33, ../scss/partials/_carousel.scss */
#carousel .slides .hero2 {
	background: url("http://drewtadams.com/images/hero2.png") white;
	background-size: 100% auto;
}
/* line 37, ../scss/partials/_carousel.scss */
#carousel .slides .hero3 {
	background: url("http://drewtadams.com/images/hero3.jpg") white;
	background-size: 100% auto;
}
/* line 43, ../scss/partials/_carousel.scss */
#carousel .hero-nav {
	color: white;
	cursor: pointer;
	font-size: 30px;
	padding: 10px;
	position: absolute;
	top: 50%;
	text-shadow: #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px,
				 #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px;
	transform: translate(0, -50%);
	transition: ease-out 0.6s;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
/* line 53, ../scss/partials/_carousel.scss */
#carousel .hero-nav:hover {
	background: rgba(0, 0, 0, 0.8);
	transition: ease-in 0.6s;
}
/* line 58, ../scss/partials/_carousel.scss */
#carousel .prev {
	left: 5px;
}
/* line 61, ../scss/partials/_carousel.scss */
#carousel .next {
	right: 5px;
}

/* line 66, ../scss/partials/_carousel.scss */
.button-container {
	margin: 19px auto;
	text-align: center;
}
@media (max-width: 480px) {
	/* line 66, ../scss/partials/_carousel.scss */
	.button-container {
		min-width: 450px;
	}
}
/* line 73, ../scss/partials/_carousel.scss */
.button-container .hero-radio-button {
	background: white;
	border-top: 1px inset;
	border-radius: 7.5px;
	cursor: pointer;
	display: inline-block;
	margin-right: 5px;
	height: 15px;
	width: 15px;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
/* line 84, ../scss/partials/_carousel.scss */
.button-container .hero-radio-button:last-child {
	margin: 0;
}
/* line 89, ../scss/partials/_carousel.scss */
.button-container .selected {
	background: black;
}

/* line 1, ../scss/partials/_buttons.scss */
.radio-button {
	cursor: pointer;
	display: inline-block;
	height: 15px;
	width: 15px;
}
/* line 7, ../scss/partials/_buttons.scss */
.radio-button .selected {
	background: url(../images/buttons/selected-radio.png);
	height: 100%;
	width: 100%;
}
/* line 13, ../scss/partials/_buttons.scss */
.radio-button .unselected {
	background: url(../images/buttons/unselected-radio.png);
	height: 100%;
	width: 100%;
}

/* line 20, ../scss/partials/_buttons.scss */
.button {
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	-ms-border-radius: 7px;
	border-radius: 7px;
	background: #007ad6;
	height: 41px;
	width: 100%;
	padding: 2px;
	position: relative;
}
/* line 28, ../scss/partials/_buttons.scss */
.button .glare {
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	-ms-border-radius: 7px;
	border-radius: 7px;
	background: #40a7f4;
	height: 20px;
	width: 100%;
}
/* line 35, ../scss/partials/_buttons.scss */
.button .icon {
	border-left: 2px solid #83beea;
	height: 35px;
	width: 27px;
	position: absolute;
	top: 3px;
	right: 14px;
}
/* line 43, ../scss/partials/_buttons.scss */
.button .icon img {
	margin: 4px 0 0 3px;
}
/* line 48, ../scss/partials/_buttons.scss */
.button .text {
	color: white;
	float: right;
	font-size: 15px;
	text-shadow: 0 0 2px black;
	text-transform: uppercase;
	position: absolute;
	margin: 0 auto;
	top: 15px;
	left: 12px;
}
/* line 59, ../scss/partials/_buttons.scss */
.button .without-icon {
	left: 21.5%;
}
            
          
!

JS

            
              // global variables
// hero carousel
var currentIndex = 0;
var previousSlideIndex = 0;

var slides = document.getElementsByClassName('slides');

var heroPrev = document.getElementById('heroPrev');
var heroNext = document.getElementById('heroNext');

var heroNav0 = document.getElementById('heroNav0');
var heroNav1 = document.getElementById('heroNav1');
var heroNav2 = document.getElementById('heroNav2');
var heroNavBtns = document.getElementsByClassName('hero-radio-button');


// load event listeners when the DOM is loaded
document.addEventListener('DOMContentLoaded', startup());


// 
function startup() {
	initEventListeners();
	liveSlide(currentIndex = 0);
}// end startup()


// 
function initEventListeners() {
	heroPrev.addEventListener('click', function() { nextSlide(-1); });
	heroNext.addEventListener('click', function() { nextSlide(1); });
	heroNav0.addEventListener('click', function() { liveSlide(0); });
	heroNav1.addEventListener('click', function() { liveSlide(1); });
	heroNav2.addEventListener('click', function() { liveSlide(2); });
}// end initEventListeners()


// determine next slide (left or right)
function nextSlide(x) {
	previousSlideIndex = currentIndex;
	currentIndex += x;

	if(currentIndex < 0)
		currentIndex = slides.length - 1;
	else if(currentIndex > slides.length -1)
		currentIndex = 0;
	//currentIndex %= slides.length;
	determineSlide();
}// end nextSlide(...)


// determine live slide
function liveSlide(x) {
	previousSlideIndex = currentIndex;
	currentIndex = x;
	determineSlide();
}// end liveSlide()


// determine which slide to show and which nav button to be selected
function determineSlide() {
	// hide previously displayed slide and deselect nav button
	slides[previousSlideIndex].style.display = 'none';
	heroNavBtns[previousSlideIndex].className = 'hero-radio-button';//heroNavBtns[previousSlideIndex].className.replace(' selected', '')


	// display selected slide and select nav button
	slides[currentIndex].style.display = 'block';
	heroNavBtns[currentIndex].className += ' selected';
}// end determineSlide()










            
          
!
999px

Console