title: How can I center items (fixed-width - swiper-slide) properly?
body: <p>I try to center my slides inside my <code>swiper-container</code>. The final version needs to look like in the following graphic:</p>
  <p><a href="https://i.stack.imgur.com/Lp7Ay.png" rel="nofollow noreferrer">SwiperJs - Final Version (large, medium and small screensizes:)</a>
  <a href="https://i.stack.imgur.com/Lp7Ay.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Lp7Ay.png" alt="SwiperJs - Final Version (large, medium and small screensizes" /></a></p>
  <p>Every pagination dot should automatically correlate with a card.</p>
  <p>I am not sure how to achieve this. The cards do not center properly.</p>
  <p>Not sure, but could it be, that the centering does not work, because of the fixed-width <code>swiper-slide</code> ? If I don't give the slides a fixed-width, it will actually center properly, but of course the card-design then gets &quot;crushed&quot;.</p>
  <p>Here is my code:</p>
  <p><strong>Swiper-JS</strong></p>
  <pre><code>var swiper = new Swiper('.swiper-container', {
        slidesPerView: 5,
        spaceBetween: 0,
        centeredSlides: true,
        initialSlide: 2,
        // init: false,
        pagination: {
          el: '.swiper-pagination',
          type: 'bullets',
          clickable: true
        },
        breakpoints: {
          0: {
            slidesPerView: 1,
            spaceBetween: 0,
          },
          350: {
            slidesPerView: 3,
            spaceBetween: 0,
            
          },
          540: {
            slidesPerView: 3,
            spaceBetween: 0,
            
          },
          768: {
            slidesPerView: 3,
            spaceBetween: 0,
            
          },
          1100: {
            slidesPerView: 5,
            spaceBetween: 0,
           
          },
          1200: {
            slidesPerView: 5,
            spaceBetween: 0,
           
          },
        }
      });
  
  </code></pre>
  <p><strong>CSS</strong></p>
  <pre><code>.swiper-container {
    width: 100%;
    height: 100%;
    padding-bottom: 40px;
    /* position: absolute; */
    margin: 20px auto;
    justify-content: center;
  }
  
  .swiper-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    
  }
  
  .swiper-slide {
    align-items: center;
    height: 300px;
    /* min-width: 200px !important; */
    width: 200px !important;
    display:flex;
    justify-content: center;
  
  }
  
  .swiper-pagination {
    padding-bottom: 15px;
  }
  
  .swiper-container .swiper-wrapper .swiper-slide .card {
    min-width: 185px !important;
  }
  
  .cardWrapper {
    padding: 10px 10px 0px 10px;
  }
  
  .cardTextHeading {
    font-family: &quot;DINPro-Medium&quot;;
    font-size: 16px;
  }
  
  .cardTextSubheading {
    font-family: &quot;DINPro-Regular&quot;;
    font-size: 16px;
    text
  }
  
  .cardTextContent {
    font-family: &quot;DINPro-Medium&quot;;
    font-size: 10px;
    padding-bottom: 0;
    margin-bottom:0;
  }
  
  .cardTextBottom {
    font-family: &quot;DINPro-Regular&quot;;
    font-size: 10px;
    color: #9A9A9A;
    text-align: left;
  }
  
  #cardTextProductData {
    font-family: &quot;DINPro-Regular&quot;;
    font-size: 12px;
    color: #3DA9EA;
    text-align: left;
    margin-bottom: 0;
  }
  
  .CardpriceTag {
    font-family: &quot;DINPro-Medium&quot;;
    font-size: 20px;
    color: #D0021B;
    text-align: right;
    margin-bottom:0;
    margin-top:0;
  }
  
  </code></pre>
  <p><strong>HTML</strong></p>
  <pre><code>&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
  &lt;link href=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;/&gt;
  &lt;script src=&quot;https://unpkg.com/swiper/swiper-bundle.min.js&quot;&gt;&lt;/script&gt;
  &lt;link href=&quot;https://unpkg.com/swiper/swiper-bundle.min.css&quot; rel=&quot;stylesheet&quot;/&gt;
  
  
  
  &lt;div class=&quot;container-fluid mt-4 pl-5 pr-5&quot;&gt;
          &lt;div class=&quot;row&quot;&gt;
              &lt;div class=&quot;col-12&quot; style=&quot;height: 475px;&quot;&gt;
                  &lt;div class=&quot;swiper-container&quot;&gt;
                      &lt;div class=&quot;swiper-wrapper&quot;&gt;
                          &lt;div class=&quot;swiper-slide&quot;&gt;
                              &lt;div class=&quot;card&quot; style=&quot;width: 185px;&quot;&gt;
                                  &lt;div class=&quot;card-body p-0&quot;&gt;
                                      &lt;div class=&quot;CardWrapper&quot;&gt;
                                          &lt;img id=&quot;img-top-size&quot; class=&quot;card-img-top pb-3&quot; src=&quot;https://placeimg.com/160/160/any&quot; alt=&quot;Card image cap&quot;&gt;
                                          &lt;h5 class=&quot;card-title cardTextHeading&quot;&gt;Lorem ipsum&lt;/h5&gt;
                                          &lt;h6 class=&quot;card-subtitle mb-4 text-muted cardTextSubheading&quot;&gt;Lorem ipsum&lt;/h6&gt;
                                          &lt;p class=&quot;card-text text-left cardTextContent&quot;&gt;Lorem ipsum&lt;/p&gt;
                                          &lt;span class=&quot;pr-1&quot;&gt;&lt;img src=&quot;&lt;?php echo get_theme_file_uri('/images/icons_sun_filled.png');?&gt;&quot; width=&quot;15&quot; height=&quot;15&quot; class=&quot;d-inline-block&quot;  alt=&quot;&quot;&gt;&lt;/span&gt;
                                          &lt;span class=&quot;pr-1&quot;&gt;&lt;img src=&quot;&lt;?php echo get_theme_file_uri('/images/icons_sun_filled.png');?&gt;&quot; width=&quot;15&quot; height=&quot;15&quot; class=&quot;d-inline-block&quot;  alt=&quot;&quot;&gt;&lt;/span&gt;
                                          &lt;span class=&quot;pr-1&quot;&gt;&lt;img src=&quot;&lt;?php echo get_theme_file_uri('/images/icons_sun_filled.png');?&gt;&quot; width=&quot;15&quot; height=&quot;15&quot; class=&quot;d-inline-block&quot;  alt=&quot;&quot;&gt;&lt;/span&gt;
                                          &lt;span class=&quot;pr-1&quot;&gt;&lt;img src=&quot;&lt;?php echo get_theme_file_uri('/images/icons_sun_filled.png');?&gt;&quot; width=&quot;15&quot; height=&quot;15&quot; class=&quot;d-inline-block&quot;  alt=&quot;&quot;&gt;&lt;/span&gt;
                                          &lt;span class=&quot;pr-1&quot;&gt;&lt;img src=&quot;&lt;?php echo get_theme_file_uri('/images/icons_sun_unfilled.png');?&gt;&quot; width=&quot;15&quot; height=&quot;15&quot; class=&quot;d-inline-block&quot;  alt=&quot;&quot;&gt;&lt;/span&gt;
                                          &lt;p class=&quot;card-text text-left cardTextContent&quot;&gt;Lorem ipsum&lt;/p&gt;
                                          &lt;span class=&quot;pr-1&quot;&gt;&lt;img src=&quot;&lt;?php echo get_theme_file_uri('/images/Path_filled@2x.png');?&gt;&quot; width=&quot;15&quot; height=&quot;15&quot; class=&quot;d-inline-block&quot;  alt=&quot;&quot;&gt;&lt;/span&gt;
                                          &lt;span class=&quot;pr-1&quot;&gt;&lt;img src=&quot;&lt;?php echo get_theme_file_uri('/images/Path_filled@2x.png');?&gt;&quot; width=&quot;15&quot; height=&quot;15&quot; class=&quot;d-inline-block&quot;  alt=&quot;&quot;&gt;&lt;/span&gt;
                                          &lt;span class=&quot;pr-1&quot;&gt;&lt;img src=&quot;&lt;?php echo get_theme_file_uri('/images/Path_filled@2x.png');?&gt;&quot; width=&quot;15&quot; height=&quot;15&quot; class=&quot;d-inline-block&quot;  alt=&quot;&quot;&gt;&lt;/span&gt;
                                          &lt;span class=&quot;pr-1&quot;&gt;&lt;img src=&quot;&lt;?php echo get_theme_file_uri('/images/Path_unfilled@2x.png');?&gt;&quot; width=&quot;15&quot; height=&quot;15&quot; class=&quot;d-inline-block&quot;  alt=&quot;&quot;&gt;&lt;/span&gt;
                                          &lt;span class=&quot;pr-1&quot;&gt;&lt;img src=&quot;&lt;?php echo get_theme_file_uri('/images/Path_unfilled@2x.png');?&gt;&quot; width=&quot;15&quot; height=&quot;15&quot; class=&quot;d-inline-block&quot;  alt=&quot;&quot;&gt;&lt;/span&gt;
                                          &lt;p id=&quot;cardTextProductData&quot; class=&quot;pt-2&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;card-link&quot;&gt;ⓘ Lorem ipsum&lt;/a&gt;&lt;/p&gt;
                                          &lt;p class=&quot;card-text cardPriceTag text-right&quot;&gt;4,&lt;span style=&quot;font-size: 12px;&quot;&gt;98€/m²&lt;/span&gt;&lt;/p&gt;
                                          &lt;p class=&quot;cardTextBottom text-right pb-0&quot;&gt;inkl. 19% MwSt. zzgl Versand&lt;/p&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class=&quot;swiper-slide&quot;&gt;
                              &lt;div class=&quot;card&quot; style=&quot;width: 185px;&quot;&gt;
                                  &lt;div class=&quot;card-body p-0&quot;&gt;
                                      &lt;div class=&quot;CardWrapper&quot;&gt;
                                          &lt;img id=&quot;img-top-size&quot; class=&quot;card-img-top pb-3&quot; src=&quot;https://placeimg.com/160/160/any&quot; width=&quot;&quot; height=&quot;&quot; class=&quot;d-inline-block&quot;  alt=&quot;Card image cap&quot;&gt;
                                          &lt;h5 class=&quot;card-title cardTextHeading&quot;&gt;Lorem ipsum&lt;/h5&gt;
                                          &lt;h6 class=&quot;card-subtitle mb-4 text-muted cardTextSubheading&quot;&gt;Lorem ipsum&lt;/h6&gt;
                                          &lt;p class=&quot;card-text text-left cardTextContent&quot;&gt;Lorem ipsum&lt;/p&gt;
                                          &lt;span class=&quot;pr-1&quot;&gt;&lt;img src=&quot;&lt;?php echo get_theme_file_uri('/images/icons_sun_filled.png');?&gt;&quot; width=&quot;15&quot; height=&quot;15&quot; class=&quot;d-inline-block&quot;  alt=&quot;&quot;&gt;&lt;/span&gt;
                                          &lt;span class=&quot;pr-1&quot;&gt;&lt;img src=&quot;&lt;?php echo get_theme_file_uri('/images/icons_sun_filled.png');?&gt;&quot; width=&quot;15&quot; height=&quot;15&quot; class=&quot;d-inline-block&quot;  alt=&quot;&quot;&gt;&lt;/span&gt;
                                          &lt;span class=&quot;pr-1&quot;&gt;&lt;img src=&quot;&lt;?php echo get_theme_file_uri('/images/icons_sun_unfilled.png');?&gt;&quot; width=&quot;15&quot; height=&quot;15&quot; class=&quot;d-inline-block&quot;  alt=&quot;&quot;&gt;&lt;/span&gt;
                                          &lt;span class=&quot;pr-1&quot;&gt;&lt;img src=&quot;&lt;?php echo get_theme_file_uri('/images/icons_sun_unfilled.png');?&gt;&quot; width=&quot;15&quot; height=&quot;15&quot; class=&quot;d-inline-block&quot;  alt=&quot;&quot;&gt;&lt;/span&gt;
                                          &lt;span class=&quot;pr-1&quot;&gt;&lt;img src=&quot;&lt;?php echo get_theme_file_uri('/images/icons_sun_unfilled.png');?&gt;&quot; width=&quot;15&quot; height=&quot;15&quot; class=&quot;d-inline-block&quot;  alt=&quot;&quot;&gt;&lt;/span&gt;
                                          &lt;p class=&quot;card-text text-left cardTextContent&quot;&gt;Lorem ipsum&lt;/p&gt;
                                          &lt;span class=&quot;pr-1&quot;&gt;&lt;img src=&quot;&lt;?php echo get_theme_file_uri('/images/Path_filled@2x.png');?&gt;&quot; width=&quot;15&quot; height=&quot;15&quot; class=&quot;d-inline-block&quot;  alt=&quot;&quot;&gt;&lt;/span&gt;
                                          &lt;span class=&quot;pr-1&quot;&gt;&lt;img src=&quot;&lt;?php echo get_theme_file_uri('/images/Path_filled@2x.png');?&gt;&quot; width=&quot;15&quot; height=&quot;15&quot; class=&quot;d-inline-block&quot;  alt=&quot;&quot;&gt;&lt;/span&gt;
                                          &lt;span class=&quot;pr-1&quot;&gt;&lt;img src=&quot;&lt;?php echo get_theme_file_uri('/images/Path_filled@2x.png');?&gt;&quot; width=&quot;15&quot; height=&quot;15&quot; class=&quot;d-inline-block&quot;  alt=&quot;&quot;&gt;&lt;/span&gt;
                                          &lt;span class=&quot;pr-1&quot;&gt;&lt;img src=&quot;&lt;?php echo get_theme_file_uri('/images/Path_filled@2x.png');?&gt;&quot; width=&quot;15&quot; height=&quot;15&quot; class=&quot;d-inline-block&quot;  alt=&quot;&quot;&gt;&lt;/span&gt;
                                          &lt;span class=&quot;pr-1&quot;&gt;&lt;img src=&quot;&lt;?php echo get_theme_file_uri('/images/Path_unfilled@2x.png');?&gt;&quot; width=&quot;15&quot; height=&quot;15&quot; class=&quot;d-inline-block&quot;  alt=&quot;&quot;&gt;&lt;/span&gt;
                                          &lt;p id=&quot;cardTextProductData&quot; class=&quot;pt-2&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;card-link&quot;&gt;ⓘ Lorem ipsum&lt;/a&gt;&lt;/p&gt;
                                          &lt;p class=&quot;card-text cardPriceTag text-right&quot;&gt;6,&lt;span style=&quot;font-size: 12px;&quot;&gt;98€/m²&lt;/span&gt;&lt;/p&gt;
                                          &lt;p class=&quot;cardTextBottom text-right pb-0&quot;&gt;inkl. 19% MwSt. zzgl Versand&lt;/p&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class=&quot;swiper-slide&quot;&gt;
                              &lt;div class=&quot;card&quot; style=&quot;width: 185px;&quot;&gt;
                                  &lt;div class=&quot;card-body p-0&quot;&gt;
                                      &lt;div class=&quot;CardWrapper&quot;&gt;
                                          &lt;img id=&quot;img-top-size&quot; class=&quot;card-img-top pb-3&quot; src=https://placeimg.com/160/160/any&quot; width=&quot;&quot; height=&quot;&quot; class=&quot;d-inline-block&quot;  alt=&quot;Card image cap&quot;&gt;
                                          &lt;h5 class=&quot;card-title cardTextHeading&quot;&gt;Lorem ipsum&lt;/h5&gt;
                                          &lt;h6 class=&quot;card-subtitle mb-4 text-muted cardTextSubheading&quot;&gt;Lorem ipsum&lt;/h6&gt;
                                          &lt;p class=&quot;card-text text-left cardTextContent&quot;&gt;Lichtdurchlässigkeit&lt;/p&gt;
                                          &lt;span class=&quot;pr-1&quot;&gt;&lt;img src=&quot;&lt;?php echo get_theme_file_uri('/images/icons_sun_filled.png');?&gt;&quot; width=&quot;15&quot; height=&quot;15&quot; class=&quot;d-inline-block&quot;  alt=&quot;&quot;&gt;&lt;/span&gt;
                                          &lt;span class=&quot;pr-1&quot;&gt;&lt;img src=&quot;&lt;?php echo get_theme_file_uri('/images/icons_sun_filled.png');?&gt;&quot; width=&quot;15&quot; height=&quot;15&quot; class=&quot;d-inline-block&quot;  alt=&quot;&quot;&gt;&lt;/span&gt;
                                          &lt;span class=&quot;pr-1&quot;&gt;&lt;img src=&quot;&lt;?php echo get_theme_file_uri('/images/icons_sun_filled.png');?&gt;&quot; width=&quot;15&quot; height=&quot;15&quot; class=&quot;d-inline-block&quot;  alt=&quot;&quot;&gt;&lt;/span&gt;
                                          &lt;span class=&quot;pr-1&quot;&gt;&lt;img src=&quot;&lt;?php echo get_theme_file_uri('/images/icons_sun_unfilled.png');?&gt;&quot; width=&quot;15&quot; height=&quot;15&quot; class=&quot;d-inline-block&quot;  alt=&quot;&quot;&gt;&lt;/span&gt;
                                          &lt;span class=&quot;pr-1&quot;&gt;&lt;img src=&quot;&lt;?php echo get_theme_file_uri('/images/icons_sun_unfilled.png');?&gt;&quot; width=&quot;15&quot; height=&quot;15&quot; class=&quot;d-inline-block&quot;  alt=&quot;&quot;&gt;&lt;/span&gt;
                                          &lt;p class=&quot;card-text text-left cardTextContent&quot;&gt;Lorem ipsum&lt;/p&gt;
                                          &lt;span class=&quot;pr-1&quot;&gt;&lt;img src=&quot;&lt;?php echo get_theme_file_uri('/images/Path_filled@2x.png');?&gt;&quot; width=&quot;15&quot; height=&quot;15&quot; class=&quot;d-inline-block&quot;  alt=&quot;&quot;&gt;&lt;/span&gt;
                                          &lt;span class=&quot;pr-1&quot;&gt;&lt;img src=&quot;&lt;?php echo get_theme_file_uri('/images/Path_filled@2x.png');?&gt;&quot; width=&quot;15&quot; height=&quot;15&quot; class=&quot;d-inline-block&quot;  alt=&quot;&quot;&gt;&lt;/span&gt;
                                          &lt;span class=&quot;pr-1&quot;&gt;&lt;img src=&quot;&lt;?php echo get_theme_file_uri('/images/Path_filled@2x.png');?&gt;&quot; width=&quot;15&quot; height=&quot;15&quot; class=&quot;d-inline-block&quot;  alt=&quot;&quot;&gt;&lt;/span&gt;
                                          &lt;span class=&quot;pr-1&quot;&gt;&lt;img src=&quot;&lt;?php echo get_theme_file_uri('/images/Path_filled@2x.png');?&gt;&quot; width=&quot;15&quot; height=&quot;15&quot; class=&quot;d-inline-block&quot;  alt=&quot;&quot;&gt;&lt;/span&gt;
                                          &lt;span class=&quot;pr-1&quot;&gt;&lt;img src=&quot;&lt;?php echo get_theme_file_uri('/images/Path_unfilled@2x.png');?&gt;&quot; width=&quot;15&quot; height=&quot;15&quot; class=&quot;d-inline-block&quot;  alt=&quot;&quot;&gt;&lt;/span&gt;
                                          &lt;p id=&quot;cardTextProductData&quot; class=&quot;pt-2&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;card-link&quot;&gt;ⓘ Lorem ipsum&lt;/a&gt;&lt;/p&gt;
                                          &lt;p class=&quot;card-text cardPriceTag text-right&quot;&gt;5,&lt;span style=&quot;font-size: 12px;&quot;&gt;98€/m²&lt;/span&gt;&lt;/p&gt;
                                          &lt;p class=&quot;cardTextBottom text-right pb-0&quot;&gt;inkl. 19% MwSt. zzgl Versand&lt;/p&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class=&quot;swiper-slide&quot;&gt;
                              &lt;div class=&quot;card&quot; style=&quot;width: 185px;&quot;&gt;
                                  &lt;div class=&quot;card-body p-0&quot;&gt;
                                      &lt;div class=&quot;CardWrapper&quot;&gt;
                                          &lt;img id=&quot;img-top-size&quot; class=&quot;card-img-top pb-3&quot; src=&quot;https://placeimg.com/160/160/any&quot; width=&quot;&quot; height=&quot;&quot; class=&quot;d-inline-block&quot;  alt=&quot;Card image cap&quot;&gt;
                                          &lt;h5 class=&quot;card-title cardTextHeading&quot;&gt;Lorem ipsum&lt;/h5&gt;
                                          &lt;h6 class=&quot;card-subtitle mb-4 text-muted cardTextSubheading&quot;&gt;Lorem ipsum&lt;/h6&gt;
                                          &lt;p class=&quot;card-text text-left cardTextContent&quot;&gt;Lorem ipsum&lt;/p&gt;
                                          &lt;span class=&quot;pr-1&quot;&gt;&lt;img src=&quot;&lt;?php echo get_theme_file_uri('/images/icons_sun_filled.png');?&gt;&quot; width=&quot;15&quot; height=&quot;15&quot; class=&quot;d-inline-block&quot;  alt=&quot;&quot;&gt;&lt;/span&gt;
                                          &lt;span class=&quot;pr-1&quot;&gt;&lt;img src=&quot;&lt;?php echo get_theme_file_uri('/images/icons_sun_filled.png');?&gt;&quot; width=&quot;15&quot; height=&quot;15&quot; class=&quot;d-inline-block&quot;  alt=&quot;&quot;&gt;&lt;/span&gt;
                                          &lt;span class=&quot;pr-1&quot;&gt;&lt;img src=&quot;&lt;?php echo get_theme_file_uri('/images/icons_sun_filled.png');?&gt;&quot; width=&quot;15&quot; height=&quot;15&quot; class=&quot;d-inline-block&quot;  alt=&quot;&quot;&gt;&lt;/span&gt;
                                          &lt;span class=&quot;pr-1&quot;&gt;&lt;img src=&quot;&lt;?php echo get_theme_file_uri('/images/icons_sun_filled.png');?&gt;&quot; width=&quot;15&quot; height=&quot;15&quot; class=&quot;d-inline-block&quot;  alt=&quot;&quot;&gt;&lt;/span&gt;
                                          &lt;span class=&quot;pr-1&quot;&gt;&lt;img src=&quot;&lt;?php echo get_theme_file_uri('/images/icons_sun_unfilled.png');?&gt;&quot; width=&quot;15&quot; height=&quot;15&quot; class=&quot;d-inline-block&quot;  alt=&quot;&quot;&gt;&lt;/span&gt;
                                          &lt;p class=&quot;card-text text-left cardTextContent&quot;&gt;Lorem ipsum&lt;/p&gt;
                                          &lt;span class=&quot;pr-1&quot;&gt;&lt;img src=&quot;&lt;?php echo get_theme_file_uri('/images/Path_filled@2x.png');?&gt;&quot; width=&quot;15&quot; height=&quot;15&quot; class=&quot;d-inline-block&quot;  alt=&quot;&quot;&gt;&lt;/span&gt;
                                          &lt;span class=&quot;pr-1&quot;&gt;&lt;img src=&quot;&lt;?php echo get_theme_file_uri('/images/Path_filled@2x.png');?&gt;&quot; width=&quot;15&quot; height=&quot;15&quot; class=&quot;d-inline-block&quot;  alt=&quot;&quot;&gt;&lt;/span&gt;
                                          &lt;span class=&quot;pr-1&quot;&gt;&lt;img src=&quot;&lt;?php echo get_theme_file_uri('/images/Path_filled@2x.png');?&gt;&quot; width=&quot;15&quot; height=&quot;15&quot; class=&quot;d-inline-block&quot;  alt=&quot;&quot;&gt;&lt;/span&gt;
                                          &lt;span class=&quot;pr-1&quot;&gt;&lt;img src=&quot;&lt;?php echo get_theme_file_uri('/images/Path_unfilled@2x.png');?&gt;&quot; width=&quot;15&quot; height=&quot;15&quot; class=&quot;d-inline-block&quot;  alt=&quot;&quot;&gt;&lt;/span&gt;
                                          &lt;span class=&quot;pr-1&quot;&gt;&lt;img src=&quot;&lt;?php echo get_theme_file_uri('/images/Path_unfilled@2x.png');?&gt;&quot; width=&quot;15&quot; height=&quot;15&quot; class=&quot;d-inline-block&quot;  alt=&quot;&quot;&gt;&lt;/span&gt;
                                          &lt;p id=&quot;cardTextProductData&quot; class=&quot;pt-2&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;card-link&quot;&gt;ⓘ Lorem ipsum&lt;/a&gt;&lt;/p&gt;
                                          &lt;p class=&quot;card-text cardPriceTag text-right&quot;&gt;8,&lt;span style=&quot;font-size: 12px;&quot;&gt;98€/m²&lt;/span&gt;&lt;/p&gt;
                                          &lt;p class=&quot;cardTextBottom text-right pb-0&quot;&gt;inkl. 19% MwSt. zzgl Versand&lt;/p&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class=&quot;swiper-slide&quot;&gt;
                              &lt;div class=&quot;card&quot; style=&quot;width: 185px;&quot;&gt;
                                  &lt;div class=&quot;card-body p-0&quot;&gt;
                                      &lt;div class=&quot;CardWrapper&quot;&gt;
                                          &lt;img id=&quot;img-top-size&quot; class=&quot;card-img-top pb-3&quot; src=&quot;https://placeimg.com/160/160/any&quot; width=&quot;&quot; height=&quot;&quot; class=&quot;d-inline-block&quot; alt=&quot;Card image cap&quot;&gt;
                                          &lt;h5 class=&quot;card-title cardTextHeading&quot;&gt;Lorem ipsum&lt;/h5&gt;
                                          &lt;h6 class=&quot;card-subtitle mb-4 text-muted cardTextSubheading&quot;&gt;Lorem ipsum&lt;/h6&gt;
                                          &lt;p class=&quot;card-text text-left cardTextContent&quot;&gt;Lorem ipsum&lt;/p&gt;
                                          &lt;span class=&quot;pr-1&quot;&gt;&lt;img src=&quot;&lt;?php echo get_theme_file_uri('/images/icons_sun_filled.png');?&gt;&quot; width=&quot;15&quot; height=&quot;15&quot; class=&quot;d-inline-block&quot;  alt=&quot;&quot;&gt;&lt;/span&gt;
                                          &lt;span class=&quot;pr-1&quot;&gt;&lt;img src=&quot;&lt;?php echo get_theme_file_uri('/images/icons_sun_filled.png');?&gt;&quot; width=&quot;15&quot; height=&quot;15&quot; class=&quot;d-inline-block&quot;  alt=&quot;&quot;&gt;&lt;/span&gt;
                                          &lt;span class=&quot;pr-1&quot;&gt;&lt;img src=&quot;&lt;?php echo get_theme_file_uri('/images/icons_sun_filled.png');?&gt;&quot; width=&quot;15&quot; height=&quot;15&quot; class=&quot;d-inline-block&quot;  alt=&quot;&quot;&gt;&lt;/span&gt;
                                          &lt;span class=&quot;pr-1&quot;&gt;&lt;img src=&quot;&lt;?php echo get_theme_file_uri('/images/icons_sun_filled.png');?&gt;&quot; width=&quot;15&quot; height=&quot;15&quot; class=&quot;d-inline-block&quot;  alt=&quot;&quot;&gt;&lt;/span&gt;
                                          &lt;span class=&quot;pr-1&quot;&gt;&lt;img src=&quot;&lt;?php echo get_theme_file_uri('/images/icons_sun_unfilled.png');?&gt;&quot; width=&quot;15&quot; height=&quot;15&quot; class=&quot;d-inline-block&quot;  alt=&quot;&quot;&gt;&lt;/span&gt;
                                          &lt;p class=&quot;card-text text-left cardTextContent&quot;&gt;Lorem ipsum&lt;/p&gt;
                                          &lt;span class=&quot;pr-1&quot;&gt;&lt;img src=&quot;&lt;?php echo get_theme_file_uri('/images/Path_filled@2x.png');?&gt;&quot; width=&quot;15&quot; height=&quot;15&quot; class=&quot;d-inline-block&quot;  alt=&quot;&quot;&gt;&lt;/span&gt;
                                          &lt;span class=&quot;pr-1&quot;&gt;&lt;img src=&quot;&lt;?php echo get_theme_file_uri('/images/Path_filled@2x.png');?&gt;&quot; width=&quot;15&quot; height=&quot;15&quot; class=&quot;d-inline-block&quot;  alt=&quot;&quot;&gt;&lt;/span&gt;
                                          &lt;span class=&quot;pr-1&quot;&gt;&lt;img src=&quot;&lt;?php echo get_theme_file_uri('/images/Path_filled@2x.png');?&gt;&quot; width=&quot;15&quot; height=&quot;15&quot; class=&quot;d-inline-block&quot;  alt=&quot;&quot;&gt;&lt;/span&gt;
                                          &lt;span class=&quot;pr-1&quot;&gt;&lt;img src=&quot;&lt;?php echo get_theme_file_uri('/images/Path_unfilled@2x.png');?&gt;&quot; width=&quot;15&quot; height=&quot;15&quot; class=&quot;d-inline-block&quot;  alt=&quot;&quot;&gt;&lt;/span&gt;
                                          &lt;span class=&quot;pr-1&quot;&gt;&lt;img src=&quot;&lt;?php echo get_theme_file_uri('/images/Path_unfilled@2x.png');?&gt;&quot; width=&quot;15&quot; height=&quot;15&quot; class=&quot;d-inline-block&quot;  alt=&quot;&quot;&gt;&lt;/span&gt;
                                          &lt;p id=&quot;cardTextProductData&quot; class=&quot;pt-2&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;card-link&quot;&gt;ⓘ Lorem ipsum&lt;/a&gt;&lt;/p&gt;
                                          &lt;p class=&quot;card-text cardPriceTag text-right&quot;&gt;7,&lt;span style=&quot;font-size: 12px;&quot;&gt;98€/m²&lt;/span&gt;&lt;/p&gt;
                                          &lt;p class=&quot;cardTextBottom text-right pb-0&quot;&gt;inkl. 19% MwSt. zzgl Versand&lt;/p&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;  
                      &lt;/div&gt;
           &lt;div class=&quot;swiper-pagination&quot;&gt;&lt;/div&gt;
                  &lt;/div&gt;
       
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>