TEXT Slider

In this example below you will see how to do a TEXT Slider with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by DM_Daria, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright DM_Daria ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>TEXT Slider</title>
  
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <section id="testimonial">
  <div class="container-inf2">
    <h1>TESTIMONIAL</h1>
<div class="btn-bar">
  <div id="buttons">
    <a class="some" id="textprev" href="#">&lt;</a>
    <a class="some" id="textnext" href="#">&gt;</a>
  </div>
</div>
<div id="textslides">
  <ul>
    <li class="textslide">
      A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.
      <p><i class="fa fa-quote-left" aria-hidden="true"></i></p>
      <p class="test"><img src="http://demos-pirftc7xlgm3gz2xr9zm.stackpathdns.com/infinite/wp-content/uploads/2016/05/testimonial-2.jpg">
        ROBERT KIM
        <span class="mini">Customer</span>
      </p>
    </li>
    <li class="textslide">
      A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.
      <p><i class="fa fa-quote-left" aria-hidden="true"></i></p>
      <p class="test"><img src="http://demos-pirftc7xlgm3gz2xr9zm.stackpathdns.com/infinite/wp-content/uploads/2016/05/testimonial-2.jpg">
        ROBERT KIM
        <span class="mini">Customer</span>
      </p>
    </li>
    <li class="textslide">
      A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.
      <p><i class="fa fa-quote-left" aria-hidden="true"></i></p>
      <p class="test"><img src="http://demos-pirftc7xlgm3gz2xr9zm.stackpathdns.com/infinite/wp-content/uploads/2016/05/testimonial-2.jpg">
        ROBERT KIM
        <span class="mini">Customer</span>
      </p>
    </li>
  </ul>
  
    </div>
  </div>
</section>
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/DM_Daria/text-slider-aBdPNK */
#testimonial {
  background-image: url("http://demos-pirftc7xlgm3gz2xr9zm.stackpathdns.com/infinite/wp-content/uploads/2016/06/home-testimonial-bg.jpg");
    background-position: center center;
  width:100%;
    height: 500px;
  padding: 5%;
  -webkit-box-sizing: border-box;
  position:relative;
  color:#fff;
  text-align:center;
}
.container-inf2 {
    width:92%;
    margin:0 auto;
}
#textslides {
  overflow: hidden;
  position: relative;
  width: 80%;
  height: 250px;
  margin:auto;
}

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

#textslides li {
  width: 100%;
  height: 250px;
  float: left;
  text-align: center;
  position: relative;
  font-family: lato, sans-serif;
}
.btn-bar {
  width: 100%;
  display: block;
  position:relative;
  top:40%;
}

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

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

}
a#textprev {
  float:left;
}
a#textnext {
  float:right;
}
#textslides i {
  font-size:30px;
}
#textslides img {
  width:50px;
  height:50px;
  border-radius:50%;
  vertical-align:middle;
  float:left;
}
.mini {
  font-size:12px;
  font-style:italic;
  padding-top:10px;
}
.test {
  width: 180px;
  margin:5% auto;
}

/*Downloaded from https://www.codeseek.co/DM_Daria/text-slider-aBdPNK */
$('#testimonial').ready(function () {
  //rotation speed and timer
  var speed = 5000;
  
  var run = setInterval(rotate, speed);
  var textSlides = $('.textslide');
  var textContainer = $('#textslides ul');
  var elm = textContainer.find(':first-child').prop("tagName");
  var item_width = textContainer.width();
  var textPrevious = 'textprev'; //id of previous button
  var textNext = 'textnext'; //id of next button
  textSlides.width(item_width); //set the slides to the correct pixel width
  textContainer.parent().width(item_width);
  textContainer.width(textSlides.length * item_width); //set the slides container to the correct total width
  textContainer.find(elm + ':first').before(textContainer.find(elm + ':last'));
  resetSlides();
  
  
  //if user clicked on prev button
  
  $('#buttons a').click(function (e) {
    //slide the item
    
    if (textContainer.is(':animated')) {
      return false;
    }
    if (e.target.id == textPrevious) {
      textContainer.stop().animate({
        'left': 0
      }, 1500, function () {
        textContainer.find(elm + ':first').before(textContainer.find(elm + ':last'));
        resetSlides();
      });
    }
    
    if (e.target.id == textNext) {
      textContainer.stop().animate({
        'left': item_width * -2
      }, 1500, function () {
        textContainer.find(elm + ':last').after(textContainer.find(elm + ':first'));
        resetSlides();
      });
    }
    
    //cancel the link behavior      
    return false;
    
  });
  
  //if mouse hover, pause the auto rotation, otherwise rotate it  
  textContainer.parent().mouseenter(function () {
    clearInterval(run);
  }).mouseleave(function () {
    run = setInterval(rotate, speed);
  });
  
  
  function resetSlides() {
    //and adjust the container so current is in the frame
    textContainer.css({
      'left': -1 * item_width
    });
  }
  
});
//a simple function to click next link
//a timer will call this function, and the rotation will begin

function rotate() {
  $('#textnext').click();
}

Comments