ACFギャラリーでSwiper表示させたい

前提・実現したいこと

wordpressのプラグインACFPROのギャラリーフィールド
フィールド名　gallery　を
jsのswiperスライダーで表示させたい
ACF、phpともに初心者なので基本を何か間違っているのかもしれませんので
ヒントでも何でもいいのでご教授お願いします・・・。

JavaScript、css部分のコードも記載しました。

発生している問題・エラーメッセージ

一つ目のスライダーに全ての画像が表示されてしまう
2個目以降のスライダーは空表示になってしまいます。

該当のソースコード

phpとhtml
1
2//swiperのコンテナ
3<div class="swiper-container">
4<div class="swiper-wrapper">
5
6<?php // ACF Gallery Field の表示
7$images = get_field('gallery'); // フィールド名の指定
8if( $images ):
9?>
10<?php foreach( $images as $image ): // ループ処理の開始 ?>
11<div class="swiper-slide" style="background-image: url('<?php echo $image['url']; ?>');"></div>//バックグラウンドイメージにurlで画像を指定。
12<?php endforeach; ?>
13<?php endif; ?>
14</div>
15</div>

footerのjs記述部分
1
2<script src="<?php print get_template_directory_uri(); ?>/js/swiper.js"></script>
3  <script>
4    var swiper = new Swiper('.swiper-container');
5  </script>
6

CSS
1
2.swiper-container {
3    width: 100%;
4    height: 200px;
5}
6.swiper-slide {
7    background-size: contain;
8    background-repeat: no-repeat;
9    background-position: center;
10 
11}
12