title: Bootstrap - combination of using box-shadow and overflow: hidden
body: <p>I am using a carousel through <code>SwiperJS</code> library which has its own CSS style meaning that you can choose how many slides should be displayed depending on the screen, having equal space between them and equal margins (right and left):</p>
  
  <pre><code>    &lt;div class="swiper-container"&gt;
          &lt;div class="swiper-wrapper"&gt;
              &lt;div class="swiper-slide"&gt;
                  &lt;div class="ss-swiper-slide"&gt;
                      &lt;img class="ss-image-slider" src="{% static 'assets/img/theme/light/product-labels.png' %}"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="swiper-slide"&gt;
                  &lt;div class="ss-swiper-slide"&gt;
                      &lt;img class="ss-image-slider" src="{% static 'assets/img/theme/light/product-labels.png' %}"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="swiper-slide"&gt;
                  &lt;div class="ss-swiper-slide"&gt;
                      &lt;img class="ss-image-slider" src="{% static 'assets/img/theme/light/product-labels.png' %}"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="swiper-slide"&gt;
                  &lt;div class="ss-swiper-slide"&gt;
                      &lt;img class="ss-image-slider" src="{% static 'assets/img/theme/light/product-labels.png' %}"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="swiper-slide"&gt;
                  &lt;div class="ss-swiper-slide"&gt;
                      &lt;img class="ss-image-slider" src="{% static 'assets/img/theme/light/product-labels.png' %}"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="swiper-slide"&gt;
                  &lt;div class="ss-swiper-slide"&gt;
                      &lt;img class="ss-image-slider" src="{% static 'assets/img/theme/light/product-labels.png' %}"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.swiper-container {
      margin-left: auto;
      margin-right: auto;
      position: relative;
      overflow: hidden;
      list-style: none;
      padding: 0;
      z-index: 1;
  }
  
  .ss-swiper-slide {
      width: 100%;
      padding-bottom: calc(100% * 833 / 500);
  }
  
  .ss-image-slider {
      position: absolute;
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 5px;
      box-shadow: 0 7px 39px -5px rgba(0, 0, 0, 0.6), 0px 3px 15px 2px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.3), inset 0 -1px 3px 0 rgba(0, 0, 0, 0.2), inset 0 -1px 0 0 rgba(0, 0, 0, 0.12), inset 0 2px 0 0 rgba(255, 255, 255, 0.2);
  }
  </code></pre>
  
  <p>This works just fine when I use standard images within a slide, having no CSS style applied to them. However, I would like to use <code>box-shadow</code> CSS property but due to the <code>overflow: hidden</code> property applied to the parent container which is <code>swiper-container</code>, for the first and the last slide the shadow is not displayed:</p>
  
  <p><strong>The container using its standard CSS, without any padding applied which has an equal margin left and right</strong></p>
  
  <p><a href="https://i.stack.imgur.com/AVuN8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AVuN8.png" alt=""></a></p>
  
  <p>Since this is due to the <code>overflow: hidden</code> property, I've tried to add <code>padding</code> to the main container but this will affect the carousel, meaning that the margin right will be affected:</p>
  
  <p><strong>The container with padding and margin-left applied, the box-shadow is visible but the margin right of it is affected</strong></p>
  
  <p><a href="https://i.stack.imgur.com/6bIfz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6bIfz.png" alt=""></a></p>
  
  <pre><code>.swiper-container {
      margin-left: -1.25rem !important;
      padding: 1.25rem !important;
  }
  </code></pre>
  
  <p>Is there any way I can solve this? Thanks</p>