MAKALE

<section class="discus-parallax bg-white">
    @{
        int card3Col = 8;
        int card3TotalRow = 1;
        int card3CategoryOrderNumber = 2;

        if (Partial.isCategoryOrderNumber(card3CategoryOrderNumber))
        {
            IEnumerable<Post>
            card3PostsID = Partial.PostsID(card3CategoryOrderNumber, 0, card3Col * card3TotalRow, Partial.Order.OrderBy, true);
            Category categorytitle = Partial.Category(card3CategoryOrderNumber);
            int card3CountID = Convert.ToInt32(Math.Ceiling(card3PostsID.Count() / Convert.ToDouble(card3Col)));
            <div class="discus-owl-brand m-0 p-0">
                <div class="container">
                    <h2>@categorytitle.CategoryTitle.HtmlEncode()</h2>
                    @for (int componen = 0; componen < card3CountID; componen++)
                    {
                        <div class="owl-carousel-video owl-carousel-fix">
                            @foreach (Post comPost in card3PostsID.Skip(componen * card3Col).Take(card3Col))
                            {
                                <div class="box20 blue rounded ">
                                    <img src="@comPost.PostThumbnail" alt="" class="kanvas">
                                    <div class="box-content">
                                        <h3 class="title"><a href="@Partial.PostLink(comPost.PostID)">@comPost.PostTitle.HtmlEncode()</a></h3>
                                    </div>
                                </div>
                            }
                        </div>
                    }
                </div>
            </div>
        }
    }
</section>

KATEGORİ

<section class="discus-parallax bg-white">
    @{
        int card4CategoryOrderNumber = 3;
        if (Partial.isCategoryOrderNumber(card4CategoryOrderNumber))
        {
            IEnumerable<Category> card5Category = Partial.CategorySubID(card4CategoryOrderNumber);
            Category card44Category = Partial.Category(card4CategoryOrderNumber);
            <div class="discus-owl-brand m-0 p-0">
                <div class="container">
                    <h2>@card44Category.CategoryTitle</h2>
                    <div class="owl-carousel-video owl-carousel-fix">
                        @foreach (Category comCategory in card5Category)
                        {
                            <div class="box20 blue rounded">
                                <img src="@comCategory.CategoryThumbnail" alt="">
                                <div class="box-content">
                                    <h3 class="title"><a href="@Partial.CategoryLink(comCategory.CategoryID)">@comCategory.CategoryTitle.HtmlEncode()</a></h3>
                                </div>
                            </div>
                        }
                    </div>
                </div>
            </div>
        }
    }
</section>

JAVASCRİPT

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

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

<style>/*********************** Style *******************/
    .kanvas {
        width: 100%;
        min-height: 180px;
        max-height: 180px;
        overflow: hidden;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
    }
.rounded {
    border-radius: .25rem !important;
}

.box20, .box20 .icon li a {
    overflow: hidden;
}

.box20 {
    box-shadow: 0 0 5px #a3a3a3;
}

    .box20 .post, .box20 .title {
        text-transform: capitalize;
        width: 60%;
    }

.box20 {
    position: relative;
}

    .box20:after, .box20:before {
        position: absolute;
        content: "";
    }

    .box20:before {
        width: 80%;
        height: 220%;
        background: #0d428f;
        top: -40%;
        left: 10%;
        z-index: 1;
        transform: rotate(25deg);
        transform-origin: center top 0;
        transition: all .5s ease 0s;
    }


    /*
        .box20:after {
            width: 55%;
            height: 175%;
            bottom: -70%;
            left: 53%;
            transform: rotate(-33deg);
            transform-origin: center bottom 0;
            transition: all .8s ease 0s;
        }*/

    .box20 .box-content, .box20 .icon {
        width: 100%;
        padding: 0 8px;
        position: absolute;
        left: 0;
        z-index: 2;
        transition: all 1.1s ease 0s;
    }


    .box20 img {
        width: 100%;
        height: auto;
    }

    .box20 .box-content {
        top: 7%;
        color: #fff;
    }

    .box20 .title {
        font-size: 24px;
        margin: 0;
        font-weight: 300;
    }

    .box20 .icon li a, .box20 .post {
        display: inline-block;
        font-size: 14px;
    }

    .box20 .post {
        margin-top: 5px;
    }

    .box20 .icon {
        list-style: none;
        margin: 0;
        bottom: 25px;
    }

        .box20 .icon li {
            display: inline-block;
        }

            .box20 .icon li a {
                width: 35px;
                height: 35px;
                line-height: 35px;
                background: #fff;
                border-radius: 50%;
                margin: 0 3px;
                color: #fff;
                text-align: center;
                transition: all .5s ease 0s;
            }

    .box20 .button {
        background-color: #000000;
        border-radius: 3px;
        display: inline-block;
        padding: 6px 12px;
        margin-top: 10px;
    }

    .box20 a, box20 a:link, box20 a:visited, box20 a:hover, box20 a:active {
        color: #ffffff !important;
    }

.owl-carousel .owl-item img {
    display: block;
    width: 100%;
    min-height: 300px;
}

.discus-bg-full {
    padding-bottom: 40px !important;
}

h2 a {
    color: white;
    font-weight: 300px;
    font-size: 26px;
    text-transform: uppercase;
}

.discus-bg-full .disucs-imageframe img {
    height: 250px;
}

.video {
    height: 0;
    position: relative;
    padding-bottom: 56.25%;
}

    .video iframe {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }

.discus-bg-full-video .disucs-imageframe img {
    height: 400px;
}

.apps-bnr-caption {
    position: absolute;
    bottom: 30%;
    right: 31.5%;
    text-align: center;
}

.apps-bnr-text1 {
    font-size: 30px;
    line-height: 1.05em;
    text-transform: uppercase;
}
</style>

Aşağıdaki linkleri Layout da head etiketleri arasına yapıştırın.

<link rel="stylesheet" href="https://www.karayeltasarim.com/discus/js/owlcarousel/dist/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://www.karayeltasarim.com/discus/js/owlcarousel/dist/assets/owl.theme.default.min.css">
<script src="https://www.karayeltasarim.com/discus/js/owlcarousel/dist/owl.carousel.min.js"></script>

https://ugurhaliyikama.com.tr

İndex Bileşenleri