<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Better carousel / slider with label navigation & CSS animation</title>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Lato:300,400'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<h1>Better carousels / sliders with label navigation.</h1>
<p>A slider using label navigation, inspired by <a href="http://uxmovement.com/navigation/why-users-arent-clicking-your-home-page-carousel/">this article</a>.</p>
</div>
<div class="wrapper">
<ul class="slider">
<li class="slide"><img src="http://lorempixel.com/1000/300/"/>
<div class="info">
<h1>Lorem Ipsum</h1>
<p>Dolor sit amet</p>
</div>
</li>
<li class="slide"><img src="http://lorempixel.com/1000/300/city"/>
<div class="info">
<h1>Consectetur adipiscing elit</h1>
<p>Morbi pulvinar enim et congue sodales</p>
</div>
</li>
<li class="slide"><img src="http://lorempixel.com/1000/300/food"/>
<div class="info">
<h1>Morbi lacinia</h1>
<p>Porttitor iaculis. Aenean non iaculis mi. Aenean eget nulla ut urna placerat malesuada.</p>
</div>
</li>
</ul>
<ul class="navigation">
<li><a class="active" href="#" data-action="switchSlide">Lorem Ipsum</a></li>
<li><a href="#" data-action="switchSlide">Consectetur adipiscing elit</a></li>
<li><a href="#" data-action="switchSlide">Morbi lacinia</a></li>
</ul>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/chrishutchinson/better-carousel-slider-with-label-navigation-andamp-css-animation-jsgEe */
*, *:before, *:after {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
max-width: 100%;
font-family: 'Lato', sans-serif;
font-weight: 300;
}
a {
color: #E56C00;
text-decoration: none;
}
h1, h2, h3, h4, h5, h6, p {
font-weight: 300;
margin: 0;
padding: 0;
line-height: 1.4em;
}
ul {
margin: 0;
padding: 0;
}
div.container {
padding: 20px;
max-width: 1000px;
margin: 0 auto;
}
div.wrapper {
max-width: 1000px;
margin: 0 auto;
overflow: hidden;
position: relative;
}
ul.slider {
letter-spacing: -4px;
list-style-type: none;
width: 300%;
overflow: hidden;
margin-left: 0px;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
ul.slider li.slide {
letter-spacing: normal;
float: left;
height: 300px;
width: calc(100%/3);
position: relative;
}
ul.slider li.slide div.info {
background: rgba(255, 255, 255, 0.7);
padding: 20px;
width: 100%;
position: absolute;
top: 20px;
left: 0px;
}
ul.navigation {
list-style-type: none;
text-align: center;
letter-spacing: -4px;
width: 100%;
position: absolute;
bottom: 20px;
}
ul.navigation li {
display: inline-block;
letter-spacing: normal;
}
ul.navigation li a {
background: rgba(255, 255, 255, 0.8);
padding: 5px 20px;
display: block;
margin: 0 4px 8px;
font-size: 18px;
}
ul.navigation li a:hover, ul.navigation li a.active {
background: rgba(0, 0, 0, 0.6);
color: #FFF;
}
/*Downloaded from https://www.codeseek.co/chrishutchinson/better-carousel-slider-with-label-navigation-andamp-css-animation-jsgEe */
$(document).ready(function(){
var actions = {
switchSlide: function(e){
e.preventDefault(); // Prevent standard event
$('ul.navigation').find('a.active').removeClass('active'); // Remove all active classes
$(this).addClass('active'); // Add active to the clicked item
var index = $(this).parent().index(); // Get the index of the clicked item
index++; // Add one to the index (this make sure we can target the correct slide)
var slide = $('ul.slider').find('li.slide:nth-of-type(' + index + 'n)'); // Grab the slide we're switching to based on the anchor that was clicked
var leftDistance = slide.offset().left; // Get distance of slide from left
var currentMargin = $('ul.slider').offset().left; // Get distance of slider from left (in case it has already been transitioned)
var total = leftDistance - currentMargin; // Do the math!
$('ul.slider').css('margin-left', '-' + total + 'px'); // Apply the CSS which moves the slider
}
};
$('body').on('click', '[data-action]', function(){
var action = $(this).data('action');
if(action in actions){
actions[action].apply(this, arguments);
}
});
});