CSS – SASS – BOOTSTRAP SLIDER FADE

		
		
			


================



HTML



================



<section id=”speaker-page-block-4″>



   <div class=”content-wrapper”>



      <div class=”container”>



         <div class=”col-md-12″>



            <article class=”right-text”>



               <h2><span class=”lovely”>WHAT PEOPLE ARE SAYING …</span></h2>



               <article id=”testimonial-slider”>



                  <div id=”carousel-example-captions” class=”carousel slide carousel-fade” data-ride=”carousel”>



                     <ol class=”carousel-indicators hide”>



                        <li data-target=”#carousel-example-captions” data-slide-to=”0″ class=”active”></li>



                        <li data-target=”#carousel-example-captions” data-slide-to=”1″ class=””></li>



                        <li data-target=”#carousel-example-captions” data-slide-to=”2″ class=””></li>



                        <li data-target=”#carousel-example-captions” data-slide-to=”3″ class=””></li>



                     </ol>



                     <div class=”carousel-inner” role=”listbox”>



                        <div class=”item active”>



                           <!– <img class=”img-responsive center-block img-circle” src=”/wp-content/uploads/2016/07/Debbie-Shadid.jpg” alt=””> –>



                           <h4 class=”text-center”>



                              <i class=”fa fa-quote-left pull-left” aria-hidden=”true”></i>



                              We recently had the pleasure to have Leisa deliver her presentation The Top 7 Ways COACHES Sabotage 



                              Their Financial Success (and How to Stop them) to the our statewide ICF Michigan chapter. Undoubtedly, 



                              Leisa’s presentation was one of the most outstanding in our three years of providing monthly tele-class 



                              programs to our professional coaches. Her real life experiences and powerful stories supported by clear 



                              actions we can take to move ourselves forward and further our financial mindsets and results were just 



                              incredible. I highly recommend Leisa to any organization seeking a very special speaker who instantly 



                              clicks with her audience. Her authenticity shines through to make the learning experience truly memorable. 



                              OUTSTANDING!



                           </h4>



                           <i class=”fa fa-quote-right pull-right” aria-hidden=”true”></i>



                           <div class=”moose-caption”>



                              <h3>Rebecca Kraus</h3>



                              <p>2015 ICF Michigan President</p>



                           </div>



                        </div>



                        <div class=”item”>



                           <!– <img class=”img-responsive center-block img-circle” src=”/wp-content/uploads/2016/07/Macy_BHL_005-1.jpg” alt=””> –>



                           <h4 class=”text-center”>



                              <i class=”fa fa-quote-left pull-left” aria-hidden=”true”></i>



                              Leisa spoke to a diverse audience and hit the mark for everyone, having them all participate 



                              and leave with a message that resonates personally.  Her unique perspective and engaging style 



                              will not disappoint.  



                           </h4>



                           <i class=”fa fa-quote-right pull-right” aria-hidden=”true”></i>



                           <div class=”moose-caption”>



                              <h3>Suzy Klass</h3>



                              <p>CREW of Northern Nevada</p>



                           </div>



                        </div>



                        <div class=”item”>



                           <!– <img class=”img-responsive center-block img-circle” src=”/wp-content/uploads/2016/07/Lynne-Gardner-1.jpg” alt=””> –>



                           <h4 class=”text-center”>



                              <i class=”fa fa-quote-left pull-left” aria-hidden=”true”></i>



                              Leisa’s presentations are very clearly articulated and in my experience it’s obvious she has done 



                              the relevant research and study in order to gain a deep understanding of the topics presented as well 



                              as sharing her personal experience. I’d recommend Leisa for any presentation she plans to offer.” 



                           </h4>



                           <i class=”fa fa-quote-right pull-right” aria-hidden=”true”></i>



                           <div class=”moose-caption”>



                              <h3>Andy Hill,</h3>



                              <p>Director-For Goodness Sake</p>



                           </div>



                        </div>



                     </div>



                     <a class=”left carousel-control” href=”#carousel-example-captions” role=”button” data-slide=”prev”> 



                     <i class=”fa fa-chevron-left fa-2x” aria-hidden=”true”></i>



                     <span class=”sr-only”>Previous</span> </a> 



                     <a class=”right carousel-control” href=”#carousel-example-captions” role=”button” data-slide=”next”> 



                     <i class=”fa fa-chevron-right fa-2x” aria-hidden=”true”></i> <span class=”sr-only”>Next</span> </a> 



                  </div>



               </article>



            </article>



         </div>



      </div>



      <!– CONTAINER –>



   </div>



</section>








=============



SASS



=============








#speaker-page-block-4 {



    .content-wrapper {



        // background: url(‘/wp-content/uploads/2016/07/block1-bg-4.jpg’) center center fixed;



        background: url(‘/wp-content/uploads/2016/06/block-4-bg.jpg’) repeat center center fixed;



        text-align: center;



        padding-top: 10rem;



        padding-bottom: 10rem;



        min-height: 700px;



        h2 {



            padding-bottom: 0rem;



            font-size: 3.5rem;



        }



        /*===================================



		=            slider fade            =



		===================================*/



        



        .carousel-fade {



            .carousel-inner {



                .item {



                    transition-property: opacity;



                }



                .item,



                .active.left,



                .active.right {



                    opacity: 0;



                }



                .active,



                .next.left,



                .prev.right {



                    opacity: 1;



                }



                .next,



                .prev,



                .active.left,



                .active.right {



                    left: 0;



                    transform: translate3d(0, 0, 0);



                }



            }



            .carousel-control {



                z-index: 2;



            }



        }



        // ======================================



        #carousel-example-captions {



            .carousel-indicators {



                margin-top: 15rem;



                top: 50%;



            }



            .carousel-control.left {



                background-image: none !important;



            }



            .carousel-control.right {



                background-image: none !important;



            }



            .item {



                // margin-top: 8rem;



                i {



                    font-size: 7rem;



                    color: lighten( $gray-light, 20%);



                }



                h4 {



                    font-size: 2.5rem;



                    margin-top: 3rem;



                    padding-top: 6rem;



                }



                .moose-caption {



                    h3 {



                        font-weight: 700;



                    }



                    p {



                        font-weight: 300;



                        font-size: 2rem;



                    }



                }



            }



        }



    }



}