Carousel Comment Box +++

index.cshtml

@{
    int card63Col = 6;
    int card63TotalRow = 1;
    int card63CategoryOrderNumber = 2;

    if (Partial.isCategoryOrderNumber(card63CategoryOrderNumber))
    {
        IEnumerable<Post> card63Posts = Partial.PostsOrderNumber(card63CategoryOrderNumber, 0, card63Col * card63TotalRow, Partial.Order.OrderBy, true, lang);
        Category categorytitle = Partial.Category(card63CategoryOrderNumber, lang);
        <div class="container-fluid text-center" style="background-color:#f2f2f2;">
            <div class="container text-center pt-3 pb-3">
                <div class="big-title3">
                    <h3 class="big_title3_gri">@categorytitle.CategoryTitle.HtmlEncode()</h3>
                </div>
                <div class="owl-carousel-fix owl-carousel-brand2 owl-theme">
                    @foreach (Post comPost in card63Posts)
                    {
                        <div class="item">
                            <div class="inner-box" style="margin:25px;">
                                <div class="quote-icon"><i class="fas fa-quote-right"></i></div>
                                <div class="image-outer">
                                    <div class="image">
                                        <img src="@comPost.PostThumbnail" alt="">
                                    </div>
                                </div>
                                <div class="text">@Partial.PostShortContent(comPost.PostID, 170)</div>
                                <h5><a href="@Partial.PostLink(comPost.PostID)">@comPost.PostTitle </a></h5>
                                <strong> <a href="@Partial.PostLink(comPost.PostID)">@Partial.PostMeta(comPost.PostID, "Ünvan")</a></strong>
                                <div class="designation"><a href="@Partial.PostLink(comPost.PostID)"><i class="fas fa-arrow-circle-right"></i> </a></div>
                            </div>
                        </div>
                    }
                </div>
            </div>
        </div>
    }
}

Javascript

$('.owl-carousel-brand2').owlCarousel({
            margin: 10,
            loop: true,
            autoplay: true,
            autoplayTimeout: 3000,
            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: 1
                },
                1000: {
                    items: 2
                }
            }
        });

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 type="text/css">
    .inner-box {
        position: relative;
        text-align: center;
        padding: 35px 30px;
        background-color: #ffffff;
        -webkit-transition: all 1000ms ease;
        -moz-transition: all 100ms ease;
        -ms-transition: all 1000ms ease;
        -o-transition: all 1000ms ease;
        transition: all 1000ms ease;
        box-shadow: 0px 0px 20px rgba(0,0,0,0.15);
    }

        .inner-box:before {
            position: absolute;
            content: '';
            left: 0px;
            bottom: 0px;
            width: 0px;
            height: 5px;
            background-color: #ad8e63;
            -webkit-transition: all 1000ms ease;
            -moz-transition: all 100ms ease;
            -ms-transition: all 1000ms ease;
            -o-transition: all 1000ms ease;
            transition: all 1000ms ease;
        }

        .inner-box .quote-icon {
            position: absolute;
            right: 45px;
            top: -20px;
            color: #e0e0e0;
            font-size: 60px;
            line-height: 1em;
            -moz-transition: all 500ms ease;
            -webkit-transition: all 500ms ease;
            -ms-transition: all 500ms ease;
            -o-transition: all 500ms ease;
            transition: all 500ms ease;
        }

        .inner-box .image-outer {
            position: relative;
            display: inline-block;
        }

            .inner-box .image-outer:before {
                position: absolute;
                content: '';
                left: -4px;
                top: -4px;
                right: -4px;
                bottom: -4px;
                border-radius: 50px;
                border: 2px solid #d1ae7c;
            }

        .inner-box .image {
            position: relative;
            width: 76px;
            height: 76px;
            overflow: hidden;
            margin: 0 auto;
            border-radius: 50px;
        }

        .inner-box h5 a {
            position: relative;
            color: #004286;
            font-weight: 700;
            margin-top: 5px;
        }
</style>

www.antalyateknokent.com.tr