title: How to align image to the left when uses resizes Swiper js window?
body: <p>Swiper is a carousel plugin. When a user resizes the window, the image gradually crops from both sides, which is great, but how do I make it to crop only from the right side while keeping the left side static?</p>
  <p>Here's the HTML:</p>
  <pre><code>&lt;div class=&quot;swiper-slide swiper-slide-active&quot; data-swiper-slide-index=&quot;0&quot;&gt;
  
      &lt;img src=&quot;img/double-room-1.jpg&quot; 
      style=&quot;
          border-radius:10px; 
          width:100%; 
          height:100%;
          object-fit:cover;
          overflow:hidden;
      &quot;&gt;
      
  &lt;/div&gt;
  </code></pre>
  <p>And the corresponding CSS:</p>
  <pre><code>.swiper-slide {
      flex-shrink: 0;
      width: 100%;
      height: 100%;
      position: relative;
      transition-property: transform;
  }
  </code></pre>
  <p>Any suggestion would be largely appreciated!</p>