猫头鹰轮播内 foreach 循环

时间:2021-02-22 21:36:29

标签: php laravel vue.js foreach owl-carousel

我使用的是 Laravel Vue JS。我在主页上动态显示部分,我想在每个部分内显示图像滑块

我对所有部分都有一个 foreach 循环,在该循环内我想显示另一个图像循环的滑块

例如:

<?php foreach() { ?>
<div class="owl-carousel 3-column-slider-carosal">

    <?php foreach() { ?>
    <div>
        <img src="image path">
    </div>
    <?php } ?>

</div>
<?php } ?>

下面是我的代码

<template v-for="(home, index) in homepageData">

        <template v-if="home.section_type === 1">
            
            <section class="py-40 my-40" :style="`background-color: ${home.color_code}`">

                <div class="row">
                    <div class="col-lg-6 col-md-6 offset-lg-3 offset-md-3">
                        <div class="final-heading">
                            <h1 class="text-center text-capitalize" >Title<span>Description</span></h1>
                        </div>
                    </div>
                </div>

                <div class="bg-sec-white">
                    <div class="container">
                        <div class="owl-carousel 3-column-slider-carosal">
                            <div class="trend-block">
                                <div class="trend-img overflow-hidden mb-2">
                                    <img src="{{ asset('1.jpg') }}" class="img-fluid w-100">
                                </div>
                            </div>

                            <div class="trend-block">
                                <div class="trend-img overflow-hidden mb-2">
                                    <img src="{{ asset('2.jpg') }}" class="img-fluid w-100">
                                </div>
                            </div>

                            <div class="trend-block">
                                <div class="trend-img overflow-hidden mb-2">
                                    <img src="{{ asset('3.jpg') }}" class="img-fluid w-100">
                                </div>
                            </div>

                            <div class="trend-block">
                                <div class="trend-img overflow-hidden mb-2">
                                    <img src="{{ asset('4.jpg') }}" class="img-fluid w-100">
                                </div>
                            </div>
                            
                            <div class="trend-block">
                                <div class="trend-img overflow-hidden mb-2">
                                    <img src="{{ asset('5.jpg') }}" class="img-fluid w-100">
                                </div>
                            </div>

                        </div>
                    </div>
                </div>

            </section>
            
        </template>

    </template>

0 个答案:

没有答案