Section Carousel Before After +++

index.cshtml

<section class="bg-dark p-5">
    <div class="container">
        <div class="row" style="border: 1px solid #fff;">
            <div class="col-lg-6 col-md-6 col-sm-6 mb-2">
                    <div class="beforeafter">
                        <h2>Uygulama Öncesi</h2>
                    </div>
                    <div class="owl-carousel-beforeafter owl-carousel-fix bg-beforeafter m-3">
                        @foreach (Post comPost in Partial.PostsOrderNumber(3, 0, 3, Partial.Order.OrderBy, true, lang))
                        {
                            <div class="text-center">
                                <a href="@Partial.PostLink(comPost.PostID)">
                                    <div class="disucs-imageframe">
                                        <img src="@comPost.PostThumbnail" />
                                    </div>
                                </a>
                            </div>
                        }
                    </div>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-6 mb-2">
                    <div class="beforeafter">
                        <h2>Uygulama Sonrası</h2>
                    </div>
                    <div class="owl-carousel-beforeafter owl-carousel-fix bg-beforeafter m-3">
                        @foreach (Post comPost in Partial.PostsOrderNumber(3, 0, 3, Partial.Order.OrderBy, true, lang))
                        {
                            <div class="text-center">
                                <a href="@Partial.PostLink(comPost.PostID)">
                                    <div class="disucs-imageframe">
                                        <img src="@comPost.PostThumbnail" />
                                    </div>
                                </a>
                            </div>
                        }
                    </div>
            </div>
        </div>
    </div>
</section>

Javascript

$('.owl-carousel-beforeafter').owlCarousel({
            margin: 10,
            loop: true,
            autoplay: true,
            autoplayTimeout: 3000,
            autoplayHoverPause: false,
            nav: true,
            navText: [
                '<a class="carousel-control left beforeafterprev" href="#aktuel" data-slide="prev">‹</a>',
                '<a class="carousel-control right beforeafternext" href="#aktuel" data-slide="next">›</a>'
            ],
            dots: false,
            responsive: {
                0: {
                    items: 1
                },
                600: {
                    items: 1
                },
                1000: {
                    items: 1
                }
            }
        });

STANDART JAVASCRİPT ( Aşağıdaki kod ekli ise tekrar eklemeye gerek yok)

<script>hljs.initHighlightingOnLoad();</script>
<script type="text/javascript">
    $(document).ready(function () {
        $('.counter').each(function () {
            $(this).prop('Counter', 0).animate({
                Counter: $(this).text()
            }, {
                    duration: 4000,
                    easing: 'swing',
                    step: function (now) {
                        $(this).text(Math.ceil(now));
                    }
                });
        });

// Carouselin JAVASCRİPTi BURAYA EKLENECEK

    });
</script>

CSS

.beforeafter{
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        color: #fff;
        font-weight:600;
    }
        .beforeafter h2{
            color: #fff;
        }
        .bg-beforeafter {
            background-color: #fff;
            padding: 5px;
            border-radius: 3px;
        }

    .beforeafternext {
        right: -6px !important;
        position: absolute;
        background-color: #fff !important;
        padding: 5px !important;
    }

    .beforeafterprev {
        left: -15px !important;
        position: absolute;
        background-color: #fff !important;
        padding: 5px !important;
    }

http://www.dentgaraj.com.tr/tr/m/uygulamalarimiz/seat-sag-camurluk-boyasiz-onarim-calismasi.html