title: Swiper React Breakpoints on React Page Load (Bootstrap)
body: <p>I'm using <a href="https://swiperjs.com/react" rel="nofollow noreferrer">Swiper React</a> with React.</p>
  <p>As far as I'm aware, I'm not able to control the 'slides per view' with Bootstrap. If I could, I'd simply create the necessary columns and put the swiper slides inside them.</p>
  <p>Instead I'm using the Swiper JS breakpoints. The breakpoints work and the 'slides per view' adjust as required, however, on page load, the slides show as 100%, and then shrink to the correct size - it's causing a horrible effect: <a href="https://streamable.com/08bkla" rel="nofollow noreferrer">VIDEO PREVIEW</a></p>
  <p>If anybody has any idea how to fix this I'd appreciate it - Code below:</p>
  <pre><code>import { Link } from &quot;gatsby&quot;
  
  import Layout from &quot;../components/layout&quot;
  import Seo from &quot;../components/seo&quot;
  
  import { Container } from 'react-bootstrap';
  
  import ProjectImage from &quot;../images/project-image.jpg&quot;
  
  // import Swiper core and required modules
  import { Pagination, A11y } from 'swiper';
  
  import { Swiper, SwiperSlide } from 'swiper/react';
  
  // Import Swiper styles
  import 'swiper/css';
  import 'swiper/css/pagination';
  
  const IndexPage = () =&gt; (
    &lt;Layout&gt;
      &lt;Seo title=&quot;Home&quot; /&gt;
        &lt;Container className=&quot;py-5&quot;&gt;
        &lt;Swiper
        modules={[Pagination, A11y]}
        spaceBetween={50}
        breakpoints={{
          0: {
            width: 0,
            slidesPerView: 1,
          },
          768: {
            width: 768,
            slidesPerView: 2,
          },
          1200: {
            width: 1200,
            slidesPerView: 3,
          },
        }}
        pagination={{ clickable: true }}
        onSwiper={(swiper) =&gt; console.log(swiper)}
        onSlideChange={() =&gt; console.log('slide change')}
      &gt;
        &lt;SwiperSlide&gt;
        &lt;div class=&quot;card chosen-project&quot;&gt;
                                  &lt;img src={ProjectImage} class=&quot;card-img-top&quot; alt=&quot;...&quot;/&gt;
                                  &lt;div class=&quot;card-body&quot;&gt;
                                      &lt;h5 class=&quot;card-title mt-2&quot;&gt;Lorem Ipsum&lt;/h5&gt;
                                      &lt;p class=&quot;card-text mt-3&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/p&gt;
                                      &lt;div class=&quot;mt-4 mb-2&quot;&gt;
                                          &lt;span class=&quot;badge rounded-pill&quot;&gt;Lorem&lt;/span&gt;
                                          &lt;span class=&quot;badge rounded-pill&quot;&gt;Ipsum&lt;/span&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;div class=&quot;card-footer bg-white&quot;&gt;
                                      &lt;a href=&quot;#&quot; class=&quot;card-link muted&quot;&gt;Installer&lt;/a&gt;
                                      &lt;a href=&quot;#&quot; class=&quot;card-link&quot;&gt;Source&lt;/a&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
        &lt;/SwiperSlide&gt;
        &lt;SwiperSlide&gt;Slide 2&lt;/SwiperSlide&gt;
        &lt;SwiperSlide&gt;Slide 3&lt;/SwiperSlide&gt;
        &lt;SwiperSlide&gt;Slide 4&lt;/SwiperSlide&gt;
        &lt;SwiperSlide&gt;Slide 5&lt;/SwiperSlide&gt;
        &lt;SwiperSlide&gt;Slide 6&lt;/SwiperSlide&gt;
        ...
      &lt;/Swiper&gt;
        &lt;/Container&gt;
    &lt;/Layout&gt;
  )
  
  export default IndexPage
  </code></pre>