Item: Better carousel / slider with label navigation &amp; CSS animation
Rating: 3.4
Author: chrishutchinson

4 Downloads
13 Views
Tweet
Download Now View Demo

HTML
CSS
JavaScript

<!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);
    }
  });
});

Comments

More from chrishutchinson

Better carousel / slider with label navigation & CSS animation

Technologies

Comments

More from chrishutchinson

A Pen by Chris Hutchinson

A Pen by Chris Hutchinson

A Pen by Chris Hutchinson

Better carousel / slider with label navigation & CSS animation

You Might Also Like

Bloodhound maybe

A Pen by NyanTN

A Pen by Tom

A Pen by Josesito

Style tiles with SCSS

masked credit card field

A Pen by Agustin Chavez

CSS Background Animations