CSS image slider

css-image-slider.markdown

CSS image slider

Designed by Upperquad [https://upperquad.com] developed by Aranja [https://aranja.com] for Facebook. See it live on https://nonprofits.fb.com/learn-the-basics/

A Pen by David Bachmann Johannesson on CodePen.

License.

index.pug

- var url = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/138822/'

.PagesSlider
  .PagesSlider-phone
    img(src=url+'iPhone-crop-min.png')
  .PagesSlider-slides
    .PagesSlider-slide
      img(src=url+'mdn-min.jpg')
    .PagesSlider-slide
      img(src=url+'csstricks-min.jpg')
    .PagesSlider-slide
      img(src=url+'codepen-min.jpg')
    .PagesSlider-slide
      img(src=url+'upperquad-min.jpg')
    .PagesSlider-slide
      img(src=url+'aranja-min.jpg')
    .PagesSlider-slide
      img(src=url+'obama-min.jpg')
    .PagesSlider-slide
      img(src=url+'who-min.jpg')
    .PagesSlider-slide
      img(src=url+'projectsabroad-min.jpg')

script.js

 // ¯\_(ツ)_/¯

style.scss

/**
 * Designed by Upperquad [https://upperquad.com] developed by Aranja [https://aranja.com] for Facebook.
 * See it live on https://nonprofits.fb.com/learn-the-basics
 */

$em-base: 16px !default;

@function strip-units($value) {
  @return ($value / ($value * 0 + 1));
}
@function em($pxval, $base: $em-base) {
  @if not unitless($pxval) {
    $pxval: strip-units($pxval);
  }
  @if not unitless($base) {
    $base: strip-units($base);
  }
  @return ($pxval / $base) * 1em;
}


html {
  font-size: calc(16px + (22 - 16) * (100vw - 320px)/ (1350 - 320));
}

body {
  overflow: hidden;
  margin-top: rem(50px);
}

img {
  width: 100%;
}

// Variables
$numberOfImgs: 8;
$imgSpacing: em(10px);
$imgWidth: em(floor(640px/2));
$imgHeight: em(floor(543px/2));
$phoneWidth: em(floor(699px/2));
$phoneHeight: em(floor(819px/2));
$fbHeaderHeight: em(57px);

.PagesSlider {
	position: relative;
	width: $phoneWidth;
	height: $phoneHeight;
	margin: em(35px) auto 0 auto;
  
  // If the viewport is bigger than all the images (+spacing)
  // we add a gradient that hides the image loop
	@media (min-width: ($imgWidth + $imgSpacing) * $numberOfImgs) {
		&::before,
		&::after {
			content: '';
			position: absolute;
			top: 0;
			z-index: 1;
			width: $imgWidth;
			height: 100%;
		}
		&::before {
			right: calc(-50vw + 50%);
			background: linear-gradient(to right, rgba(#FFF, 0), #FFF, #FFF);
		}
		&::after {
			left: calc(-50vw + 50%);
			background: linear-gradient(to left, rgba(#FFF, 0), #FFF, #FFF);
		}
	}
}

.PagesSlider-phone {
	position: absolute;
	z-index: 1;
	&::after,
	&::before {
		position: absolute;
		content: '';
		bottom: 0;
		width: 50vw;
		height: em(90px);
		background: #FFF;
		z-index: -1;
	}
	&::before {
		left: calc(100% - #{$imgSpacing});
	}
	&::after {
		right: calc(100% - #{$imgSpacing});
	}
	img {
		display: block;
		width: $phoneWidth;
		height: $phoneHeight;
	}
}

.PagesSlider-slides {
	position: relative;
	display: flex;
	top: em(80px);
  padding-left: $imgSpacing / 2;
}

.PagesSlider-slide {
	position: absolute;
	padding-left: $imgSpacing;
	top: $fbHeaderHeight;
	width: $imgWidth;
	height: $imgHeight;
  @for $i from 1 through $numberOfImgs {
    &:nth-child(#{$i}) {
      animation: PagesSlider-animation 20s (-20s / $numberOfImgs * $i) ease-in-out infinite;
    }
  }
}

@keyframes PagesSlider-animation {
	$initialIndex: 3;
	$index: $initialIndex;

	@while $index - $initialIndex <= $numberOfImgs {
		$startTime: 100% * ($index - $initialIndex) / $numberOfImgs;
		$timeToWait: 80% / $numberOfImgs;
		#{$startTime},
		#{min($startTime + $timeToWait, 100%)} {
			transform: translateX((100% * $numberOfImgs) - 100% * $index);
		}
		$index: $index + 1;
	}
}