title: How to display previous and next images with a Bootstrap carousel
body: <p>The effect I'm looking for can be seen in the following image, it is a carousel with 3 images. </p>
  
  <p>How can I make the bootstrap carousel show the left and right images with an opacity of 0.7?</p>
  
  <p><img src="https://i.imgur.com/6flADwl.jpg" alt="http://i.imgur.com/6flADwl.jpg"></p>
  
  <p>The following is my carousel template.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="col-md-10 center-block"&gt;
      &lt;img id="logo" src="./img/yoox_group.png" alt="yoog group" /&gt;
  
      &lt;div id="carousel-example-generic" class="carousel slide" data-ride="carousel"&gt;
          &lt;!-- Indicators --&gt;
          &lt;ol class="carousel-indicators"&gt;
              &lt;li data-target="#carousel-example-generic" data-slide-to="0" class="active"&gt;&lt;/li&gt;
              &lt;li data-target="#carousel-example-generic" data-slide-to="1"&gt;&lt;/li&gt;
              &lt;li data-target="#carousel-example-generic" data-slide-to="2"&gt;&lt;/li&gt;
          &lt;/ol&gt;
  
          &lt;!-- Wrapper for slides --&gt;
          &lt;div class="carousel-inner" role="listbox"&gt;
              &lt;div class="item active"&gt;
                  &lt;img src="./img/carousel/carousel-001.jpg" alt="..." /&gt;
                  &lt;div class="carousel-caption"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="item"&gt;
                  &lt;img src="./img/carousel/carousel-002.jpg" alt="..." /&gt;
                  &lt;div class="carousel-caption"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="item"&gt;
                  &lt;img src="./img/carousel/carousel-003.jpg" alt="..." /&gt;
                  &lt;div class="carousel-caption"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- Controls --&gt;
          &lt;a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"&gt;
              &lt;img id="arrowleft" src="./img/arrow_left.png" /&gt;
              &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
          &lt;/a&gt;
          &lt;a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"&gt;
              &lt;img id="arrowright" src="./img/arrow_right.png" /&gt;
              &lt;span class="sr-only"&gt;Next&lt;/span&gt;
          &lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>#arrowleft {
      background-color: #FFF;
      padding: 10px 8px;
      position: absolute;
      margin-left: -95px;
      top: 45%;
      z-index: 5;
      display: inline-block;
  }
  #arrowright {
      background-color: #FFF;
      padding: 10px 8px;
      position: absolute;
      margin-left: 67px;
      top: 45%;
      z-index: 5;
      display: inline-block;
  }
  </code></pre>