Section Col 8 Carousel Post and Col 4 Category +++

Index.cshtml - Özel Alan "Color"

<section class="bg-white discus-parallax">
    <div class="container" style="margin-top:15px;">
        @{
            int card111Col = 6;
            int card111CategoryOrderNumber = 345;

            if (Partial.isCategoryOrderNumber(card111CategoryOrderNumber))
            {
                IEnumerable<Post> card111Posts = Partial.PostsOrderNumber(card111CategoryOrderNumber, 0, card111Col, Partial.Order.ID, true, lang);
                Category category111title = Partial.Category(card111CategoryOrderNumber, lang);
                int card111Count = Convert.ToInt32(Math.Ceiling(card111Posts.Count() / Convert.ToDouble(card111Col)));
                <div class="row">
                    <div class="col-md-8">
                        @for (int componen = 0; componen < card111Count; componen++)
                        {
                            <div class="owl-carousel-referance owl-carousel-fix">
                                @foreach (Post comPost in card111Posts.Skip(componen * card111Col).Take(card111Col))
                                {
                                    <div class="container imobile2" style="background-color:@(Partial.PostMeta(comPost.PostID, "Color"));color:white;padding-top:20px;">
                                        <div class="row">
                                            <div class="col-md-4">
                                                <div class="img-index-center">
                                                    <img src="@comPost.PostThumbnail" />
                                                </div>
                                            </div>
                                            <div class="col-md-8">
                                                <h3 style="min-height:75px; font-size: 1.5rem; color:#fff;">@comPost.PostTitle.HtmlEncode()</h3>
                                                <p>@Partial.PostShortContent(comPost.PostID, 105)</p>
                                                <p><a href="@Partial.PostLink(comPost.PostID)" style="color:white; font-style: italic;" class="calendar-white">@Partial.Translate("Devami", lang)</a></p>
                                            </div>
                                        </div>
                                    </div>
                                }
                            </div>
                        }
                    </div>
                    <div class="col-md-4 white-link">
                        <div class="imobile2" style="background-color: #ec9706;color: white;margin: 0px;padding: 8px;">
                            <h3><a href="@Partial.CategoryLink(card111CategoryOrderNumber)" style="font-size:20px; font-size: 1.5rem;">@category111title.CategoryTitle.HtmlEncode()</a></h3>

                            <p> </p>

                            <p><a href="@Partial.CategoryLink(card111CategoryOrderNumber)">@category111title.CategoryContent.HtmlEncode()</a></p>

                            <p> </p>

                            <p> </p>
                            <p> <a href="@Partial.CategoryLink(card111CategoryOrderNumber)" style="color:white; font-style: italic;" class="calendar-white">Kategoriye Git</a></p>
                        </div>
                    </div>
                </div>
            }
        }
    </div>
</section>

Index.cshtml

<section class="bg-white discus-parallax">
    <div class="container" style="margin-top:15px;">
        @{
            int card110Col = 6;
            int card110CategoryOrderNumber = 3;
            int deger = 0;

            if (Partial.isCategoryOrderNumber(card110CategoryOrderNumber))
            {
                IEnumerable<Post> card110Posts = Partial.PostsOrderNumber(card110CategoryOrderNumber, 0, card110Col, Partial.Order.ID, true, lang);
                Category category110title = Partial.Category(card110CategoryOrderNumber, lang);
                int card110Count = Convert.ToInt32(Math.Ceiling(card110Posts.Count() / Convert.ToDouble(card110Col)));
                <div class="row">
                    <div class="col-md-8">
                        @for (int componen = 0; componen < card110Count; componen++)
                        {
                            <div class="owl-carousel-referance owl-carousel-fix">
                                @foreach (Post comPost in card110Posts.Skip(componen * card110Col).Take(card110Col))
                                {
                                    string renk = "#d91311";  // 1. sırada gelecek arkaplan rengi
                                    if (deger == 1)
                                    {
                                        renk = "#0066b0"; // 2.sırada gelecek arkaplan rengi
                                    }
                                    else if (deger == 2)
                                    {
                                        renk = "#ff9900"; // 3.sırada gelecek arkaplan rengi
                                    }
                                    else if (deger == 3)
                                    {
                                        renk = "#cc00cc"; // 4.sırada gelecek arkaplan rengi
                                    }
                                    <div class="container imobile2" style="background-color:@renk;color:white;padding-top:20px;">
                                        <div class="row">
                                            <div class="col-md-4">
                                                <div class="img-index-center">
                                                    <img src="@comPost.PostThumbnail" />
                                                </div>
                                            </div>
                                            <div class="col-md-8">
                                                <h3 style="min-height:75px; font-size: 1.5rem; color:#fff;">@comPost.PostTitle.HtmlEncode()</h3>
                                                <p>@Partial.PostShortContent(comPost.PostID, 105)</p>
                                                <p><a href="@Partial.PostLink(comPost.PostID)" style="color:white; font-style: italic;" class="calendar-white">@Partial.Translate("Devami", lang)</a></p>
                                            </div>
                                        </div>
                                    </div>
                                    deger++;
                                    if (deger == 4) // 4.İçerikten sonra başa dönerek içerik arka plan renkleri sıraysıyla tekrar edecek
                                    {
                                        deger = 0;
                                    }
                                }
                            </div>
                        }
                    </div>
                    <div class="col-md-4 white-link">
                        <div class="imobile2" style="background-color: #ec9706;color: white;margin: 0px;padding: 8px;">
                            <h3><a href="@Partial.CategoryLink(card110CategoryOrderNumber)" style="font-size:20px; font-size: 1.5rem;">@category110title.CategoryTitle.HtmlEncode()</a></h3>

                            <p> </p>

                            <p><a href="@Partial.CategoryLink(card110CategoryOrderNumber)">@Partial.CategoryShortContent(card110CategoryOrderNumber, 140)</a></p>

                            <p> </p>

                            <p> </p>
                            <p> <a href="@Partial.CategoryLink(card110CategoryOrderNumber)" style="color:white; font-style: italic;" class="calendar-white">Kategoriye Git</a></p>
                        </div>
                    </div>
                </div>
            }
        }
    </div>
</section>

Javascript

$('.owl-carousel-referance').owlCarousel({
            margin: 10,
            loop: true,
            autoplay: true,
            autoplayTimeout: 3000,
            autoplayHoverPause: true,
            nav: false,
            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

a.calendar-white {
        color: black;
        border: 1px solid #fff;
        padding: 5px 30px;
    }

    .white-link a {
    color: white;
    }

https://www.basaranakademi.com.tr/tr

İndex Bileşenleri