Bootstrap Snippet Tab testimonial with parallax scroll and carousel slider with navigation + created by ravi using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<section id="testimonial">
  <div class="">
    <h4>Testimonial </h4>
 <div class="carousel slide" id="fade-quote-carousel" data-ride="carousel" data-interval="3000"> 
      <!-- Carousel indicators -->
      <ol class="carousel-indicators">
        <li data-target="#fade-quote-carousel" data-slide-to="0" class="active"><img src="https://c1.staticflickr.com/5/4775/27081918138_66cc128474_m.jpg" alt=""></li>
        <li data-target="#fade-quote-carousel" data-slide-to="1"><img src="https://c1.staticflickr.com/5/4794/26080299437_f20beb6f9c_m.jpg" alt=""></li>
        <li data-target="#fade-quote-carousel" data-slide-to="2" ><img src="https://c1.staticflickr.com/1/794/40952744011_84e33a451f_m.jpg" alt=""></li>
        <li data-target="#fade-quote-carousel" data-slide-to="3"><img src="https://c1.staticflickr.com/5/4783/26080300007_727b682ac7_m.jpg" alt=""></li>
        <li data-target="#fade-quote-carousel" data-slide-to="4"><img src="https://c1.staticflickr.com/1/802/26080299897_bb197968db_m.jpg" alt=""></li>
        <li data-target="#fade-quote-carousel" data-slide-to="5"><img src="https://c1.staticflickr.com/5/4786/26080300167_9ddca82ac8_m.jpg" alt=""></li>
      </ol>
      <!-- Carousel items -->
      <div class="caro_bg ">
        <div class="container">
          <div class="carousel-inner    ">
            <div class="item active">
              <blockquote>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, veritatis nulla eum laudantium totam tempore optio doloremque laboriosam quas, quos eaque molestias odio aut eius animi. Impedit temporibus nisi accusamus.</p>
              </blockquote>
            </div>
            <div class="item">
              <blockquote>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, veritatis nulla eum laudantium totam tempore optio doloremque laboriosam quas, quos eaque molestias odio aut eius animi. Impedit temporibus nisi accusamus.</p>
              </blockquote>
            </div>
            <div class=" item">
              <blockquote>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, veritatis nulla eum laudantium totam tempore optio doloremque laboriosam quas, quos eaque molestias odio aut eius animi. Impedit temporibus nisi accusamus.</p>
              </blockquote>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
        
        body{ height: 1000px}
        h4 {
    font: normal 26px 'latosemibold';
    text-align: center;
}
        #testimonial .carousel-indicators {
    position: static;
    width: auto;
    display: block;
    text-align: center;
    margin: 30px auto 30px;
}
#testimonial blockquote {
    border: 0;
    padding: 80px 20px;
    margin: 0;
    color: #fff;
}
.caro_bg {
    background: url(//c1.staticflickr.com/1/786/40244084264_698ec5280d_k.jpg) no-repeat top fixed;
    text-align: center;
    position: relative;
    z-index: 2; background-size:cover
}
#testimonial .carousel-indicators .active, #testimonial .carousel-indicators li {
    text-indent: unset;
    width: auto;
    height: auto;
    margin: auto;
    position: relative
}
#testimonial .carousel-indicators .active:after {
    background: url(https://public.boxcloud.com/api/2.0/internal_files/280168272984/versions/294741029640/representations/png_paged_2048x2048/content/1.png?access_token=1!GupmiHhxE2lZXi8_mPaoKy5EPrSKIRknQh6JX-KYMASvT1d1w1PHrVhpY-cmji06FFwz57FuPwf_TogFwUMtynAdaOJMl0TApeF9PRjNUA1eecGFQl9ZYpp-qOy0fbpxrDtDIzVyMU5MD2HETBcV0xHUcS8PAU4bcCTwi9o36pYOG3w6eMRnKhdL1FMbfIJW33sgE_9rN1k3oUcftGnn-wtGTcxmXMEqniJFgHy8AdEoh400fQv38RcZQIz4C0eTLjMyALhknZ7VfrpqG098GhsPLziKV8KoJsORL6jvd4FfQpSG9lbkdV4e5BokUJqOl-T7nJ2CzNowv7IMhl6_XU_C1jgcSZHYci3G6nv6coE9dkecRcxBb-N7VdekJCTTJKDsXvU8GKYsYLK4&box_client_name=box-content-preview&box_client_version=1.28.1) no-repeat center bottom;
    content: '';
    position: absolute;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Tab testimonial with parallax scroll and carousel slider with navigation + created by ravi"
Bootstrap 3.3.0 Snippet by ravi7284007

Related: See More

Questions / Comments:

"Tab testimonial with parallax scroll and carousel slider with navigation + created by ravi" Bootstrap 3.3.0 Snippet by ravi7284007

Related: See More

Questions / Comments:

"Tab testimonial with parallax scroll and carousel slider with navigation + created by ravi"
Bootstrap 3.3.0 Snippet by ravi7284007