<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> </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> </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> </div> </div> </div></div> </section>

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; bottom: -38px; width: 49px; height: 28px; z-index: 2; left: 50%; transform: translateX(-50%); } #testimonial blockquote p { position: relative; } #testimonial blockquote p:before { background: url(https://public.boxcloud.com/api/2.0/internal_files/280168437884/versions/294741218732/representations/png_paged_2048x2048/content/1.png?access_token=1!uMHQEcwYmtkUJYBdaqn_eiw5wf9jd4NpS2fCtEWqcRLVa2fDhGC2oHVpo10VhRvOnatYAukFSEgJILRAhjnWaxVhO27G6OUy7AuqgxnAo6fO_FnsyaWegYMAUGsLy60wFcQL38qofWX93K0QruHQnWsaVjfEi-oBQr7gKmAyX4LgZ_GRZ8iG_na3kjfKFw3KaV2bkqpuT-kRoUk5Zop3eA7hZPn4GqjzdHg03bsXUrlo2ckElzk1DS5hXlPWDWqSrVz96QbcIqmFxXErXyPr03eNeOsYQqciz_K7oFRzwrKUbjLHQ95u2Q7e7AJiFfQOLz7woe2DmguvheE39v4tDmmfFfTFrzqZN7zfMGZNNB8R448PV6iiqtgf1W8mbuo8hL2hZq8R7nzl7tw7&box_client_name=box-content-preview&box_client_version=1.28.1) no-repeat center bottom; content: ''; position: absolute; width: 21px; height: 24px; left: -15px; top: -15px } #testimonial blockquote p:after { background: url(https://public.boxcloud.com/api/2.0/internal_files/280168213289/versions/294740963465/representations/png_paged_2048x2048/content/1.png?access_token=1!FlHyc_B6RG0kImYeq-TYHrBuMzFKkL0LsAWTvrEC_nf7O_qlu-pxPF0eX6ktt9z9W0qZMjElsQW5fO59usDMJW-ZbW4b2CL0zggMjsYdwbEOf_jZ_BorDejHCBXY4iBvXM5WgK2Y8iuXVhSSGQlmQjzhbpovXQyYxdpjz2LTouA1xhHFLSNAC2Brabhsyo-t8nsfhGlOgDb1IWCiqane8Yp7PhP-wKNDNDE8bqlVDzrUlcB0XK1sz9vmtaLuvN8T6Uha1Q7UZWOMjSHONGzh70t_xQyRDqhagLSAOmnTm8695hRfcEAEP3k_Oex7-GiTxoXLuF3IkVXFfPrRMHDsh3zO-sDazZKkvoB44nkZnX39tpJ_EmIunw04esaBfqUISVJBJbDVr8BgVAQC&box_client_name=box-content-preview&box_client_version=1.28.1) no-repeat center bottom; content: ''; position: absolute; width: 21px; height: 24px; right: -15px; bottom: -15px }