mardi 8 octobre 2019

how i can show my database images in owl carousal slider in laravel 5.8?

I want to show product multiple images in slide . i use owl slider . how i show product images in slider . i get images from database . i have to database one have product images and other haave product detail . i want to get multiple images from database with product id and want to show in slider.

this is my code

<script type="text/javascript">
        $(document).ready(function() {
            @foreach($products as $product )
            var product = ;
            $("#owl-demo",).owlCarousel(
        {   loop:true,
            autoPlay: 3000, //Set AutoPlay to 3 seconds
            items : 4,
            itemsDesktop : [1199,3],
            itemsDesktopSmall : [979,3]
            });
            @endforeach
        });
    </script>

this is my view code

@extends('productsview.main')
@section('content')
@foreach($products as $product )
    <!-- Block2 -->
    <div class="col-sm-6 col-md-4 col-lg-3 p-b-50">
        <div class="block2">
            <div class="block2-img wrap-pic-w of-hidden pos-relative" id="owl-demo-">
                @if(!$product->images->isEmpty())
                    @foreach($product->images as $image)
                    <div class="item"><img src="" alt=""></div>
                    @endforeach
                @endif

                <!-- <div class="block2-overlay trans-0-4">
                    <a href="#" class="block2-btn-addwishlist hov-pointer trans-0-4">
                        <i class="icon-wishlist icon_heart_alt" aria-hidden="true"></i>
                        <i class="icon-wishlist icon_heart dis-none" aria-hidden="true"></i>
                    </a> -->
                    <!-- <div class="block2-btn-addcart w-size1 trans-0-4"> -->
                        <!-- Button -->

                    <!-- </div> -->
                <!-- </div> -->
            </div>
            <div class="block2-txt p-t-20">
                <button onclick="addToCart()" type="submit" class="flex-c-m size1 bg4 bo-rad-23 hov1 s-text1 trans-0-4" >
                    Add to Cart
                </button>
                <p>
                    
                </p>
                <span class="block2-price m-text6 p-r-5">
                
                </span>
            </div>
        </div>
    </div >

@endforeach
@endsection


via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire