index.cshtml

<section class="discus-parallax bg-white">
    <div class="container">
        <div class="row">
            @foreach (Post haber in Partial.PostsOrderNumber(2, 0, 1, Partial.Order.OrderBy, true, lang))
            {
                <div class="col-lg-4 col-md-4 col-sm-4 mb-2">
                    <div id="carousel">
                        <div class="bass">
                            <h4>Haberler</h4>
                        </div>
                        <div class="baslik99">
                            <a href="@Partial.PostLink(haber.PostID)">
                                <img src="@haber.PostThumbnail" class="img-responsive" />
                            </a>
                            <a href="@Partial.PostLink(haber.PostID)">
                                <h5 class="text-center mt-4">@haber.PostTitle.HtmlEncode()</h5>
                            </a>
                        </div>
                    </div>
                </div>
            }
            <div class="col-lg-4 col-md-4 col-sm-4 mb-2">
                <div id="carousel" class="news">
                    <div class="bass">
                        <h4>Anket</h4>
                    </div>
                    <div class="baslik99">
                        <a target="_blank" href="">
                            <img src="https://www.karayeltasarim.com/Upload/File/2020/2/25/kurumsal.png" class="img-responsive" />
                        </a>
                        <a target="_blank" href="">
                            <h5 class="text-center mt-4">Karayel Tasarım Anketi</h5>
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 mb-2">
                <div id="carousel" class="carousel slide">
                    <div class="bass">
                        <h4>Aktüel</h4>
                    </div>
                    <div class="owl-carousel-product3 owl-carousel-fix">
                        @foreach (Post comPost in Partial.PostsOrderNumber(3, 0, 3, Partial.Order.OrderBy, true, lang))
                        {
                            <div class="text-center">
                                <a href="@Partial.PostLink(comPost.PostID)">
                                    <div class="disucs-imageframe">
                                        <img src="@comPost.PostThumbnail" />
                                        <h5 class="text-center mt-4">@comPost.PostTitle.HtmlEncode()</h5>
                                    </div>
                                </a>
                            </div>
                        }
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

JAVASCRİPT

$('.owl-carousel-product3').owlCarousel({
            margin: 10,
            loop: true,
            autoplay: true,
            autoplayTimeout: 3000,
            autoplayHoverPause: true,
            nav: true,
            navText: [
                '<a class="carousel-control left" href="#aktuel" data-slide="prev">‹</a>',
                '<a class="carousel-control right" href="#aktuel" data-slide="next">›</a>'
            ],
            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

 .img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img {
        display: block;
        max-width: 100%;
        height: auto;
    }

    img {
        vertical-align: middle;
    }

    img {
        border: 0;
    }

    #carousel {
        background: #efefef;
    }

    .pull-right a {
        color: #71706e;
        text-decoration: none;
        font-size: 10px !important;
    }

    .bass {
        background: #f5a82a;
    }

        .bass h4 {
            text-align: center;
            color: #FFFFFF !important;
            margin: 0px;
            font-weight: 300;
            padding: 10px;
        }

    .baslik99 a h5 {
        display: inline-block;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }

http://www.adrasantekneturu.com/tr

http://www.hilmibeken.com/tr

İndex Bileşenleri