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 includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

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

Visit your global Editor Settings.

HTML

              
                <div class="wrapper">
    <section class="slideshow">
        <div class="label">
            <h1>Project Title</h1>
        </div>
        <div class="slide-container">
            <div class="slide multi">
                <div class="images">
                    <picture>
                        <!--[if IE 9]><audio><![endif]-->
                        <source srcset="http://placehold.it/392x560/11e87f/fff" media="(max-width: 440px)" />
                        <source srcset="http://placehold.it/632x896" media="(max-width: 640px)" />
                        <source srcset="http://placehold.it/505x487/e8117f/fff" media="(max-width: 960px)" />
                        <source srcset="http://placehold.it/787x762/117fe8/fff" />
                        <!--[if IE 9]></audio><![endif]-->
                        <img class="half" src="http://placehold.it/505x487/e8117f/fff" />
                    </picture>
                    <picture>
                        <!--[if IE 9]><audio><![endif]-->
                        <source srcset="http://placehold.it/392x560/11e87f/fff" media="(max-width: 440px)" />
                        <source srcset="http://placehold.it/632x896" media="(max-width: 640px)" />
                        <source srcset="http://placehold.it/360x246/e8117f/fff" media="(max-width: 960px)" />
                        <source srcset="http://placehold.it/562x382/117fe8/fff" />
                        <!--[if IE 9]></audio><![endif]-->
                        <img class="quarter" src="http://placehold.it/392x560/e8117f/fff" />
                    </picture>
                    <picture>
                        <!--[if IE 9]><audio><![endif]-->
                        <source srcset="http://placehold.it/392x560/11e87f/fff" media="(max-width: 440px)" />
                        <source srcset="http://placehold.it/632x896" media="(max-width: 640px)" />
                        <source srcset="http://placehold.it/360x246/e8117f/fff" media="(max-width: 960px)" />
                        <source srcset="http://placehold.it/562x382/117fe8/fff" />
                        <!--[if IE 9]></audio><![endif]-->
                        <img class="quarter" src="http://placehold.it/392x560/e8117f/fff" />
                    </picture>
                </div>
            </div>
            <div class="slide single">
                <picture>
                    <!--[if IE 9]><audio><![endif]-->
                    <source srcset="http://placehold.it/392x560/11e87f/fff" media="(max-width: 440px)" />
                    <source srcset="http://placehold.it/632x896" media="(max-width: 640px)" />
                    <source srcset="http://placehold.it/957x538/e8117f/fff" media="(max-width: 960px)" />
                    <source srcset="http://placehold.it/1352x760/117fe8/fff" />
                    <!--[if IE 9]></audio><![endif]-->
                    <img src="http://placehold.it/431x611/11e87f/fff" />
                </picture>
            </div>
            <div class="slide multi">
                <div class="images">
                    <picture>
                        <!--[if IE 9]><audio><![endif]-->
                        <source srcset="http://placehold.it/392x560/11e87f/fff" media="(max-width: 440px)" />
                        <source srcset="http://placehold.it/632x896" media="(max-width: 640px)" />
                        <source srcset="http://placehold.it/505x487/e8117f/fff" media="(max-width: 960px)" />
                        <source srcset="http://placehold.it/787x762/117fe8/fff" />
                        <!--[if IE 9]></audio><![endif]-->
                        <img class="half" src="http://placehold.it/505x487/e8117f/fff" />
                    </picture>
                    <picture>
                        <!--[if IE 9]><audio><![endif]-->
                        <source srcset="http://placehold.it/392x560/11e87f/fff" media="(max-width: 440px)" />
                        <source srcset="http://placehold.it/632x896" media="(max-width: 640px)" />
                        <source srcset="http://placehold.it/360x246/e8117f/fff" media="(max-width: 960px)" />
                        <source srcset="http://placehold.it/563x382/117fe8/fff" />
                        <!--[if IE 9]></audio><![endif]-->
                        <img class="quarter" src="http://placehold.it/392x560/e8117f/fff" />
                    </picture>
                    <picture>
                        <!--[if IE 9]><audio><![endif]-->
                        <source srcset="http://placehold.it/392x560/11e87f/fff" media="(max-width: 440px)" />
                        <source srcset="http://placehold.it/632x896" media="(max-width: 640px)" />
                        <source srcset="http://placehold.it/360x246/e8117f/fff" media="(max-width: 960px)" />
                        <source srcset="http://placehold.it/563x382/117fe8/fff" />
                        <!--[if IE 9]></audio><![endif]-->
                        <img class="quarter" src="http://placehold.it/392x560/e8117f/fff" />
                    </picture>
                </div>
            </div>
        </div>
    </section>
</div>
              
            
!

CSS

              
                html, body { 
    height: 100%; 
    line-height: 130%; 
    @extend %book;
    background: $gray;
}
h1 { 
    margin: 0; 
    font-weight: normal; 
    line-height: 130%; 
}
img { 
    width: 100%; 
    height: auto; 
    vertical-align: bottom; 
}
button { 
    -webkit-appearance: none; 
    border: 0; 
}

/************** GENERAL ***********************/
.wrapper {
    width: 1360px;
    margin: 30px auto;
    overflow: hidden;
    background: white;
    @include breakpoint(max-size) {
        width: 100%;
        margin: 0;
    }
}
section { 
    @include float-left; 
    width: 100%;
}
.label {
    position: absolute;
    padding: 30px;
    bottom: 8px;
    left: 6px;
    max-width: 98.8235294%;
    background: rgba(255,255,255,0.85);
    z-index: 2;
    a { text-decoration: none; }
    h1 { 
        @include font-size(34); 
        line-height: 100%;
        @extend %light;
        color: $blue;
        a { 
            color: $blue; 
            text-decoration: none; 
        }
    }
    
    @include breakpoint(max-size) {
        padding: 2.2058824vw;
        h1 { @include vw-type(34); }
    }
    @include breakpoint(small-desktop) {
        h1 { @include vw-type(45); }
    }
    @include breakpoint(mobile) {
        h1 { @include vw-type(80); }
    }
}

/************** SLIDESHOW ***********************/
.slideshow {
    @include float-left;
    width: 100%;
    padding: 4px;
    & > * { z-index: 1; }
    &>.label { z-index: 2; left: 8px; }

    .slick-slide {
        position: relative;
        height: 760px;
        .label { bottom: 4px; left: 4px; }
        h2 { margin-bottom: 5px; }
        img { z-index: 1; }

        @include breakpoint(max-size) {
            height: 55.8823529vw
        }
        @include breakpoint(mobile) {
            height: 140vw;
        }
    }
    .slick-prev, .slick-next { 
        position: absolute; 
        bottom: 40px; 
        width: 40px; 
        height: 40px; 
        z-index: 2; 
        &:hover {
            background-color: white;
        }
    }
    .slick-next {
        right: 40px;
        @include svg-png('arrow-right-blue',40px,40px); 
        background-color: rgba(255,255,255,0.9);
        background-size: 30%;
        @include breakpoint(mobile) {
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }
    }
    .slick-prev {
        right: 84px;
        @include svg-png('arrow-left-blue',40px,40px); 
        background-color: rgba(255,255,255,0.9);
        background-size: 30%;
        @include breakpoint(mobile) {
            top: 0;
            bottom: 0;
            left: 0;
            right: inherit;
            margin: auto;
        }
    }
    
    .single img { height: 100%; }
    .multi {
        .images { 
            @include float-left; 
            width: 100%; 
            height: 100%; 
        }
        img { float: left; }
        .half { 
            width: 58.5%; 
            height: 100%; 
            padding-right: 4px; 
        }
        .quarter { 
            width: 41.5%; 
            height: 50%; 
            padding: 0; 
        }
        .images picture:last-child .quarter { padding: 4px 0 0; }
    }
    .partial img { 
        width: 100%; 
        height: 100%; 
        padding: 0; 
    }
    img.mobile {
        @include breakpoint(mobile) {
            height: 100%;
        }
    }
}
              
            
!

JS

              
                function labelWidth(windowWidth) {
	var slideLabel;
	if(windowWidth > 640) {
		slideLabel = $('.wrapper').width() - 176;
	} else {
		slideLabel = windowWidth - 16;
	}
	$('.slideshow .label').css('max-width', slideLabel);
	$('.slideshow .label-extended').css({ maxWidth: slideLabel, width: 'auto'});
}

function initSlider() {
	$('.slide-container').slick({
		nextArrow: '<button type="button" class="slick-next"></button>',
		prevArrow: '<button type="button" class="slick-prev"></button>',
		cssEase: 'ease'
	});
}
function unslick() {
	if($('.slide-container').hasClass('slick-slider')) {
		$('.slide-container').slick('unslick');
	}
}
function multiSlides(windowWidth) {
	var $multiSlides = $('.multi').length,
		$partials = $('picture.partial').length;
	/***** if mobile, split slides *****/
	if(windowWidth <= 640 && $multiSlides > 0) {
		// destroy slider
		unslick();
		// find all .multi divs, wrap each img in additional markup and append to container
		var i = 1;
		$('.multi').each(function() {
			var imgs = $(this).find('picture'),
				parent = $(this),
				slideID = 'multi-' + i++;
			// reverse order so the images are appended in their original order
			$($(imgs).get().reverse()).each(function() {
	        	// split into individual slides
				$(this).addClass('partial ' + slideID).attr('id', slideID).insertAfter(parent).wrap('<div class="slide"></div>');
			});
			$(parent).remove();
		});
		// initiate slider
		initSlider();
	/***** if not mobile and contains partials, group partials into multi-image slides *****/
	} else if(windowWidth > 640 && $partials > 0) {
		// destroy slider
		unslick();
		// get all ids that start with 'multi'
		var groupIDs = $('picture[id^=multi]').map(function() {
			return $(this).attr('id');
		});
		// remove duplicates
		var uniqueIDs = $.unique(groupIDs); 
		// for each unique ID, find all elements with that class, remove slick markup, wrap in new markup
		$(uniqueIDs).each(function(a,b) {
			$('.' + b).each(function() {
				$(this).unwrap();
			});
			$('.' + b).wrapAll('<div class="slide multi"><div class="images"></div></div>');
		});
		// remove class
		$('picture').removeClass('partial');
		// initiate slider
		initSlider();
	/***** if not mobile and no partials, switch to desktop size images and run slider *****/
	} else if($('.slick-slider').length === 0) {
		// initiate slider
		initSlider();
	}
}

/*********** DOCUMENT READY ***********/
$(function() {
	var windowWidth = $(window).innerWidth();
	
	// slideshow
	multiSlides(windowWidth);

	// label animation
	$('.slick-slide').each(function() {
		var label = $(this).find('.label');
		$(this).on('mouseenter', function() {
			label.animate({ backgroundColor: 'white'}, "normal");
		});
		$(this).on('mouseleave', function() {
			label.stop(true).animate({ backgroundColor: 'rgba(255,255,255,0.85)'}, "normal");
		});
	});

	labelWidth(windowWidth);
});

/*********** WINDOW RESIZE ***********/
$(window).resize(function() {
    var windowWidth = $(window).innerWidth();
    multiSlides(windowWidth);
    labelWidth(windowWidth);
});
              
            
!
999px

Console