How can I display mutiple slides using glide js in a for each loop?

Question

I am trying to create a slideshow of the data that is pulled from a wordpress site using glide js and a for each loop.

This is what I tried:

<main id="primary" class="site-main">
<div class="home-card-wrapper glide">
    <div class="glide__track" data-glide-el="track">
        <div class="glide__slides">
            <?php foreach($home_slider as $slide) : ?>
<div class="glide__slide">
    <div class="home-card">
        <div class="home-card-header" style="background-image: url('<?php echo get_the_post_thumbnail_url($slide->page_link) ?>');">
            <p><?php echo $slide->heading; ?></p>
        </div>
        <div class="home-card-content">
            <p><?php echo $slide->subheading?></p>
            <p><?php echo $slide->description?></p>
            <div class="lpd-button">
                <img src="/wp-content/uploads/2023/01/Blk-with-white-arrow_34.5px-min.svg" alt="LPD Arrow">
                <a href="<?php echo get_permalink($slide->page_link) ?>">Learn More</a>
            </div>
        </div>
    </div>
</div>
            <?php endforeach; ?>
        </div>
    </div>
    <div class="glide__arrows" data-glide-el="controls">
        <button class="glide__arrow glide__arrow--left" data-glide-dir="<">previous</button>
        <button class="glide__arrow glide__arrow--right" data-glide-dir=">">next</button>
    </div>
    </div>
</div>
<!-- Required Core Stylesheet -->
<link rel="stylesheet" href="node_modules/@glidejs/glide/dist/css/glide.core.min.css">

<!-- Optional Theme Stylesheet -->
<link rel="stylesheet" href="node_modules/@glidejs/glide/dist/css/glide.theme.min.css">
 <script src="https://cdn.jsdelivr.net/npm/@glidejs/glide">
</script>
    <script>
        new Glide('.glide', {}).mount()
    </script>
</main>

And I am getting both "home cards" on one slide. I want them to be separated onto different slides.

Any help?

How can I display mutiple slides using glide js in a for each loop?

0 Answers0