Почему один слайд в нутри другого?

Question

[tosster22]

Сделал слайдер при помощи owl carrousel 2. Стал подключать к wordpress с использованием плагина acf. При добавлении нового слайда он попадает в старый. Использовал повторитель. Подскажите как исправить

<div class="owl-carousel slider">
		<div class="slider__content">
			<?php if( have_rows('content_for_slider') ): ?>
				<?php while( have_rows('content_for_slider') ): the_row(); ?> 
					<?php
					$image = get_sub_field('slide_pic');
					$content = get_sub_field('slide_text');
					$link = get_sub_field('slide_link');
					$form = get_sub_field('slide_form');
					?>
					<div class="slider__slide" style="background-image: url(<?php echo $image['url']; ?>" alt="<?php echo $image['alt'] ?>;">
						<div class="container">
							<div class="row align-items-center">
								<?php if( $link ): ?>
									<a href="<?php echo $link; ?>">
									<?php endif; ?>

									<?php if( $link ): ?>
									</a>
								<?php endif; ?>
								<div class="col-md-5 col-xs-12 col-sm-8">
									<div class="slider__idents ">
										<?php echo $content; ?>
									</div>	

								</div>
							<?php endwhile; ?>
						<?php endif; ?>
					</div>
				</div>
			</div>
		</div>
	</div>

Answer 1

[Eugene Chefranov]

Наверно так

<div class="owl-carousel slider">
  <div class="slider__content">
    <?php if( have_rows('content_for_slider') ): ?>
    <?php while( have_rows('content_for_slider') ): the_row(); ?>
    <?php
          $image = get_sub_field('slide_pic');
          $content = get_sub_field('slide_text');
          $link = get_sub_field('slide_link');
          $form = get_sub_field('slide_form');
          ?>
    <div
      class="slider__slide"
      style="background-image: url(<?php echo $image['url']; ?>)"
      alt="<?php echo $image['alt'] ?>"
    >
      <div class="container">
        <div class="row align-items-center">
          <?php if( $link ): ?>
          <a href="<?php echo $link; ?>">link</a>
          <?php endif; ?>
          <div class="col-md-5 col-xs-12 col-sm-8">
            <div class="slider__idents ">
              <?php echo $content; ?>
            </div>
          </div>
        </div>
      </div>
    </div>
    <?php endwhile; ?>
    <?php endif; ?>
  </div>
</div>

Comments

[tosster22]

так получается, что один слайд ниже другого и не скрывается те два слайда на одной странице

[Eugene Chefranov]

tosster22, надо видеть код как вы вызываете слайдер. Стили для слайдера подключили?

[tosster22]

$(function() {
  // Owl Carousel
  var owl = $(".owl-carousel");
  owl.owlCarousel({
    items: 1,
    loop: true,
    nav: false,
    pagination: true,
    dots: true,
    singleItem: true,
    autoplay: false,
     autoplayTimeout: 10000,
     smartSpeed: 500,
  });
});

[Орхан Гасанлы]

tosster22, а попробуйте

$(function() { заменить на jQuery(function() {
var owl = $(".owl-carousel"); заменить на var owl = jQuery(".owl-carousel");

Ошибка может быть и выше этого кода. Посмотрите в консоль браузера на наличие js ошибок.
Подключили ли вы css стили для карусели через functions?