Simple carousel Slider

Carousel slider using jQuery

by manoj_antony32

HTML

<div id="carousel">
  <div id="buttons">
    <a id="prev" href="#">
      <</a>
        <a id="next" href="#">></a>
  </div>
  <div id="slides">
    <ul>
      <li class="slide showing">
        <div class="quoteContainer">
          <p class="quote-phrase"><span class="quote-marks">"</span>First I was literally BLOWN AWAY by Company A's work! They went above and beyond all of our expectations with design, usability. and branding, I will reccommend them to everyone I know!
            <class="quote-marks">"</span>

          </p>
        </div>
        <div class="authorContainer">
          <p class="quote-author">John Doe // Local Business Owner</p>
        </div>
      </li>
 <li class="slide">
        <div class="quoteContainer">
          <p class="quote-phrase"><span class="quote-marks">"</span>one I could not stop staring! Company A's Web Solutions are by far the most elegant solutions, you can't beat their quality and attention to detail!
            <span class="quote-marks">"</span>

          </p>
        </div>
        <div class="authorContainer">
          <p class="quote-author">Andy Fakename // CEO: Andy's Camping Supplies</p>
        </div>
      </li>
 <li class="slide">
        <div class="quoteContainer">
          <p class="quote-phrase"><span class="quote-marks">"</span>two I could not stop staring! Company A's Web Solutions are by far the most elegant solutions, you can't beat their quality and attention to detail!
            <span class="quote-marks">"</span>

          </p>
        </div>
        <div class="authorContainer">
          <p class="quote-author">Andy Fakename // CEO: Andy's Camping Supplies</p>
        </div>
      </li>
 <li class="slide">
        <div class="quoteContainer">
          <p class="quote-phrase"><span class="quote-marks">"</span>three I could not stop staring! Company A's Web Solutions are by far the most elegant solutions, you can't beat their quality and attention to detail!
            <span...

CSS

body {
  background: #E96D65;
}

#carousel {
  position: relative;
  width: 60%;
  margin: 0 auto;
}

#slides {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 250px;
}

#slides ul {
  list-style: none;
  width: 100%;
  height: 250px;
  margin: 0;
  padding: 0;
  position: relative;
}

#slides li {
  width: 100%;
  height: 250px;
  float: left;
  text-align: center;
  position: relative;
  font-family: lato, sans-serif;
}


/* Styling for prev and next buttons */

.btn-bar {
  max-width: 346px;
  margin: 0 auto;
  display: block;
  position: relative;
  top: 40px;
  width: 100%;
}

#buttons {
  padding: 0 0 5px 0;
  float: right;
}

#buttons a {
  text-align: center;
  display: block;
  font-size: 50px;
  float: left;
  outline: 0;
  margin: 0 60px;
  color: #b14943;
  text-decoration: none;
  display: block;
  padding: 9px;
  width: 35px;
}

a#prev:hover,
a#next:hover {
  color: #FFF;
  text-shadow: .5px 0px #b14943;
}

.quote-phrase,
.quote-author {
  font-family: sans-serif;
  font-weight: 300;
  display: table-cell;
  vertical-align: middle;
  padding: 5px 20px;
  font-family: 'Lato', Calibri, Arial, sans-serif;
}

.quote-phrase {
  height: 200px;
  font-size: 24px;
  color: #FFF;
  font-style: italic;
  text-shadow: .5px 0px #b14943;
}

.quote-marks {
  font-size: 30px;
  padding: 0 3px 3px;
  position: inherit;
}

.quote-author {
  font-style: normal;
  font-size: 20px;
  color: #b14943;
  font-weight: 400;
  height: 30px;
}

.quoteContainer,
.authorContainer {
  display: table;
  width: 100%;
}

JavaScript

$(document).ready(function() {
  //rotation speed and timer
  //var speed = 5000;

  //var run = setInterval(rotate, speed);
  var slides = $('.slide');
  var container = $('#slides ul');
  var elm = container.find(':first-child').prop("tagName");
  
  var listLength = container.find(elm).length;
  
  var item_width = container.width();
  var previous = 'prev'; //id of previous button
  var next = 'next'; //id of next button
  slides.width(item_width); //set the slides to the correct pixel width
  container.parent().width(item_width);
  container.width(slides.length * item_width); //set the slides container to the correct total width
  //container.find(elm + ':first').before(container.find(elm + ':last'));
  //resetSlides();
  var lastUpdatedLeft = Math.abs($(container).css('left').replace(/[^-\d\.]/g, ''));
  /* Stop looping carousel*/
  var firstList = container.find(elm + ':first').attr('id');
  var lastList = container.find(elm + ':last').attr('id');
  var showingSlide = container.find(elm + ':nth-child(1)').attr('id');

  var presentLength = 1;
  console.log('Elm length= '+listLength)
    /* Stop looping carousel end*/
    //if user clicked on prev button
  $('#carousel #prev').css('pointer-events', 'none')
  $('#carousel #prev').css('border-color', '#dad7d7');

  $('#buttons a').click(function(e) {
    //slide the item
    if (container.is(':animated')) {
      return false;
    }
    if (e.target.id == previous) {

      $('#carousel #next').css('pointer-events', 'initial')
      $('#carousel #next').css('border-color', '#3c8aa0');
      lastUpdatedLeft = Math.abs($(container).css('left').replace(/[^-\d\.]/g, ''));
      container.stop().animate({
        'left': (parseInt(lastUpdatedLeft) - parseInt(item_width)) * -1
      }, 1500, function() {
        console.log((parseInt(lastUpdatedLeft) - parseInt(item_width)) * -1)
          //container.find(elm + ':first').before(container.find(elm + ':last'));
          /*resetSlides();*/
        presentLength--;
 ...