Image Carousel in bootstrap 4

 Code:

<!-- carousel -->

<!-- Product Images -->

 

<link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="Stylesheet"

        type="text/css" />

 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

 <script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<!-- carosel cdn css -->

<link rel='stylesheet' href='https://sachinchoolur.github.io/lightslider/dist/css/lightslider.css'>

<style type="text/css">

.card {

    background-color: #fff;

    padding: 14px;

    border: none

}

.demo {

    width: 50%

}

.ProductImage {

    display: block;

    height: auto;

    width: 100%;

}

.card-body {

    padding: 0.3rem 0.3rem 0.2rem;

}

</style>

<div class="col-lg-12 text-center">

    <div class="card mx-auto">

                <div class="demo">

                    <ul id="lightSlider">

                       @foreach ($attachments as $index => $attachment)

                        <li data-thumb="{{asset('employee_record/documents/thumbnails/'.$attachment->Attachment)}}">

                         <img class="ProductImage img-fluid" style="max-width: 100%; height: auto;" src="{{asset('employee_record/documents/thumbnails/'.$attachment->Attachment)}}" /> </li>

                        @endforeach

                        

                       

                    </ul>

                </div>

</div>

</div>

<!-- Produbt images carousal script -->

    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>

    <script src='https://sachinchoolur.github.io/lightslider/dist/js/lightslider.js'></script>

    <script>

        $('#lightSlider').lightSlider({

            gallery: true,

            item: 1,

            loop: true,

            slideMargin: 0,

            thumbItem: 9

        });

    </script> 

 

                                

<!-- End product images -->

<!-- end caroset -->