<div class="container">
    <div class="row">
      <div class="col">
        container
      </div>
    </div>
  </div><br>
  <div class="swiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide" id="sldrfirst"><div class="sldr-content">Slide 1</div></div>
    <div class="swiper-slide"><div class="sldr-content">Slide 2</div></div>
    <div class="swiper-slide"><div class="sldr-content">Slide 3</div></div>
    <div class="swiper-slide"><div class="sldr-content">Slide 4</div></div>
    <div class="swiper-slide"><div class="sldr-content">Slide 5</div></div>
    <div class="swiper-slide"><div class="sldr-content">Slide 6</div></div>
    <div class="swiper-slide"><div class="sldr-content">Slide 7</div></div>
    <div class="swiper-slide"><div class="sldr-content">Slide 8</div></div>
    <div class="swiper-slide"><div class="sldr-content">Slide 9</div></div>
    <div class="swiper-slide"><div class="sldr-content">Slide 10</div></div>
    <div class="swiper-slide"><div class="sldr-content">Slide 11</div></div>
  </div>
</div>

.container{
  height: 100%;
  outline:1px solid red
}

.sldr-content{
  background: #ccc;
  border-radius: 8px;
  padding: 20px;
}

.swiper-slide{
  width: 20%;
}

const swiper = new Swiper('.swiper', {
  slidesPerView: 'auto',
  spaceBetween: 24,
  on: {
    init: function () {
      firstSwiper();
    }
  }
});

function addListenerMulti(el, s, fn) {
  s.split(' ').forEach(e => el.addEventListener(e, fn, false));
}

addListenerMulti(window, 'orientationchange resize load', function(){
  firstSwiper();                                                     });

function firstSwiper(){
  let cf = document.getElementsByClassName('container')[0];
  let left = cf.getBoundingClientRect().left;
  console.log(left);
  document.getElementById('sldrfirst').style.marginLeft = left+"px";
}