9+ CSS Responsive Slider Examples

This post contains a total of 9+ Hand-Picked CSS Responsive Slider Examples with Source Code. All these Responsive Sliders are made using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

CSS Responsive Slider Examples

1. By PixelDevs

Made by PixelDevs. Vertical Responsive CSS Slider. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
body {
	background: #45d6aa;
}

.slider {
	margin: 200px auto;
	max-width: 600px;
	position: relative;
}

.indicator {
	position: absolute;
	left: -150px;
	top: 200px;
	background: white;
	padding: 20px 10px;
	border-radius: 20px;
	border-top-right-radius: 100px;
	border-bottom-right-radius: 100px;
	font-family: sans-serif, helvetica, arial;
}

.slide:nth-of-type(2) {
	animation: moveit 7s 0s ease-in-out infinite;
}

.slide:nth-of-type(3) {
	animation: moveit 7s 0.1s ease-in-out infinite;
}

.slide:nth-of-type(4) {
	animation: moveit 7s 0.2s ease-in-out infinite;
}
.slide:nth-of-type(5) {
	animation: moveit 7s 0.3s ease-in-out infinite;
}

.slide img {
	width: 100%;
	height: 100%;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes moveit {
	0%,25%{
		transform:translatey(0px);
	}
	35% , 50%{
		transform:translatey(-100%);
	}
	60% , 75%{
		transform:translatey(-200%);
	}
	85% , 90%{
		transform:translatey(-300%);
	}
	100%{
		transform:translatey(0);
	}

}

/* Standard syntax */
@keyframes moveit{
	0%,25%{
		transform:translatey(0px);
	}
	35% , 50%{
		transform:translatey(-100%);
	}
	60% , 75%{
		transform:translatey(-200%);
	}
	85% , 90%{
		transform:translatey(-300%);
	}
	100%{
		transform:translatey(0);
	}
}
</style>
</head>
<body>
  <div class="slider">
	<div class="indicator">You are here &rarr;</div>
	<div class="slide">
		<img src="https://dummyimage.com/600x400/000/fff/&text=Step&nbsp;1" />
	</div>
	<div class="slide">
		<img src="https://dummyimage.com/600x400/fff/000/&text=Step&nbsp;2" />
	</div>
	<div class="slide">
		<img src="https://dummyimage.com/600x400/2f2f2f/fff/&text=Step&nbsp;3" />
	</div>
	<div class="slide">
		<img src="https://dummyimage.com/600x400/3f3f3f/333/&text=Step&nbsp;4" />
	</div>
</div>
</body>
</html>

2. By Prio-Soft

Made by Prio-Soft. A simple Responsive Slider. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
*,
*::before,
*::after {
  box-sizing: border-box;
}

.outer-wrapper {
  width: 80%;
  margin: 50px auto;
}

.s-wrap {
  width: 100%;
  margin-bottom: 50px;
  padding-bottom: 55%;
  position: relative;
  border: 10px solid #fff;
  background-color: #efefe8;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
.s-wrap > input {
  display: none;
}
.s-wrap .s-content {
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 500%;
  height: 100%;
  font-size: 0;
  list-style: none;
  transition: transform 1s;
}
.s-wrap .s-item {
  display: inline-block;
  width: 20%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
}
.s-wrap .s-item-1 {
  background-image: url("https://images.unsplash.com/photo-1457369804613-52c61a468e7d?crop=entropy&fit=crop&fm=jpg&h=600&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=800");
}
.s-wrap .s-item-2 {
  background-image: url("https://images.unsplash.com/photo-1456318019777-ccdc4d5b2396?crop=entropy&fit=crop&fm=jpg&h=600&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=800");
}
.s-wrap .s-item-3 {
  background-image: url("https://images.unsplash.com/photo-1428189923803-e9801d464d76?crop=entropy&fit=crop&fm=jpg&h=600&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=800");
}
.s-wrap .s-item-4 {
  background-image: url("https://images.unsplash.com/photo-1422393462206-207b0fbd8d6b?crop=entropy&fit=crop&fm=jpg&h=600&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=800");
}
.s-wrap .s-item-5 {
  background-image: url("https://images.unsplash.com/photo-1439736637365-748f240b24fb?crop=entropy&fit=crop&fm=jpg&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=800");
}

.s-type-1 .s-control {
  position: absolute;
  bottom: 18px;
  left: 50%;
  text-align: center;
  transform: translateX(-50%);
  transition-timing-function: ease-out;
}
.s-type-1 .s-control > label[class^="s-c-"] {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 10px;
  border-radius: 50%;
  border: 1px solid #999;
  background-color: #efefe8;
  cursor: pointer;
}
.s-type-1 .s-nav label {
  display: none;
  position: absolute;
  top: 50%;
  padding: 5px 10px;
  transform: translateY(-50%);
  cursor: pointer;
}
.s-type-1 .s-nav label::before, .s-type-1 .s-nav label::after {
  content: "";
  display: block;
  width: 8px;
  height: 24px;
  background-color: #fff;
}
.s-type-1 .s-nav label::before {
  margin-bottom: -12px;
}
.s-type-1 .s-nav label.left {
  left: 20px;
}
.s-type-1 .s-nav label.left::before {
  transform: rotate(45deg);
}
.s-type-1 .s-nav label.left::after {
  transform: rotate(-45deg);
}
.s-type-1 .s-nav label.right {
  right: 20px;
}
.s-type-1 .s-nav label.right::before {
  transform: rotate(-45deg);
}
.s-type-1 .s-nav label.right::after {
  transform: rotate(45deg);
}
.s-type-1 #s-1:checked ~ .s-content {
  transform: translateX(0%);
}
.s-type-1 #s-1:checked ~ .s-control .s-c-1 {
  background-color: #333;
}
.s-type-1 #s-1:checked ~ .s-nav .s-nav-1 {
  display: block;
}
.s-type-1 #s-2:checked ~ .s-content {
  transform: translateX(-20%);
}
.s-type-1 #s-2:checked ~ .s-control .s-c-2 {
  background-color: #333;
}
.s-type-1 #s-2:checked ~ .s-nav .s-nav-2 {
  display: block;
}
.s-type-1 #s-3:checked ~ .s-content {
  transform: translateX(-40%);
}
.s-type-1 #s-3:checked ~ .s-control .s-c-3 {
  background-color: #333;
}
.s-type-1 #s-3:checked ~ .s-nav .s-nav-3 {
  display: block;
}
.s-type-1 #s-4:checked ~ .s-content {
  transform: translateX(-60%);
}
.s-type-1 #s-4:checked ~ .s-control .s-c-4 {
  background-color: #333;
}
.s-type-1 #s-4:checked ~ .s-nav .s-nav-4 {
  display: block;
}
.s-type-1 #s-5:checked ~ .s-content {
  transform: translateX(-80%);
}
.s-type-1 #s-5:checked ~ .s-control .s-c-5 {
  background-color: #333;
}
.s-type-1 #s-5:checked ~ .s-nav .s-nav-5 {
  display: block;
}

.s-type-2 .s-content {
  animation: slider-animation 50s ease-in-out infinite;
}
.s-type-2 .s-content:hover {
  animation-play-state: paused;
}

@keyframes slider-animation {
  0%,
    7% {
    transform: translateX(0%);
  }
  12.5%,
    19.5% {
    transform: translateX(-20%);
  }
  25%,
    32% {
    transform: translateX(-40%);
  }
  37.5%,
    44.5% {
    transform: translateX(-60%);
  }
  50%,
    57% {
    transform: translateX(-80%);
  }
  62.5%,
    69.5% {
    transform: translateX(-60%);
  }
  75%,
    82% {
    transform: translateX(-40%);
  }
  87.5%,
    94.5% {
    transform: translateX(-20%);
  }
}
</style>
</head>
<body>
  <div class="outer-wrapper">
  <h1>Demo 1</h1>
  <div class="s-wrap s-type-1" role="slider">
    <input type="radio" id="s-1" name="slider-control" checked="checked">
    <input type="radio" id="s-2" name="slider-control">
    <input type="radio" id="s-3" name="slider-control">
    <input type="radio" id="s-4" name="slider-control">
    <input type="radio" id="s-5" name="slider-control">
    <ul class="s-content">
      <li class="s-item s-item-1"></li>
      <li class="s-item s-item-2"></li>
      <li class="s-item s-item-3"></li>
      <li class="s-item s-item-4"></li>
      <li class="s-item s-item-5"></li>
    </ul>
    <div class="s-control">
      <label class="s-c-1" for="s-1"></label>
      <label class="s-c-2" for="s-2"></label>
      <label class="s-c-3" for="s-3"></label>
      <label class="s-c-4" for="s-4"></label>
      <label class="s-c-5" for="s-5"></label>
    </div>
    <div class="s-nav">
      <label class="s-nav-1 right" for="s-2"></label>
      <label class="s-nav-2 left" for="s-1"></label>
      <label class="s-nav-2 right" for="s-3"></label>
      <label class="s-nav-3 left" for="s-2"></label>
      <label class="s-nav-3 right" for="s-4"></label>
      <label class="s-nav-4 left" for="s-3"></label>
      <label class="s-nav-4 right" for="s-5"></label>
      <label class="s-nav-5 left" for="s-4"></label>
    </div>
  </div>
</body>
</html>

3. By Julia Geisendorf

Made by Julia Geisendorf. A responsive Card Slider. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
pre, textarea {
  overflow: auto;
}

[hidden], audio:not([controls]), template {
  display: none;
}

details, main, summary {
  display: block;
}

input[type=number] {
  width: auto;
}

input[type=search], input[type=text], input[type=email] {
  -webkit-appearance: none;
}

input[type="*"] {
  -webkit-appearance: none;
}

input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

progress {
  display: inline-block;
}

small {
  font-size: 100%;
}

textarea {
  resize: vertical;
}

[unselectable] {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

*, ::after, ::before {
  box-sizing: inherit;
  border-style: solid;
  border-width: 0;
}

* {
  font-size: inherit;
  line-height: inherit;
  margin: 0;
  padding: 0;
}

::after, ::before {
  text-decoration: inherit;
  vertical-align: inherit;
}

:root {
  -ms-overflow-style: -ms-autohiding-scrollbar;
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  box-sizing: border-box;
  cursor: default;
  font: 16px/1.5 sans-serif;
  text-rendering: optimizeLegibility;
}

a {
  text-decoration: none;
}

audio, canvas, iframe, img, svg, video {
  vertical-align: middle;
}

button, input, select, textarea {
  background-color: transparent;
  color: inherit;
  font-family: inherit;
  font-style: inherit;
  font-weight: inherit;
  min-height: 1.5em;
}

code, kbd, pre, samp {
  font-family: monospace,monospace;
}

nav ol, nav ul {
  list-style: none;
}

ul li {
  list-style: none;
}

select {
  -moz-appearance: none;
  -webkit-appearance: none;
}

select::-ms-expand {
  display: none;
}

select::-ms-value {
  color: currentColor;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

::-moz-selection {
  background-color: #B3D4FC;
  text-shadow: none;
}

::selection {
  background-color: #B3D4FC;
  text-shadow: none;
}

@media screen {
  [hidden~=screen] {
    display: inherit;
  }

  [hidden~=screen]:not(:active):not(:focus):not(:target) {
    clip: rect(0 0 0 0) !important;
    position: absolute !important;
  }
}
html {
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  -webkit-tap-highwhite-color: transparent;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
li {
  display: block;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}
.heading-2 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 40px;
  color: #000;
  letter-spacing: 0.3px;
}

.heading-2--white {
  color: #FFF;
}
.serif {
  font-family: "Arnhem";
  font-size: 24px;
  font-weight: 100;
  line-height: 38px;
  color: #3E4954;
}

@media (max-width: 400px) {
  .serif {
    font-size: 20px;
    line-height: 32px;
  }
}
.heading-3 {
  font-size: 18px;
  font-weight: 600;
  line-height: 25px;
  color: #3E4954;
  letter-spacing: 0.3px;
}

.heading-3 + .heading-3 {
  margin-top: 5px;
}

.heading-3--white {
  color: #FFF;
}

.heading-3--light {
  color: #848995;
}
.text {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
  color: #848995;
  letter-spacing: 0px;
}

@media (max-width: 600px) {
  .text {
    font-size: 16px;
    line-height: 30px;
  }
}
.text--light-white {
  color: rgba(255, 255, 255, 0.7);
}

/*--------------------------------------------------------------
7.0 Links
--------------------------------------------------------------*/
.link {
  position: relative;
  display: inline-block;
  font-weight: 600;
  color: #5050FF;
}

.link:after {
  position: absolute;
  top: 50%;
  right: -32px;
  display: block;
  width: 24px;
  height: 14px;
  background-image: url("../images/slider/arrow__right--blue.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  content: '';
  transform: translateY(-50%);
  transition: all 0.2s ease;
  cubic-bezier(0.4, 0.0, 0.2, 1);
}

.link:hover:after {
  right: -48px;
}
body {
    background-color: #000000;
}
.slider__item {
  transition: all 0.3s ease;
  -webkit-transition-timing-function: 
    cubic-bezier(0.4, 0.0, 0.2, 1);
		transition-timing-function: 
     cubic-bezier(0.4, 0.0, 0.2, 1);
}

#slide-1:checked ~ .slider__holder .slider__item--1 {
  position: relative;
  z-index: 2;
  transform: translate(0) scale(1);
}

#slide-2:checked ~ .slider__holder .slider__item--1 {
  z-index: 1;
  transform: translateX(-100px) scale(0.85);
}

@media (max-width: 768px) {
  #slide-2:checked ~ .slider__holder .slider__item--1 {
    opacity: 0.6;
  }
}
#slide-3:checked ~ .slider__holder .slider__item--1 {
  z-index: 0;
  transform: translateX(-210px) scale(0.65);
}

@media (max-width: 900px) {
  #slide-3:checked ~ .slider__holder .slider__item--1 {
    transform: translateX(-170px) scale(0.65);
  }
}
@media (max-width: 768px) {
  #slide-3:checked ~ .slider__holder .slider__item--1 {
    opacity: 0;
  }
}
#slide-4:checked ~ .slider__holder .slider__item--1 {
  z-index: -1;
  opacity: 0;
  transform: translateX(-210px) scale(0.65);
}

#slide-5:checked ~ .slider__holder .slider__item--1 {
  z-index: -1;
  opacity: 0;
  transform: translateX(-210px) scale(0.65);
}

#slide-1:checked ~ .slider__holder .slider__item--2 {
  z-index: 1;
  transform: translateX(100px) scale(0.85);
}

@media (max-width: 768px) {
  #slide-1:checked ~ .slider__holder .slider__item--2 {
    opacity: 0.6;
  }
}
#slide-2:checked ~ .slider__holder .slider__item--2 {
  position: relative;
  z-index: 2;
  transform: translate(0) scale(1);
}

#slide-3:checked ~ .slider__holder .slider__item--2 {
  z-index: 1;
  transform: translateX(-100px) scale(0.85);
}

@media (max-width: 768px) {
  #slide-3:checked ~ .slider__holder .slider__item--2 {
    opacity: 0.6;
  }
}
#slide-4:checked ~ .slider__holder .slider__item--2 {
  z-index: 0;
  transform: translateX(-210px) scale(0.65);
}

@media (max-width: 900px) {
  #slide-4:checked ~ .slider__holder .slider__item--2 {
    transform: translateX(-170px) scale(0.65);
  }
}
@media (max-width: 768px) {
  #slide-4:checked ~ .slider__holder .slider__item--2 {
    opacity: 0;
  }
}
#slide-5:checked ~ .slider__holder .slider__item--2 {
  z-index: -1;
  opacity: 0;
  transform: translateX(-210px) scale(0.65);
}

#slide-1:checked ~ .slider__holder .slider__item--3 {
  z-index: 0;
  transform: translateX(210px) scale(0.65);
}

@media (max-width: 900px) {
  #slide-1:checked ~ .slider__holder .slider__item--3 {
    transform: translateX(170px) scale(0.65);
  }
}
@media (max-width: 768px) {
  #slide-1:checked ~ .slider__holder .slider__item--3 {
    opacity: 0;
  }
}
#slide-2:checked ~ .slider__holder .slider__item--3 {
  z-index: 1;
  transform: translateX(100px) scale(0.85);
}

@media (max-width: 768px) {
  #slide-2:checked ~ .slider__holder .slider__item--3 {
    opacity: 0.6;
  }
}
#slide-3:checked ~ .slider__holder .slider__item--3 {
  position: relative;
  z-index: 2;
  transform: translate(0) scale(1);
}

#slide-4:checked ~ .slider__holder .slider__item--3 {
  z-index: 1;
  transform: translateX(-100px) scale(0.85);
}

@media (max-width: 768px) {
  #slide-4:checked ~ .slider__holder .slider__item--3 {
    opacity: 0.6;
  }
}
#slide-5:checked ~ .slider__holder .slider__item--3 {
  z-index: 0;
  transform: translateX(-210px) scale(0.65);
}

@media (max-width: 900px) {
  #slide-5:checked ~ .slider__holder .slider__item--3 {
    transform: translateX(-170px) scale(0.65);
  }
}
@media (max-width: 768px) {
  #slide-5:checked ~ .slider__holder .slider__item--3 {
    opacity: 0;
  }
}
#slide-1:checked ~ .slider__holder .slider__item--4 {
  z-index: -1;
  opacity: 0;
  transform: translateX(210px) scale(0.65);
}

#slide-2:checked ~ .slider__holder .slider__item--4 {
  z-index: 0;
  transform: translateX(210px) scale(0.65);
}

@media (max-width: 900px) {
  #slide-2:checked ~ .slider__holder .slider__item--4 {
    transform: translateX(170px) scale(0.65);
  }
}
@media (max-width: 768px) {
  #slide-2:checked ~ .slider__holder .slider__item--4 {
    opacity: 0;
  }
}
#slide-3:checked ~ .slider__holder .slider__item--4 {
  z-index: 1;
  transform: translateX(100px) scale(0.85);
}

@media (max-width: 768px) {
  #slide-3:checked ~ .slider__holder .slider__item--4 {
    opacity: 0.6;
  }
}
#slide-4:checked ~ .slider__holder .slider__item--4 {
  position: relative;
  z-index: 2;
  transform: translate(0) scale(1);
}

#slide-5:checked ~ .slider__holder .slider__item--4 {
  z-index: 1;
  transform: translateX(-100px) scale(0.85);
}

@media (max-width: 768px) {
  #slide-5:checked ~ .slider__holder .slider__item--4 {
    opacity: 0.6;
  }
}
#slide-1:checked ~ .slider__holder .slider__item--5 {
  z-index: -1;
  opacity: 0;
  transform: translateX(210px) scale(0.65);
}

#slide-2:checked ~ .slider__holder .slider__item--5 {
  z-index: -1;
  opacity: 0;
  transform: translateX(210px) scale(0.65);
}

#slide-3:checked ~ .slider__holder .slider__item--5 {
  z-index: 0;
  transform: translateX(210px) scale(0.65);
}

@media (max-width: 900px) {
  #slide-3:checked ~ .slider__holder .slider__item--5 {
    transform: translateX(170px) scale(0.65);
  }
}
@media (max-width: 768px) {
  #slide-3:checked ~ .slider__holder .slider__item--5 {
    opacity: 0;
  }
}
#slide-4:checked ~ .slider__holder .slider__item--5 {
  z-index: 1;
  transform: translateX(100px) scale(0.85);
}

@media (max-width: 768px) {
  #slide-4:checked ~ .slider__holder .slider__item--5 {
    opacity: 0.6;
  }
}
#slide-5:checked ~ .slider__holder .slider__item--5 {
  position: relative;
  z-index: 2;
  transform: translate(0) scale(1);
}

/*--------------------------------------------------------------
3.0 Bullets
--------------------------------------------------------------*/
.bullets__item {
  transition: all 0.2s ease;
}

#slide-1:checked ~ .bullets .bullets__item--1 {
  background: #FFF;
}

#slide-2:checked ~ .bullets .bullets__item--2 {
  background: #FFF;
}

#slide-3:checked ~ .bullets .bullets__item--3 {
  background: #FFF;
}

#slide-4:checked ~ .bullets .bullets__item--4 {
  background: #FFF;
}

#slide-5:checked ~ .bullets .bullets__item--5 {
  background: #FFF;
}
.card {
  position: relative;
  display: block;
  border-radius: 8px;
  background: #FFF;
  box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.05), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}

/*--------------------------------------------------------------
2.0 Slider
--------------------------------------------------------------*/
.slider {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.slider__radio {
  display: none;
}

.slider__holder {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  margin-top: 80px;
  text-align: left;
}

@media (max-width: 900px) {
  .slider__holder {
    max-width: 540px;
  }
}
@media (max-width: 600px) {
  .slider__holder {
    margin-top: 60px;
  }
}
.slider__item {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  overflow: hidden;
  width: 100%;
  opacity: 1;
  cursor: pointer;
}

.slider__item-content {
  padding: 40px;
}

@media (max-width: 600px) {
  .slider__item-content {
    padding: 32px 32px;
  }
}
@media (max-width: 375px) {
  .slider__item-content {
    padding: 40px 24px;
  }
}
.slider__item-text {
  padding: 60px 0;
}


4.0 Section
--------------------------------------------------------------*/
.section {
  position: relative;
  width: 100%;
  padding: 120px 24px;
  text-align: center;
}

.section__entry {
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
}

.section__entry--center {
  text-align: center;
}

.section__title {
  display: block;
  padding-bottom: 12px;
}

.section__text {
  display: block;
}

/*--------------------------------------------------------------
5.0 Button
--------------------------------------------------------------*/
.button {
  display: inline-block;
  height: 44px;
  padding: 12px 16px;
  font-weight: 500;
  line-height: 20px;
  color: #FFF;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.2);
}

.button:hover {
  background: rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body id="gradient">
  
  <section class="section slider">

    <div class="section__entry section__entry--center">
    </div>

  	<input type="radio" name="slider" id="slide-1" class="slider__radio">
  	<input type="radio" name="slider" id="slide-2" class="slider__radio">
  	<input type="radio" name="slider" id="slide-3" class="slider__radio" checked>
  	<input type="radio" name="slider" id="slide-4" class="slider__radio">
  	<input type="radio" name="slider" id="slide-5" class="slider__radio">

  	<div class="slider__holder">

  		<label for="slide-1" class="slider__item slider__item--1 card">
        <div class="slider__item-content">
          <p class="heading-3 heading-3--light">Development</p>
          <p class="heading-3">SCSS Only slider</p>
          <p class="slider__item-text serif">Lorem Ipsum</p>
          <a class="heading-3 link" href="https://blog.significa.pt/css-only-slider-71727effff0b#.e5t9l7b55">Read on Medium</a>
        </div>
  		</label> <!-- Slider__item -->

  		<label for="slide-2" class="slider__item slider__item--2 card">
        <div class="slider__item-content">
          <p class="heading-3 heading-3--light">Development</p>
          <p class="heading-3">SCSS Only slider</p>
          <p class="slider__item-text serif">Lorem Ipsum</p>
          <a class="heading-3 link" href="https://blog.significa.pt/css-only-slider-71727effff0b#.e5t9l7b55">Read on Medium</a>
        </div>
  		</label> <!-- Slider__item -->

  		<label for="slide-3" class="slider__item slider__item--3 card">
        <div class="slider__item-content">
          <p class="heading-3 heading-3--light">Development</p>
          <p class="heading-3">SCSS Only slider</p>
          <p class="slider__item-text serif">Lorem ipsum</p>
          <a class="heading-3 link" href="https://blog.significa.pt/css-only-slider-71727effff0b#.e5t9l7b55">Read on Medium</a>
        </div>
  		</label> <!-- Slider__item -->

  		<label for="slide-4" class="slider__item slider__item--4 card">
        <div class="slider__item-content">
          <p class="heading-3 heading-3--light">Development</p>
          <p class="heading-3">SCSS Only slider</p>
          <p class="slider__item-text serif">Lorem ipsum</p>
          <a class="heading-3 link" href="https://blog.significa.pt/css-only-slider-71727effff0b#.e5t9l7b55">Read on Medium</a>
        </div>
  		</label> <!-- Slider__item -->

  		<label for="slide-5" class="slider__item slider__item--5 card">
        <div class="slider__item-content">
          <p class="heading-3 heading-3--light">Development</p>
          <p class="heading-3">SCSS Only slider</p>
          <p class="slider__item-text serif">Lorem ipsum</p>
          <a class="heading-3 link" href="https://blog.significa.pt/css-only-slider-71727effff0b#.e5t9l7b55">Read on Medium</a>
        </div>
  		</label> <!-- Slider__item -->
  	</div> <!-- Slider Holder -->
  </section> <!-- Section Slider -->
</body>
</html>

4. By Dudley Storey

Made by Dudley Storey. HTML5 CSS-Driven Responsive Image Slider With Captions. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
@import url(https://fonts.googleapis.com/css?family=Istok+Web);
@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
* {
  box-sizing: border-box;
}
body, figure { 
  margin: 0; background: #101010;
  font-family: Istok Web, sans-serif;
  font-weight: 100;
}
div#captioned-gallery { 
  width: 100%; overflow: hidden; 
}
figure.slider { 
  position: relative; width: 500%;
  font-size: 0; animation: 30s slidy infinite; 
}
figure.slider figure { 
  width: 20%; height: auto;
  display: inline-block;  position: inherit; 
}
figure.slider img { width: 100%; height: auto; }
figure.slider figure figcaption { 
  position: absolute; bottom: 0;
  background: rgba(0,0,0,0.4);
  color: #fff; width: 100%;
  font-size: 2rem; padding: .6rem; 
}
</style>
</head>
<body>
  <base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">
<div id="captioned-gallery">
	<figure class="slider">
		<figure>
			<img src="hobbiton-lake.jpg" alt>
			<figcaption>Hobbiton, New Zealand</figcaption>
		</figure>
		<figure>
			<img src="wanaka-drowned-tree.jpg" alt>
			<figcaption>Wanaka, New Zealand</figcaption>
		</figure>
		<figure>
			<img src="utah-peak.jpg" alt>
			<figcaption>Utah, United States</figcaption>
		</figure>
		<figure>
			<img src="bryce-canyon-utah.jpg" alt>
			<figcaption>Bryce Canyon, Utah, United States</figcaption>
		</figure>
		<figure>
			<img src="hobbiton-lake.jpg" alt>
			<figcaption>Hobbiton, New Zealand</figcaption>
		</figure>
	</figure>
</div>
</body>
</html>

5. By Luke

Made by Luke. Responsive Slider with Navigation Buttons. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
  
<style>
@import url(https://fonts.googleapis.com/css?family=Karla);
html,
body {
  padding: 0;
  background:#000;
  font-family: 'Karla', sans-serif;
  font-weight: 400;
  font-style: normal;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
/********************************/
/*       Fade Bs-carousel       */
/********************************/

.fade-carousel {
  position: relative;
  height: 100vh;
}

.fade-carousel .carousel-inner .item {
  height: 100vh;
}

.fade-carousel .carousel-indicators > li {
  margin: 0 2px;
  background-color: #fff;
  border-color: #fff;
  opacity: .7;
  border-radius:0;
  height:2px;
  width: 20px;
}

.fade-carousel .carousel-indicators > li.active {
  width: 40px;
  height: 2px;
  opacity: 1;
}
/********************************/
/*          Hero Headers        */
/********************************/

.hero {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  color: #fff;
  text-align: center;
  -webkit-transform: translate3d(-50%, -50%, 0);
  -moz-transform: translate3d(-50%, -50%, 0);
  -ms-transform: translate3d(-50%, -50%, 0);
  -o-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
}

.hero h1 {
  font-size: 6em;
  margin: 0;
  padding: 0;
}
/********************************/
/*          Custom Buttons      */
/********************************/

.btn.btn-hero {
  padding: 20px 40px;
   color: #fff;
  text-transform: uppercase;
  font-size:11px;
  letter-spacing:0.1em;
  background: none;
  border-color: #fff;
  border-radius: 0;
  outline: none;
  margin: 20px auto;
}

.btn.btn-hero:hover,
.btn.btn-hero:focus {
  color: #000;
  background-color: #fff;
  border-color: #fff;
}
/********************************/
/*       Slides backgrounds     */
/********************************/

.fade-carousel .slides .slide-1,
.fade-carousel .slides .slide-2,
.fade-carousel .slides .slide-3 {
  height: 100vh;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity:.8;
}

.fade-carousel .slides .slide-1 {
  background-image: url(https://images.unsplash.com/photo-1422480415834-d7d30118ea06?q=80&fm=jpg&s=b2a2f470fac0473e034bbf485d144c01);
}

.fade-carousel .slides .slide-2 {
  background-image: url(https://unsplash.com/photos/ZqzueD4rfuk/download);
}

.fade-carousel .slides .slide-3 {
  background-image: url(https://unsplash.com/photos/mEzz7-vDKcI/download);
}
/********************************/
/*          Media Queries       */
/********************************/

@media screen and (min-width: 980px) {
  .hero {
    width: 980px;
  }
}

@media screen and (max-width: 640px) {
  .hero h1 {
    font-size: 4em;
  }
}
</style>
</head>
<body>
  <div class="carousel fade-carousel slide" data-ride="carousel" data-interval="4000" id="bs-carousel">


  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#bs-carousel" data-slide-to="0" class="active"></li>
    <li data-target="#bs-carousel" data-slide-to="1"></li>
    <li data-target="#bs-carousel" data-slide-to="2"></li>
  </ol>
  
  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item slides active">
      <div class="slide-1"></div>
      <div class="hero">
        <hgroup>
            <h1>We are creative</h1>        
            <h3>Get start your next awesome project</h3>
        </hgroup>
        <button class="btn btn-hero" role="button">See all features</button>
      </div>
    </div>
    <div class="item slides">
      <div class="slide-2"></div>
      <div class="hero">        
        <hgroup>
            <h1>We are smart</h1>        
            <h3>Get start your next awesome project</h3>
        </hgroup>       
        <button class="btn btn-hero btn-lg" role="button">See all features</button>
      </div>
    </div>
    <div class="item slides">
      <div class="slide-3"></div>
      <div class="hero">        
        <hgroup>
            <h1>We are amazing</h1>        
            <h3>Get start your next awesome project</h3>
        </hgroup>
        <button class="btn btn-hero btn-lg" role="button">See all features</button>
      </div>
    </div>
  </div> 
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>

</body>
</html>

6. By Andre

Made by Andre. Bootstrap CSS Responsive Full-Width Slider/Carousel Non-Touch. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.css'>
<style>
.carousel-caption {
  font-size: 12px;
  font-style: italic;
  font-weight: bold;
  display: none; /*comment out to display captions*/
}

.carousel-control {
  text-shadow: 0;
}

.carousel-control.left {
  background-image: -webkit-linear-gradient(
    left,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0.0001) 100%
  );
  background-image: -o-linear-gradient(
    left,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0) 100%
  );
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    from(rgba(0, 0, 0, 0)),
    to(rgba(0, 0, 0, 00001))
  );
  background-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0) 100%
  ) !important;
}

.carousel-control.right {
  background-image: -webkit-linear-gradient(
    left,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0.0001) 100%
  );
  background-image: -o-linear-gradient(
    left,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0) 100%
  );
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    from(rgba(0, 0, 0, 0)),
    to(rgba(0, 0, 0, 00001))
  );
  background-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0) 100%
  ) !important;
}

.carousel-indicators {
  bottom: -40px !important;
}

.carousel-indicators li {
  border: 1px solid #d9d9d9 !important;
  border-radius: 10px !important;
  background-color: #d9d9d9 !important;
  width: 11px !important;
  height: 11px !important;
  margin-left: 3px !important;
  margin-right: 3px !important;
}

.carousel-indicators .active {
  border: 0px solid #869791 !important;
  border-radius: 10px !important;
  background-color: #869791 !important;
  width: 11px !important;
  height: 11px !important;
  margin-bottom: 1px !important;
}
</style>
</head>
<body>
<div id="myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
    <li data-target="#myCarousel" data-slide-to="3"></li>
    <li data-target="#myCarousel" data-slide-to="4"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="https://s26.postimg.cc/7ayxq3q5l/cg5.jpg" width="100%">
      <div class="carousel-caption">
        <h3>First Slide</h3>
        <p>Caption goes here<br></p>
      </div>
    </div>
    <div class="item">
      <img src="https://s26.postimg.cc/zccz3svft/cg6.jpg" width="100%">
      <div class="carousel-caption">
        <h3>Second slide</h3>
        <p>Caption goes here</p>
      </div>
    </div>
    <div class="item">
      <img src="https://s26.postimg.cc/hyxmrttt5/cg1.jpg" width="100%">
      <div class="carousel-caption">
        <h3>Third slide</h3>
        <p>Caption goes here</p>
      </div>
    </div>
    <div class="item">
      <img src="https://s26.postimg.cc/7g2ozrxgp/cg4.jpg" width="100%">
      <div class="carousel-caption">
        <h3>Fourth slide</h3>
        <p>Caption goes here</p>
      </div>
    </div>
    <div class="item">
      <img src="https://s26.postimg.cc/l7244vg2x/cg2.jpg" width="100%">
      <div class="carousel-caption">
        <h3>Fifth slide</h3>
        <p>Caption goes here</p>
      </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

</div>
  
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.js'></script>
</body>
</html>

7. By Maux Webmaster

Made by Maux Webmaster. A basic Responsive Slider made using CSS3. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
/********************************************/
*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
html,
body {
  background: #333;
  border: 0;
  color: #000;
  font: 14px/1.5em sans-serif;
  height: 100%;
  margin: 0;
  outline: 0 none;
  padding: 0;
  position: relative;
  text-align: justify;
  vertical-align: baseline;
  width: 100%;
  word-wrap: break-word;
  z-index: 0;
}
.content {
  background: #fff;
  margin: 0 auto;
  padding: 5px;
  width: 70%;
}
h1 {
  font: bold 24px/1.5 sans-serif;
  margin: 0;
  padding: 0;
  text-align: center;
  -webkit-text-shadow: 0 2px 1px rgba(0,0,0,.5);
  -moz-text-shadow: 0 2px 1px rgba(0,0,0,.5);
  text-shadow: 0 2px 1px rgba(0,0,0,.5);
}
input {
  display: none;
}
.slides {
  background: #f5f5f5;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0 0 10px rgba(0,0,0,.75);
  -moz-box-shadow: 0 0 10px rgba(0,0,0,.75);
  box-shadow: 0 0 10px rgba(0,0,0,.75);
  margin: 10px;
  padding: 1%;
  -webkit-transition: all 0.5s linear 0s;
  -moz-transition: all 0.5s linear 0s;
  -ms-transition: all 0.5s linear 0s;
  -o-transition: all 0.5s linear 0s;
  transition: all 0.5s linear 0s;
}
.slides .overflow {
  overflow: hidden;
  width: 100%;
}
.slides .overflow .inner {
  line-height: 0;
  width: 500%;
  -webkit-transition: all 0.5s linear 0s;
  -moz-transition: all 0.5s linear 0s;
  -ms-transition: all 0.5s linear 0s;
  -o-transition: all 0.5s linear 0s;
  transition: all 0.5s linear 0s;
}
.slides .overflow .inner article {
  float: left;
  width: 20%;
}
.slides .overflow .inner article img {
  width: 100%;
}
.controls {
  text-align: center;
}
.controls label {
  background: #aaa;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  cursor: pointer;
  display: inline-block;
  margin: 0 5px;
  height: 15px;
  width: 15px;
}
#slide1:checked ~ .slides .inner {
  margin-left: 0%;
}
#slide1:checked ~ .controls > label:nth-of-type(1) {
  background: #333;
}
#slide2:checked ~ .slides .inner {
  margin-left: -100%;
}
#slide2:checked ~ .controls > label:nth-of-type(2) {
  background: #333;
}
#slide3:checked ~ .slides .inner {
  margin-left: -200%;
}
#slide3:checked ~ .controls > label:nth-of-type(3) {
  background: #333;
}
#slide4:checked ~ .slides .inner {
  margin-left: -300%;
}
#slide4:checked ~ .controls > label:nth-of-type(4) {
  background: #333;
}
#slide5:checked ~ .slides .inner {
  margin-left: -400%;
}
#slide5:checked ~ .controls > label:nth-of-type(5) {
  background: #333;
}
</style>
</head>
<body>
  <div class="content">
  <h1>Heading</h1>
  <input type="radio" id="slide1" name="slider" checked>
    <input type="radio" id="slide2" name="slider">
    <input type="radio" id="slide3" name="slider">
    <input type="radio" id="slide4" name="slider">
    <input type="radio" id="slide5" name="slider">
  <div class="slides">
    <div class="overflow">
      <div class="inner">
        <article><img src="https://picsum.photos/640/480?image=0" alt=""></article>
        <article><img src="https://picsum.photos/640/480?image=1" alt=""></article>
        <article><img src="https://picsum.photos/640/480?image=2" alt=""></article>
        <article><img src="https://picsum.photos/640/480?image=3" alt=""></article>
        <article><img src="https://picsum.photos/640/480?image=4" alt=""></article>
      </div>
    </div>
  </div>
  <div class="controls">
    <label for="slide1"></label>
    <label for="slide2"></label>
    <label for="slide3"></label>
    <label for="slide4"></label>
    <label for="slide5"></label>
  </div>
</div>
</body>
</html>

8. By Adam

Made by Adam. Auto sliding responsive slider. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
body {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, #00a9ab 0%, #69279d 100%);
}

.slider-container {
  position: relative;
  width: 50%;
  height: 100%;
  overflow: hidden;
}

.slider {
  position: absolute;
  display: flex;
  height: 100%;
  width: 500%;
  animation: slide 15s infinite;
}

.slide {
  position: relative;
  display: inline-block;
  width: 25%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slide img {
  width: 80%;
  height: auto;
}
.slide:nth-of-type(2) img {
  width: 40%;
  height: auto;
}

@keyframes slide {
  15% {
    left: 0;
  }
  20% {
    left: -100%;
  }
  35% {
    left: -100%;
  }
  40% {
    left: -200%;
  }
  55% {
    left: -200%;
  }
  60% {
    left: -300%;
  }
  75% {
    left: -300%;
  }
  80% {
    left: -400%;
  }
  95% {
    left: -400%;
  }
  100% {
    left: 0;
  }
}
</style>
</head>
<body>
  <div class="slider-container">
  <div class="slider">
    <div class="slide"><img src="https://res.cloudinary.com/cloud-image-storage/image/upload/v1550946580/screen.png" alt="" /></div>
    <div class="slide">
      <img src="https://res.cloudinary.com/cloud-image-storage/image/upload/v1550892255/screen-2.png" alt="" />
    </div>
    <div class="slide">
      <img src="https://res.cloudinary.com/cloud-image-storage/image/upload/v1550946585/screen-3.png" alt="" />
    </div>
    <div class="slide">
      <img src="https://res.cloudinary.com/cloud-image-storage/image/upload/v1550892255/screen-4.png" alt="" />
    </div>
    <div class="slide">
      <img src="https://res.cloudinary.com/cloud-image-storage/image/upload/v1550946580/screen.png" alt="" />
    </div>
  </div>
</div>
</body>
</html>

9. By Peter King

Made by Peter King. Bootstrap CSS Responsive Slider. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css'>
</head>
<body>
  <div style="width:50%;margin: 40px auto;background:#eee;"><div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="https://images.pexels.com/photos/414171/pexels-photo-414171.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://images.pexels.com/photos/371633/pexels-photo-371633.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://images.pexels.com/photos/358482/pexels-photo-358482.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js'></script>
      <script id="rendered-js" >
$('#carouselExampleControls').carousel();
    </script>
</body>
</html>

10. By Sydney Leigh

Made by Sydney Leigh. CSS3 Responsive Slider with Smooth Sliding Effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
body { 
  margin:0; 
}
.slider-container { 
  width: 100%;
  height: 100vh;
  overflow:hidden; 
}
.slider { 
  width:300vw; 
  height:100%; 
  background-color: yellow;
  position:relative; 
  -webkit-animation: slide infinite 30s;
  &:hover { 
    -webkit-animation-play-state: paused; 
    -moz-animation-play-state: paused; 
    -o-animation-play-state: paused; 
    animation-play-state: paused; 
  }
}
.slide { 
  width:100vw; 
  height:100%; 
  background:red; 
  float:left; 
}
#slide1 { 
  background:url(https://images.unsplash.com/photo-1444682717031-a2498d603d5b?crop=entropy&dpr=2&fit=crop&fm=jpg&h=825&ixjsv=2.1.0&ixlib=rb-0.3.5&q=50&w=1450);
  -webkit-background-size: cover;
  background-size: cover;
}
#slide2 { 
  background:url(https://images.unsplash.com/photo-1442405740009-7b57cca9d316?crop=entropy&dpr=2&fit=crop&fm=jpg&h=825&ixjsv=2.1.0&ixlib=rb-0.3.5&q=50&w=1450);
  -webkit-background-size: cover;
  background-size: cover;
}
#slide3 { 
  background:url(https://images.unsplash.com/photo-1439337153520-7082a56a81f4?crop=entropy&dpr=2&fit=crop&fm=jpg&h=825&ixjsv=2.1.0&ixlib=rb-0.3.5&q=50&w=1450);
  -webkit-background-size: cover;
  background-size: cover;
}
@-webkit-keyframes slide { 
  25% { 
    transform:translateX(-100vw);
  }
  50% { 
    transform:translateX(-200vw);
  }
  75% { 
    transform:translateX(-100vw); 
  }
  
}
</style>
</head>
<body>
  <div class="slider-container">
  <section class="slider">
    <div class="slide" id="slide1"></div>
    <div class="slide" id="slide2"></div>
    <div class="slide" id="slide3"></div>
  </section>
</div>
</body>
</html>