web-dev-qa-db-ja.com

フクロウカルーセル-アイテムが互いの上に積み重なっています

画像を8つのグループにグループ化し、各グループをOwl Carouselの個別のスライドとして使用しようとしています。ただし、通常のように水平方向に積み重ねるのではなく、グループ化は垂直方向に積み重ねるだけです。

私のフクロウの設定：

//Gallery carousel
gallery();
function gallery(){
  $('.gallery').owlCarousel({
    margin: 10,
    nav: true,
    items: 1,
  });
}

HTMLを生成するPHP（WordPressのACFギャラリープラグインを使用）

<!-- Gallery Thumbs -->
<?php 
$images = get_field('gallery');

if( $images ): ?>
    <div class="gallery">
        <div class="gallery-group"><!-- Group the images in pairs of 8 -->
            <?php $i = 0; ?>

            <?php foreach( $images as $image ): ?>

                <?php $caption = $image['caption']; ?>
                    <a data-fancybox="gallery" href="<?php echo $image['url']; ?>">
                        <img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" />
                    </a>

                <?php if ($caption): ?>
                    <p><?php echo $caption; ?></p>
                <?php endif; ?>

                <?php $i++; ?>

                <?php if ($i % 8 == 0): ?>
                    </div>
                    <div class="gallery-group">
                <?php endif; ?>

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

カルーセルに適用される次のCSSを取得しました。

.hentry{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.gallery{
  width: 1000px;
}</ code>
owl.carousel.min.cssおよびowl.theme.default.min.css、およびjQueryの最新バージョンを実行しています。コンソールにエラーはありません。
これに何か関係があるかどうかはわかりませんが、注意すべきことの1つは、背景色を引き伸ばすためにヘッダーやフッターなどの要素に負のマージンを使用することです。おそらくこれが物事に影響しているのでしょうか？
jqueryhtmlcssowl-carousel
 17 
Jordan Carter
次のSCSSを使用して、これに対する解決策を見つけました。
.gallery{
        max-width: 1000px;
        width: 100%;
        overflow-x: hidden;
        
        .owl-stage{
                display: flex;
        }
}
それを追加する必要があるのは奇妙に感じるだけです。プラグインはこれを単独で処理できると思います。すべての画像が不適切な方法で読み込まれ、適切な方法に移行するため、面倒な解決策でもあるため、カルーセルの初期化イベントにフックしてフェードインする必要があります。 、だれかがより良い解決策を知っているなら、私に知らせてください。
 15 
Jordan Carter
問題は、何らかの理由で、owlがその「owl-carousel」クラスをメイン要素に追加していないため、スタイルが機能しないことです。手動で追加してください。
$('.gallery').addClass('owl-carousel').owlCarousel({
        margin: 10,
        nav: true,
        items: 1,
});

 9 
Hlsg
他の応答は私にはうまくいきませんでした。
ただし、次の修正で動作するようになりました。
CSSファイル
.owl-stage{
        display: flex;
}

次に、CSSクラスowl-carouselをメインdivに追加します
<div class="gallery owl-carousel">

 1 
TroySteven