Simple Responsive Quote style Carousel Slider

Today i'm going to post simple responsive quote style carousel slider with bootstrap. By using bootstrap we have more features, we already discussed some more tutorials in bootstrap, like wise this quote style slider is very simple one. let see the coding with demo.

DOWNLOAD                               LIVE DEMO

This is responsive slider, so CSS is important with media query, here we are adding font awesome style to add some design marks.

Past bootstrap posts :

Simple dropdown menu with Bootstrap

Step by step tab style form validation Wizard using Bootstrap

Simple Tooltip using Bootstrap

Accordion toggle using Jquery with Bootstrap

CSS and JAVASCRIPT

<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Head tags to include FontAwesome -->
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
  // When the DOM is ready, run this function
$(document).ready(function() {
  //Set the carousel options
  $('#quote-carousel').carousel({
    pause: true,
    interval: 4000,
  });
});
</script>

<style type="text/css">
/* carousel */
#quote-carousel {
    padding: 0 10px 30px 10px;
    margin-top: 30px;
}
/* Control buttons  */
#quote-carousel .carousel-control {
    background: none;
    color: #222;
    font-size: 2.3em;
    text-shadow: none;
    margin-top: 30px;
}
/* Previous button  */
#quote-carousel .carousel-control.left {
    left: -12px;
}
/* Next button  */
#quote-carousel .carousel-control.right {
    right: -12px !important;
}
/* Changes the position of the indicators */
#quote-carousel .carousel-indicators {
    right: 50%;
    top: auto;
    bottom: 0px;
    margin-right: -19px;
}
/* Changes the color of the indicators */
#quote-carousel .carousel-indicators li {
    background: #c0c0c0;
}
#quote-carousel .carousel-indicators .active {
    background: #333333;
}
#quote-carousel img {
    width: 250px;
    height: 100px
}
/* End carousel */

.item blockquote {
    border-left: none;
    margin: 0;
}
.item blockquote img {
    margin-bottom: 10px;
}
.item blockquote p:before {
    content: "\f10d";
    font-family: 'Fontawesome';
    float: left;
    margin-right: 10px;
}


/**
  MEDIA QUERIES
*/

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
#quote-carousel {
 margin-bottom: 0;
 padding: 0 40px 30px 40px;
}
}

/* Small devices (tablets, up to 768px) */
@media (max-width: 768px) {
/* Make the indicators larger for easier clicking with fingers/thumb on mobile */
#quote-carousel .carousel-indicators {
 bottom: -20px !important;
}
 #quote-carousel .carousel-indicators li {
 display: inline-block;
 margin: 0px 5px;
 width: 15px;
 height: 15px;
}
 #quote-carousel .carousel-indicators li.active {
 margin: 0px 5px;
 width: 20px;
 height: 20px;
}
}
</style>

The above CSS and JQUERY file with Bootstrap all important. and inside the script we have to mention the id of slider div.

HTML

<div class="container">
<div class="row">
<div class='col-md-offset-2 col-md-8 text-center'>
<h2>Simple Responsive Quote style Carousel Slider</h2>
</div>
</div>
<div class='row'>
<div class='col-md-offset-2 col-md-8'>
<div class="carousel slide" data-ride="carousel" id="quote-carousel">
<!-- Bottom Carousel Indicators -->
<ol class="carousel-indicators">
  <li data-target="#quote-carousel" data-slide-to="0" class="active"></li>
  <li data-target="#quote-carousel" data-slide-to="1"></li>
  <li data-target="#quote-carousel" data-slide-to="2"></li>
  <li data-target="#quote-carousel" data-slide-to="3"></li>
</ol>

<!-- Carousel Slides / Quotes -->
<div class="carousel-inner">
  
  <!-- Quote 1 -->
  <div class="item active">
    <blockquote>
      <div class="row">
        <div class="col-sm-3 text-center">
          <img class="img-circle" src="imgs/2.png" style="width: 100px;height:100px;">
        </div>
        <div class="col-sm-9">
          <p>Stay hungry, stay foolish.</p>
          <small>Steve Jobs</small>
        </div>
      </div>
    </blockquote>
  </div>
  <!-- Quote 2 -->
  <div class="item">
    <blockquote>
      <div class="row">
        <div class="col-sm-3 text-center">
          <img class="img-circle" src="imgs/3.png" style="width: 100px;height:100px;">
        </div>
        <div class="col-sm-9">
          <p>If you can dream it, you can do it.</p>
          <small>Walt Disney</small>
        </div>
      </div>
    </blockquote>
  </div>
  <!-- Quote 3 -->
  <div class="item">
    <blockquote>
      <div class="row">
        <div class="col-sm-3 text-center">
          <img class="img-circle" src="imgs/4.png" style="width: 100px;height:100px;">
        </div>
        <div class="col-sm-9">
          <p>Start where you are. Use what you have. Do what you can.</p>
          <small>Arthur Ashe</small>
        </div>
      </div>
    </blockquote>
  </div>
  <!-- Quote 4 -->
  <div class="item">
    <blockquote>
      <div class="row">
        <div class="col-sm-3 text-center">
          <img class="img-circle" src="imgs/1.png" style="width: 100px;height:100px;">
        </div>
        <div class="col-sm-9">
          <p>Running without competitor is waste of time..</p>
          <small>Arunkumar Maha</small>
        </div>
      </div>
    </blockquote>
  </div>
</div>

<!-- Carousel Buttons Next/Prev -->
<a data-slide="prev" href="#quote-carousel" class="left carousel-control"><i class="fa fa-chevron-left"></i></a>
<a data-slide="next" href="#quote-carousel" class="right carousel-control"><i class="fa fa-chevron-right"></i></a>
</div>
</div>
</div>
</div>

RELATED POSTS :

Step by step tab style form validation Wizard using Bootstrap

Simple Tooltip using Bootstrap

Accordion toggle using Jquery with Bootstrap

Better and Flexible Tooltip using LiteTooltip.js

Toggle hide and show concept

Simple dropdown menu with Bootstrap