Bootstrap carousel fade caption on side

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="service-carousel">
<div class="container">
  <div class="row">
  


  <div id="carousel" class="carousel slide carousel-fade" data-ride="carousel">
      <ol class="carousel-indicators">
          <li data-target="#carousel" data-slide-to="0" class="active"></li>
          <li data-target="#carousel" data-slide-to="1"></li>
          <li data-target="#carousel" data-slide-to="2"></li>
          <li data-target="#carousel" data-slide-to="3"></li>
      </ol>
      <!-- Carousel items -->
      <div class="carousel-inner">
          <div class="carousel-active item"><img class="" src="http://lorempixel.com/500/500/sports" alt="TCTMD">
     
         <div class="carousel-caption"> <div class="col-lg-offset-7 col-md-offset-7 col-sm-offset-7 col-lg-4 col-md-4 col-sm-4 col-xs-12">
          <h3>TCTMD</h3>
          <p>The CRF Center for Education manages TCTMD.com (TCTMD), a leading resource for interventional cardiovascular news and education. Since its launch in 2000, TCTMD has provided clinicians, researchers, industry professionals, and others with the latest news and data from journals, lay publications, and medical conferences around the world.</p>
        </div>
      </div>
      </div>
          <div class="item"><img class="" src="http://lorempixel.com/500/500/sports" alt="Editorial Services">
     
         <div class="carousel-caption"> <div class="col-md-offset-7 col-sm-offset-7 col-md-4 col-sm-4 col-xs-12">
          <h3>Editorial Services</h3>
          <p>The Editorial Services Department of the CRF Center for Education develops and distributes educational materials intended for physicians, allied health care providers,...

SCSS

$xsBreak : 480px ;
$smBreak : 768px ;
$mdBreak : 992px ;
$lrgBreak : 1200px ;


#service-carousel{
 .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{
      background: #1d5b7e;
      font-family: 'Maven Pro', sans-serif;

      @media (max-width: 768px){
        width:100%;
       /*height:360px;*/
      }
    }
    .carousel-indicators {
      right: 20px;
      left: auto;
      width: auto;
    }
    .carousel-caption  h3{
      font-size: 29px;
      text-shadow: none;
      @media (max-width: $lrgBreak){
        font-size: 23px;
      }  
      @media (max-width: $mdBreak){
        font-size: 18px;
      }  
      @media (max-width: $smBreak){
        font-size: 16px;
      }
    } 
    .carousel-caption {
     /*position: relative;*/
      left: auto;
      right: 0;
      top: 0;
      padding-bottom: 40px;
      padding-top: 40px;
      text-align: left;
      font-size: 18px;
      text-shadow: none;
      @media (max-width: $lrgBreak){
        font-size: 16px;
        padding-top: 20px;
      }
      @media (max-width: $mdBreak){
        padding-top: 15px;     
        font-size: 12px;
      }
       @media (max-width: $smBreak){
        display: block;
        position: relative;
        padding-top: 5px;
        padding-bottom: 40px;
        padding-left: 20px;
        padding-right: 20px;
      }
    }
    .item img{
      width: 670px;
      height: 464px;
     ...

JavaScript

$('.carousel').carousel();