Carousel News IE + OPERA

index.cshtml

<section class="discus-parallax bg-white">
    @{
        int card62Col = 4;
        int card62TotalRow = 3;
        int card62CategoryOrderNumber = 16;

        if (Partial.isCategoryOrderNumber(card62CategoryOrderNumber))
        {
            IEnumerable<Post> card62Posts = Partial.PostsOrderNumber(card62CategoryOrderNumber, 0, card62Col * card62TotalRow, Partial.Order.ID, true, lang);
            Category category = Partial.Category(card62CategoryOrderNumber, lang);
            <div class="container bg-white mb-3 mt-4">
                <div class="big-title3 text-center mobile-hide ">
                    <h3 class="big_title3">@category.CategoryTitle</h3>
                </div>
                <div class="owl-carousel-haberler owl-theme owl-carousel-fix">
                    @foreach (Post comPost in card62Posts)
                    {
                        <div class="dc-tekno card card-personal">
                            <a href="@Partial.PostLink(comPost.PostID)">
                                <div class="dc-resimstandart2" style="background-image: url(@comPost.PostThumbnail);">
                                </div>
                                <div class="dc-tekno-box">
                                    <h5 class="dc-tekno-title">@comPost.PostTitle.HtmlEncode()</h5>
                                    <hr>
                                    <p class="">@Partial.PostShortContent(comPost.PostID, 120)</p>
                                </div>
                            </a>
                        </div>
                    }
                </div>
            </div>
        }
    }
</section>

Javascript

$('.owl-carousel-haberler').owlCarousel({
            margin: 10,
            loop: true,
            autoplay: true,
            autoplayTimeout: 2000,
            autoplayHoverPause: true,
            nav: false,
            //navText: [
            //    '<i class="fas fa-chevron-left"></i>',
            //    '<i class="fas fa-chevron-right"></i>'
            //],
            dots: true,
            responsive: {
                0: {
                    items: 1
                },
                600: {
                    items: 2
                },
                1000: {
                    items: 3
                }
            }
        });

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

h3.big_title3 {
    color: #626262;
    font-size: 2.5em;
    margin: 0 auto;
    position: relative;
}
.dc-tekno {
    margin: 10px;
    padding-bottom: 10px;
}
tekno-box {
    padding-left: 10px;
}
.card {
    height: 100%;
}
h5.dc-tekno-title {
    font-size: 15px;
    padding-top: 16px;
    font-weight: bold;
    height: 53px !important;
    overflow: hidden;
}

.dc-resimstandart2 {
    width: 100%;
    height: 220px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

    @media (max-width: 575.99px) {
        .news-images {
            height: 250px;
            min-height: 250px;
            max-height: 250px;
        }

        .dc-resimstandart2 {
            height: 250px !important;
        }
    }

.dc-tekno-box{
    padding-left:10px;
}

www.antalyateknokent.com.tr