<div class="cd-slider">
      <ul>
        <li class="item current" style="background: #5AA0D8;">
          <div class="card" style="background: #3C96DE;">
            <!-- <img src="url"> -->
            <div class="img">
              <svg class="svg-icon" viewBox="0 0 20 20">
                <path fill="#FFFFFF" d="M18.21,16.157v-8.21c0-0.756-0.613-1.368-1.368-1.368h-1.368v1.368v1.368v6.841l-1.368,3.421h5.473L18.21,16.157z"></path>
                <path fill="#FFFFFF" d="M4.527,9.316V7.948V6.579H3.159c-0.756,0-1.368,0.613-1.368,1.368v8.21l-1.368,3.421h5.473l-1.368-3.421V9.316z"></path>
                <path fill="#FFFFFF" d="M14.766,5.895h0.023V5.21c0-2.644-2.145-4.788-4.789-4.788S5.211,2.566,5.211,5.21v0.685h0.023H14.766zM12.737,3.843c0.378,0,0.684,0.307,0.684,0.684s-0.306,0.684-0.684,0.684c-0.378,0-0.684-0.307-0.684-0.684S12.358,3.843,12.737,3.843z M10,1.448c0.755,0,1.368,0.613,1.368,1.368S10.755,4.185,10,4.185c-0.756,0-1.368-0.613-1.368-1.368S9.244,1.448,10,1.448z"></path>
                <path fill="#FFFFFF" d="M14.789,6.579H5.211v9.578l1.368,1.368h6.841l1.368-1.368V6.579z M12.052,12.052H7.948c-0.378,0-0.684-0.306-0.684-0.684c0-0.378,0.306-0.684,0.684-0.684h4.105c0.378,0,0.684,0.306,0.684,0.684C12.737,11.746,12.431,12.052,12.052,12.052z M12.052,9.316H7.948c-0.378,0-0.684-0.307-0.684-0.684s0.306-0.684,0.684-0.684h4.105c0.378,0,0.684,0.307,0.684,0.684S12.431,9.316,12.052,9.316z"></path>
              </svg>
            </div>
            <div class="info">
            <h1>Title Card #1</h1>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet dolorem aperiam eos beatae inventore ad non, sunt quo minima dolor. Voluptatibus quisquam, sunt officiis a reiciendis ex eaque doloremque consectetur?</p>
              <a href="#">Buy Now</a>
            </div>
          </div>
        </li>
        <li class="item" style="background: #E0DBD8;">
          <div class="card" style="background: #D6C8BF;">
            <!-- <img src="url"> -->
            <div class="img">
              <svg class="svg-icon" viewBox="0 0 20 20">
                <path fill="#FFFFFF" d="M16.853,8.355V5.888c0-3.015-2.467-5.482-5.482-5.482H8.629c-3.015,0-5.482,2.467-5.482,5.482v2.467l-2.741,7.127c0,1.371,4.295,4.112,9.594,4.112s9.594-2.741,9.594-4.112L16.853,8.355z M5.888,17.367c-0.284,0-0.514-0.23-0.514-0.514c0-0.284,0.23-0.514,0.514-0.514c0.284,0,0.514,0.23,0.514,0.514C6.402,17.137,6.173,17.367,5.888,17.367z M5.203,10c0-0.377,0.19-0.928,0.423-1.225c0,0,0.651-0.831,1.976-0.831c0.672,0,1.141,0.309,1.141,0.309C9.057,8.46,9.315,8.938,9.315,9.315v1.028c0,0.188-0.308,0.343-0.685,0.343H5.888C5.511,10.685,5.203,10.377,5.203,10z M7.944,16.853H7.259v-1.371l0.685-0.685V16.853z M9.657,16.853H8.629v-2.741h1.028V16.853zM8.972,13.426v-1.028c0-0.568,0.46-1.028,1.028-1.028c0.568,0,1.028,0.46,1.028,1.028v1.028H8.972z M11.371,16.853h-1.028v-2.741h1.028V16.853z M12.741,16.853h-0.685v-2.056l0.685,0.685V16.853z M14.112,17.367c-0.284,0-0.514-0.23-0.514-0.514c0-0.284,0.23-0.514,0.514-0.514c0.284,0,0.514,0.23,0.514,0.514C14.626,17.137,14.396,17.367,14.112,17.367z M14.112,10.685h-2.741c-0.377,0-0.685-0.154-0.685-0.343V9.315c0-0.377,0.258-0.855,0.572-1.062c0,0,0.469-0.309,1.141-0.309c1.325,0,1.976,0.831,1.976,0.831c0.232,0.297,0.423,0.848,0.423,1.225S14.489,10.685,14.112,10.685z M18.347,15.801c-0.041,0.016-0.083,0.023-0.124,0.023c-0.137,0-0.267-0.083-0.319-0.218l-2.492-6.401c-0.659-1.647-1.474-2.289-2.905-2.289c-0.95,0-1.746,0.589-1.754,0.595c-0.422,0.317-1.084,0.316-1.507,0C9.239,7.505,8.435,6.916,7.492,6.916c-1.431,0-2.246,0.642-2.906,2.292l-2.491,6.398c-0.069,0.176-0.268,0.264-0.443,0.195c-0.176-0.068-0.264-0.267-0.195-0.444l2.492-6.401c0.765-1.911,1.824-2.726,3.543-2.726c1.176,0,2.125,0.702,2.165,0.731c0.179,0.135,0.506,0.135,0.685,0c0.04-0.029,0.99-0.731,2.165-0.731c1.719,0,2.779,0.814,3.542,2.723l2.493,6.404C18.611,15.534,18.524,15.733,18.347,15.801z"></path>
              </svg>
            </div>
            <div class="info">
            <h1>Title Card #2</h1>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, magni, corporis perferendis sit libero ducimus fuga cupiditate officiis dolore deserunt at. Adipisci iste sint repellat eos optio, nulla doloremque vitae.</p>
              <a href="#">Buy Now</a>
            </div>
          </div>
        </li>
        <li class="item" style="background: #565656">
          <div class="card" style="background: #454545">
            <!-- <img src="url"> -->
            <div class="img">
              <svg class="svg-icon" viewBox="0 0 20 20">
                <path fill="#FFFFFF" d="M5.177,17.658c0,0,3.445,1.987,4.823,1.987c2.067,0,4.823-1.987,4.823-1.987c0.024-0.025,0.044-0.054,0.068-0.08H5.109C5.133,17.604,5.153,17.633,5.177,17.658z M8.622,1.583V0.531C6.496,0.973,2.539,2.521,1.376,7.933H0.699c-0.189,0-0.344,0.155-0.344,0.344v1.378C0.354,9.845,0.509,10,0.699,10h0.392c-0.016,0.224-0.026,0.454-0.033,0.689H0.699c-0.189,0-0.344,0.155-0.344,0.344v1.378c0,0.189,0.155,0.344,0.344,0.344h0.439c0.089,0.79,0.262,1.804,0.594,2.849v2.663H4.34c-2.233-2.449-2.264-6.822-2.264-7.01C2.077,4.052,6.353,2.108,8.622,1.583zM10.689,0.354H9.311v2.059h1.378V0.354z M11.378,2.63v0.472H8.622V2.63C6.612,3.147,3.11,4.951,3.11,11.258c0,0,0.004,3.373,1.47,5.632h4.042v-0.689h2.756v0.689h4.042c1.466-2.259,1.47-5.632,1.47-5.632C16.89,4.951,13.388,3.147,11.378,2.63z M5.005,12.035c-0.318-0.364-0.517-0.833-0.517-1.354S4.687,9.69,5.005,9.327V12.035zM6.383,10.026c-0.295,0.078-0.517,0.335-0.517,0.654c0,0.319,0.222,0.576,0.517,0.654v1.395c-0.384-0.032-0.738-0.163-1.033-0.377V9.008c0.296-0.214,0.649-0.345,1.033-0.377V10.026z M7.761,12.353c-0.296,0.214-0.649,0.345-1.033,0.377v-1.395C7.022,11.257,7.244,11,7.244,10.681c0-0.319-0.222-0.576-0.517-0.654V8.631c0.384,0.032,0.738,0.163,1.033,0.377V12.353zM8.105,12.035V9.327c0.318,0.363,0.517,0.833,0.517,1.354S8.423,11.671,8.105,12.035z M10,13.445l-1.378,0.689L10,12.756l1.378,1.378L10,13.445z M11.895,12.035c-0.318-0.364-0.517-0.833-0.517-1.354s0.199-0.991,0.517-1.354V12.035z M13.273,10.026c-0.295,0.078-0.517,0.335-0.517,0.654c0,0.319,0.222,0.576,0.517,0.654v1.395c-0.384-0.032-0.738-0.163-1.033-0.377V9.008c0.296-0.214,0.649-0.345,1.033-0.377V10.026z M14.651,12.353c-0.296,0.214-0.649,0.345-1.033,0.377v-1.395c0.295-0.078,0.517-0.335,0.517-0.654c0-0.319-0.222-0.576-0.517-0.654V8.631c0.384,0.032,0.738,0.163,1.033,0.377V12.353zM14.995,12.035V9.327c0.318,0.363,0.517,0.833,0.517,1.354S15.313,11.671,14.995,12.035z M19.646,9.656V8.278c0-0.189-0.155-0.344-0.344-0.344h-0.678c-1.163-5.413-5.12-6.96-7.246-7.402v1.052c2.269,0.525,6.545,2.469,6.545,9.675c0,0.188-0.031,4.561-2.264,7.01h2.608v-2.663c0.333-1.044,0.505-2.058,0.594-2.849h0.439c0.189,0,0.344-0.155,0.344-0.344v-1.378c0-0.189-0.155-0.344-0.344-0.344h-0.359c-0.007-0.235-0.017-0.465-0.033-0.689h0.392C19.491,10,19.646,9.845,19.646,9.656z"></path>
              </svg>
            </div>
            <div class="info">
            <h1>Title Card #3</h1>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum harum enim cumque, dolore repellat quidem, qui eligendi ipsa mollitia, laborum quo animi eaque eius rem odit, quas eum. Praesentium, perferendis.</p>
              <a href="#">Buy Now</a>
            </div>
          </div>
        </li>
      </ul>
    
    <nav>
        <a href="#" class="prev">
          <svg viewBox="0 0 20 20">
            <path fill="#FFFFFF" stroke-width="0" d="M8.388,10.049l4.76-4.873c0.303-0.31,0.297-0.804-0.012-1.105c-0.309-0.304-0.803-0.293-1.105,0.012L6.726,9.516c-0.303,0.31-0.296,0.805,0.012,1.105l5.433,5.307c0.152,0.148,0.35,0.223,0.547,0.223c0.203,0,0.406-0.08,0.559-0.236c0.303-0.309,0.295-0.803-0.012-1.104L8.388,10.049z"></path>
          </svg>
        </a>
        <a href="#" class="next">
          <svg viewBox="0 0 20 20">
            <path fill="#FFFFFF" stroke-width="0" d="M11.611,10.049l-4.76-4.873c-0.303-0.31-0.297-0.804,0.012-1.105c0.309-0.304,0.803-0.293,1.105,0.012l5.306,5.433c0.304,0.31,0.296,0.805-0.012,1.105L7.83,15.928c-0.152,0.148-0.35,0.223-0.547,0.223c-0.203,0-0.406-0.08-0.559-0.236c-0.303-0.309-0.295-0.803,0.012-1.104L11.611,10.049z"></path>
          </svg>
        </a>
      </nav>

	</div>

@import url(https://fonts.googleapis.com/css?family=Lato:400,700,900);
*, *::before, *::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	border: 0;
}
html {
	font-size: 10px;
}
html, body {
	width: 100%;
	height: 100%;
}
body {
	font-family: 'Lato', sans-serif;
}
.cd-slider {
	position: relative;
	width: 100%;
	height: 100%;
	height: 100vh;
	background: transparent;
	overflow: hidden;
}
.item {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	list-style: none;
	-webkit-transform: translateX(100%);
	-moz-transform: translateX(100%);
	-ms-transform: translateX(100%);
	-o-transform: translateX(100%);
	transform: translateX(100%);
	-webkit-transition: -webkit-transform 1s cubic-bezier(0.88, 0.01, 0.08, 0.99);
	-moz-transition: -moz-transform 1s cubic-bezier(0.88, 0.01, 0.08, 0.99);
	-o-transition: -o-transform 1s cubic-bezier(0.88, 0.01, 0.08, 0.99);
	transition: transform 1s cubic-bezier(0.88, 0.01, 0.08, 0.99);
}
.card {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	max-width: 700px;
	width: 100%;
	border-radius: 5px;
	padding: 2%;
	box-shadow: 0 0 65px 2px rgba(0,0,0,.1);
}
.card img, .card .img {
	width: 40%;
	vertical-align: middle;
	display: inline-block;
}
.info {
	vertical-align: middle;
	display: inline-block;
	width: 59%;
	padding-left: 5%;
}
.info h1 {
	color: #fff;
	font-size: 3rem;
	margin-bottom: 3rem;
}
.info p {
	color: #fff;
	font-size: 1.6rem;
	margin-bottom: 40px;
}
.info a {
	display: inline-block;
	float: right;
	text-decoration: none;
	color: #000;
	background: #fff;
	font-size: 1.5rem;
	font-weight: 900;
	padding: 15px 30px;
	border-radius: 30px;
	text-transform: uppercase;
	word-spacing: 5px;
	letter-spacing: 2px;
	-webkit-transition: box-shadow .3s, opacity .6s 1s, -webkit-transform .6s 1s;
	-moz-transition: box-shadow .3s, opacity .6s 1s, -moz-transform .6s 1s;
	-o-transition: box-shadow .3s, opacity .6s 1s, -o-transform .6s 1s;
	transition: box-shadow .3s, opacity .6s 1s, transform .6s 1s;
}
.info a:hover {
	box-shadow: 10px 10px 30px 5px rgba(0,0,0,.1);
}
.prev, .next {
	position: absolute;
	top: 50%;
	left: 5%;
	width: 40px;
	height: 40px;
	margin-top: -20px;
}
.next {
	right: 5%;
	left: auto;
}
.hide-nav {
	visibility: hidden;
}
/* Transitions 
----------------------------------*/
.card img, .card .img, .info > * {
	opacity: 0;
	-webkit-transform: translateY(20%);
	-moz-transform: translateY(20%);
	-ms-transform: translateY(20%);
	-o-transform: translateY(20%);
	transform: translateY(20%);
	-webkit-transition: -webkit-transform .6s 1s, opacity .6s 1s;
	-moz-transition: -moz-transform .6s 1s, opacity .6s 1s;
	-o-transition: -o-transform .6s 1s, opacity .6s 1s;
	transition: transform .6s 1s, opacity .6s 1s;
}
.prev_slide {
	-webkit-transform: translateX(-100%);
	-moz-transform: translateX(-100%);
	-ms-transform: translateX(-100%);
	-o-transform: translateX(-100%);
	transform: translateX(-100%);
}
.current {
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	-ms-transform: translateX(0);
	-o-transform: translateX(0);
	transform: translateX(0);
}
.current .card img, .current .card .img, .current .info > * {
	opacity: 1;
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
	transform: translateY(0);
}
@media screen and (max-width: 900px) {
	.card { max-width: 70%; }
}
@media screen and (max-width: 800px) {
	.card { text-align: center; }
	.info { padding-left: 0; }
	.info p { display: none; }
	.info a { float: none; }
}
@media screen and (max-width: 650px) {
	.card { padding: 4%; }
	.card img, .card .img { width: 60%; margin-bottom: 5%;}
	.info { width: 100%; }
	.prev { left: 3%; }
	.next { right: 3%; }
}
@media screen and (max-height: 450px) and (orientation: landscape) {
	.card img, .card .img { width: 40%; margin-bottom: 0; }
	.info { width: 59%; padding-left: 5%;}
}

$(function() {

	$(".prev").on('click', function(event) {
		event.preventDefault();
		prevSlide();
	});

	$(".next").on('click', function(event) {
		event.preventDefault();
		nextSlide();
	});

	if ($(".item").length <= 1) {
		$(".next").addClass('hide-nav');
	}

	$(".prev").addClass('hide-nav');

	function nextSlide() {
		var atual = $(".cd-slider").find('.current'),
			next = atual.next();

		next.addClass('current').removeClass('prev_slide').siblings().removeClass('current');
		next.prevAll().addClass('prev_slide');

		if (next.index() > 0) {
			$(".prev").removeClass('hide-nav');
		}
		if (next.index() == $(".item").last().index()) {
			$(".next").addClass('hide-nav');
		}
	}

	function prevSlide() {
		var atual = $(".cd-slider").find('.current'),
			prev = atual.prev();

		prev.addClass('current').removeClass('prev_slide').siblings().removeClass('current');

		if (prev.index() !== $(".item").last().index()) {
			$(".next").removeClass('hide-nav');
		} 
		if (prev.index() == 0) {
			$(".prev").addClass('hide-nav');
		}
	}

});