Primary slider not working in foreach

[ahmadhuss]

Primary slider not working in foreach

[ahmadhuss]

Hi, @madmouse17

How do I repeat the primary slider in the CSS in one line?
It seems like you're using foreach loop and want to dynamically add background images. You can do this in one line but every slide in the primary slider also contains some titles and links. However, If you want to dynamically add background images without slide content you can do something like this. I am assuming your banner objects are in the array.

class Banner {
            public $image = '';
            public function __construct($image = '') {
                $this->image = $image;
            }
         }

        $banners = [
            new Banner('slide-7.jpg'),
            new Banner('slide-8.jpg'),
            new Banner('slide-9.jpg')
         ];

        <!--====== Primary Slider ======-->
        <div class="s-skeleton s-skeleton--h-640 s-skeleton--bg-grey">
            <div class="owl-carousel primary-style-3" id="hero-slider">
                @foreach($banners as $banner)
                    <div class="hero-slide" style="background-image:url({{ asset("images/slider/$banner->image") }})"></div>
                @endforeach
                </div>
            </div>
        </div>
        <!--====== End - Primary Slider ======-->

But if you want to render the content of the slide too, you can manipulate the array and make a nested array structure that contains the content of the slide and render the HTML markup according to the array structure. Your array structure should be something like this.

$banners = [
 0 => [
'image' => $BannerImageInstance1,
 'content' => [
   'title' => 'Update Your Fashion',
   'subtitle '=> '10% Discount on Outwear',
   'subtitle2' => 'Find outwear on best prices',
   'text' => 'Starting At'
   'priceText' => '$100.00',
   'linkText'  => 'SHOP NOW'
],

 1 => [
'image' => $BannerImageInstance2,
 'content' => [
   'title' => 'Update Your Fashion',
   'subtitle '=> '10% Discount on Outwear',
   'subtitle2' => 'Find outwear on best prices',
   'text' => 'Starting At'
   'priceText' => '$100.00',
   'linkText'  => 'SHOP NOW'
],

 2 => [
'image' => $BannerImageInstance3,
 'content' => [
   'title' => 'Update Your Fashion',
   'subtitle '=> '10% Discount on Outwear',
   'subtitle2' => 'Find outwear on best prices',
   'text' => 'Starting At'
   'priceText' => '$100.00',
   'linkText'  => 'SHOP NOW'
]

]

I hope it is clear now.

[madmouse17]

still not responsive, there is a blank page under the banner

bandicam.2021-04-24.19-30-03-174.mp4

[madmouse17]

bandicam.2021-04-24.19-25-06-744.mp4

<div class="s-skeleton s-skeleton--h-640 s-skeleton--bg-grey">
    <div class="owl-carousel primary-style-3" id="hero-slider">
        @foreach ($baner as $banner)
        <div class="hero-slide" style="background-image:url({{ asset('baner/thumbnail/'.$banner->image) }})">
        </div>
        <div></div>
        @endforeach
    </div>
</div>

banner becomes responsive after adding a div below the banner slide but the next banner is blank