<style>
    .MultiCarousel {
        float: left;
        overflow: hidden;
        padding: 15px;
        width: 100%;
        position: relative;
        background-color: #DCDEE0;
    }

    .MultiCarousel .MultiCarousel-inner {
        transition: 1s ease all;
        float: left;
    }

    .MultiCarousel .MultiCarousel-inner .item {
        float: left;
    }

    .MultiCarousel .MultiCarousel-inner .item>div {
        text-align: left;
        padding: 10px;
        margin: 10px;
        color: #ffff;
    }

    .MultiCarousel .leftLst,
    .MultiCarousel .rightLst {
        position: absolute;
        border-radius: 50%;
        top: calc(50% - 20px);
    }

    .MultiCarousel .leftLst {
        left: 0;
    }

    .MultiCarousel .rightLst {
        right: 0;
    }

    .MultiCarousel .leftLst.over,
    .MultiCarousel .rightLst.over {
        pointer-events: none;
        background: #ccc;
    }

    #progress-bar {
        width: 100%;
    }
</style>
<div id="testimonial">
    <h2 style="color:<?= $this->session->userdata('p_color'); ?>; text-align: center; font-size: 1.5rem;"><img title="laciasmara logo title" alt="laciasmara logo title" style="width:18px;" src="<?= base_url("themes/3/images/title-background.png"); ?>"> &nbsp;&nbsp;Testimonial&nbsp;&nbsp; <img title="laciasmara logo title" alt="laciasmara logo title" style="width:18px;" src="<?= base_url("themes/3/images/title-background.png"); ?>"></h2>
    <div class="testimonial" style="margin-right: 30px; margin-left: 30px;">
        <div class="row">
            <div class="MultiCarousel" data-items="1,2,2,3" data-slide="1" id="MultiCarousel" data-interval="1000">
                <div class="MultiCarousel-inner">
                    <?php foreach ($igpost_slideshow as $testimony) : ?>
                        <div class="item">
                            <div class="pad15">
                                <?= ($testimony->embed_code); ?>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>

                <button class="btn btn-info leftLst">
                    < </button>
                        <button class="btn btn-info rightLst">></button>
            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function() {
        var itemsMainDiv = ('.MultiCarousel');
        var itemsDiv = ('.MultiCarousel-inner');
        var itemWidth = "";
        var timeElapsed = 0;
        var slideInterval = 15000;


        $('.leftLst, .rightLst').click(function() {
            var condition = $(this).hasClass("leftLst");
            if (condition)
                click(0, this);
            else
                click(1, this)
        });

        ResCarouselSize();

        var progressBar = document.getElementById('progress-bar');

        setInterval(function() {
            var $rightBtn = $('.rightLst');
            if ($rightBtn.is(":visible") && $rightBtn.hasClass("over")) {
                click(0, $('.leftLst'));
            } else {
                click(1, $rightBtn);
            }
            updateProgressBar(0, 15000);
        }, 15000);

        function updateProgressBar(currentValue, intervalTime) {
            var increment = 100 / (intervalTime / 1000);
            var progress = currentValue + increment;
            progressBar.value = progress;
            if (progress < 100) {
                setTimeout(function() {
                    updateProgressBar(progress, intervalTime);
                }, 1000);
            } else {
                progressBar.value = 0;
            }
        }


        $(window).resize(function() {
            ResCarouselSize();
        });

        //this function define the size of the items
        function ResCarouselSize() {
            var incno = 0;
            var dataItems = ("data-items");
            var itemClass = ('.item');
            var id = 0;
            var btnParentSb = '';
            var itemsSplit = '';
            var sampwidth = $(itemsMainDiv).width();
            var bodyWidth = $('body').width();
            $(itemsDiv).each(function() {
                id = id + 1;
                var itemNumbers = $(this).find(itemClass).length;
                btnParentSb = $(this).parent().attr(dataItems);
                itemsSplit = btnParentSb.split(',');
                $(this).parent().attr("id", "MultiCarousel" + id);


                if (bodyWidth >= 1200) {
                    incno = itemsSplit[3];
                    itemWidth = sampwidth / incno;
                } else if (bodyWidth >= 992) {
                    incno = itemsSplit[2];
                    itemWidth = sampwidth / incno;
                } else if (bodyWidth >= 768) {
                    incno = itemsSplit[1];
                    itemWidth = sampwidth / incno;
                } else {
                    incno = itemsSplit[0];
                    itemWidth = sampwidth / incno;
                }
                $(this).css({
                    'transform': 'translateX(0px)',
                    'width': itemWidth * itemNumbers
                });
                $(this).find(itemClass).each(function() {
                    $(this).outerWidth(itemWidth);
                });

                $(".leftLst").addClass("over");
                $(".rightLst").removeClass("over");

            });
        }


        //this function used to move the items
        function ResCarousel(e, el, s) {
            var leftBtn = ('.leftLst');
            var rightBtn = ('.rightLst');
            var translateXval = '';
            var divStyle = $(el + ' ' + itemsDiv).css('transform');
            var values = divStyle.match(/-?[\d\.]+/g);
            var xds = Math.abs(values[4]);
            if (e == 0) {
                translateXval = parseInt(xds) - parseInt(itemWidth * s);
                $(el + ' ' + rightBtn).removeClass("over");

                if (translateXval <= itemWidth / 2) {
                    translateXval = 0;
                    $(el + ' ' + leftBtn).addClass("over");
                }
            } else if (e == 1) {
                var itemsCondition = $(el).find(itemsDiv).width() - $(el).width();
                translateXval = parseInt(xds) + parseInt(itemWidth * s);
                $(el + ' ' + leftBtn).removeClass("over");

                if (translateXval >= itemsCondition - itemWidth / 2) {
                    translateXval = itemsCondition;
                    $(el + ' ' + rightBtn).addClass("over");
                }
            }
            $(el + ' ' + itemsDiv).css('transform', 'translateX(' + -translateXval + 'px)');
        }

        //It is used to get some elements from btn
        function click(ell, ee) {
            var Parent = "#" + $(ee).parent().attr("id");
            var slide = $(Parent).attr("data-slide");
            ResCarousel(ell, Parent, slide);
        }

    });
</script>