How to put Swiper on ACF?

Question

WordPress

here on habré there were similar topics like I did everything as it is written, but in the end nothing works ((I'm trying to put swiper on wordpress through ACF, something went wrong

<section id="our-products" class="mainSlider">
      <div class="slider-title">Наши изделия</div>

      
      <?php if ( have_rows('slider_card') ): ?>
      <div class="swiper-container mySwiper" >
        <div class="swiper-wrapper">
          <?php while( have_rows('slider_card') ) : the_row();
          			$sliderBackground = get_sub_field('image_product');
          			$sliderTitle = get_sub_field('product_name');
          			$sliderDescription = get_sub_field('description_product'); ?>
              <div class="products-slide swiper-slide">						
                <div class="wrapper__slide_image">
                  <img class="product__image" src="<?php echo $sliderBackground ?>" alt="product">
                </div>
                <div class="slide__description_products">
                  <div class="description__title"><?php echo $sliderTitle ?></div>
                  <div class="property__product"><?php echo $sliderDescription ?></div>
                </div>						
              </div>
          <?php endwhile; ?>
        </div>
        <div class="swiper_button_wrap">
          <div class="jr_swiper-button-prev button_pointer">
            <svg class="btn-prew btn-style" width="58" height="12" viewBox="0 0 58 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M0.469669 5.46967C0.176777 5.76256 0.176777 6.23744 0.469669 6.53033L5.24264 11.3033C5.53553 11.5962 6.01041 11.5962 6.3033 11.3033C6.5962 11.0104 6.5962 10.5355 6.3033 10.2426L2.06066 6L6.3033 1.75736C6.5962 1.46447 6.5962 0.989593 6.3033 0.696699C6.01041 0.403806 5.53553 0.403806 5.24264 0.696699L0.469669 5.46967ZM58 5.25L1 5.25V6.75L58 6.75V5.25Z" fill="white" />
            </svg>
          </div>
          <div class="jr_swiper-button-next button_pointer">
            <svg class="btn-next btn-style" width="58" height="12" viewBox="0 0 58 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M57.5303 6.53033C57.8232 6.23743 57.8232 5.76256 57.5303 5.46966L52.7574 0.696695C52.4645 0.403801 51.9896 0.403801 51.6967 0.696695C51.4038 0.989588 51.4038 1.46446 51.6967 1.75735L55.9393 6L51.6967 10.2426C51.4038 10.5355 51.4038 11.0104 51.6967 11.3033C51.9896 11.5962 52.4645 11.5962 52.7574 11.3033L57.5303 6.53033ZM6.55671e-08 6.75L57 6.75L57 5.25L-6.55671e-08 5.25L6.55671e-08 6.75Z" fill="white" />
            </svg>
          </div>
         </div>
      </div>
      <?php endif; ?>

    </section>

Answer 1

It is difficult to say what the problem is without seeing either the site itself or the error.
You need to debug and see what might be wrong.
- make sure that the name of the custom field repeater is correct: slider_card
- make sure that the name of the custom fields is correct: image_product и др
- pay attention to where exactly you created the custom fields and how you display it. If this is ACF Option, then the second argument must be specified 'option', if you created a custom field for a specific page (for example, for the main one), and display this block on another page, then you need to pass the main ID as the second argument.
- in the fields in which you display pictures, pay attention to the type of the returned value. Maybe you are not returning
- try to remove the swiper and without it just output the ACF block. Most likely the problem will persist, and if not, then the problem is already on the swiper side.
- it may also be that the styles are being overwritten somewhere and the block is not visible or something else...

Answer 2

what does it write to the console? throw off the screen of the console pliz -
we do it on swiper, too, through acf there are no problems,
I can throw off my layout example

Answer 3

Throw off your decision if you can at least check to see