Section Carousel Box Heading Border Color +++

index.cshtml

<section id="kaynaklar" class=" bg-gray">
    @{
        int card119Col = 6;
        int card119CategoryOrderNumber = 345;
        int card119sayi = 1;

        if (Partial.isCategoryOrderNumber(card119CategoryOrderNumber))
        {
            IEnumerable<Post> card119Posts = Partial.PostsOrderNumber(card119CategoryOrderNumber, 0, card119Col, Partial.Order.OrderBy, true, lang);
            Category category119title = Partial.Category(card119CategoryOrderNumber, lang);
            int card119Count = Convert.ToInt32(Math.Ceiling(card119Posts.Count() / Convert.ToDouble(card119Col)));
            <div class="container">
                <h2 class="title title-border mt0">@category119title.CategoryTitle.HtmlEncode()</h2>
                <p class="title-after">@category119title.CategoryContent.HtmlEncode()</p>
                <div class="row kaynaklarOwl owl-carousel owl-theme owl-loaded">
                    @for (int componen = 0; componen < card119Count; componen++)
                    {
                        <div class="owl-stage2-outer">

                            <div class="owl-stage2">
                                @foreach (Post comPost in card119Posts.Skip(0).Take(card119Col))
                                {
                                    string boxrenk = "green";
                                    if (card119sayi % 3 == 0)
                                    {
                                        boxrenk = "purple";
                                    }
                                    else if (card119sayi % 2 == 0)
                                    {
                                        boxrenk = "red";
                                    }
                                    else
                                    {
                                        boxrenk = "green";
                                    }
                                    <div class="owl-stage2-outer">
                                        <div class="kaynaklar-item">
                                            <a href="@Partial.PostLink(comPost.PostID)" style="height: 284px;">
                                                <h3 class="title title-color-box title-color-box-@boxrenk">
                                                    @comPost.PostTitle.HtmlEncode()
                                                </h3>
                                                <p>@Partial.PostShortContent(comPost.PostID, 190)</p>
                                            </a>
                                        </div>
                                    </div>
                                    card119sayi++;
                                }
                            </div>
                        </div>
                    }
                </div>
                <!--/.row -->
            </div>
        }
    }
    <!--/.container -->
</section>

Javascript

        $('.owl-stage2').owlCarousel({
            margin: 10,
            loop: true,
            autoplay: true,
            autoplayTimeout: 2000,
            autoplayHoverPause: true,
            nav: false,
            navText: [
                '<div class="owl-prev" style="">prev</div>',
                '<div class="owl-next" style="">next</div>'
            ],
            dots: false,
            responsive: {
                0: {
                    items: 1
                },
                600: {
                    items: 3
                },
                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

.kaynaklar-item {
        padding-right: 15px;
        padding-left: 15px;
    }

        .kaynaklar-item > a {
            background-color: #fff;
            color: #686e77;
            display: block;
            padding: 30px;
        }

            .kaynaklar-item > a:hover {
                box-shadow: 0 0 15px #ccc;
            }

    .title.title-color-box::before {
        content: "";
        display: block;
        height: 7px;
        margin: 0 0 15px;
        width: 75px;
    }

    .title-color-box-purple::before {
        background-color: #9579dc;
    }

    .title-color-box-green::before {
        background-color: #8cc151;
    }

    .title-color-box-red::before {
        background-color: #db4554;
    }

https://www.tudem.com/