Orta Alan Slider ve Kayan Logolar

İndex.cshtml dosyasına aşağıdaki kodu ekleyin;

    <section class="bilgidetay baslikBirSection bglight">
        <div class="container-fluid">
            <div class="container">
                <div class="row arkaplan">
                    <div class="kayan-yazi-baslik">KURULUŞUNDAN BU YANA</div>
                    <div class="kayan-yazi">
                        <div class="yazilar">
                            <div class="text">
                                    
                            <span style="color: #8d7249;"><span style="font-size: 43px;line-height:50px;">FAYDALANDIRILAN</span></span>&nbsp;<span class="custom-div-home-page-text-big" style="color: #333; font-size: 43px; line-height:50px;">DESTEK</span></BR> <span class="custom-div-home-page-text-big" style="color: #8d7249; font-size: 43px;line-height:50px;">MİKTARI</span>&nbsp;<span class="custom-div-home-page-text-big" style="color: #333; font-size: 43px; line-height:50px;">3.5</span><span style="color: #8d7249;line-height:50px;"><span style="font-size: 43px;">MİLYON</span></span>&nbsp;<span class="custom-div-home-page-text-big" style="color: #333; font-size: 43px; line-height:50px;"> TL</span></div>
                        </div>
                       <div class="yazilar">
                            <div class="text">
                                <span style="color: #8d7249;"><span style="font-size: 43px;line-height:50px;">ULUSAL</span></span>&nbsp;<span class="custom-div-home-page-text-big" style="color: #333; font-size: 43px; line-height:50px;"> VE</span> <span class="custom-div-home-page-text-big" style="color: #8d7249; font-size: 43px;line-height:50px;">ULUSLARARASI</span>&nbsp;     <span class="custom-div-home-page-text-big" style="color: #333; font-size: 43px; line-height:50px;">DESTEKLİ</span> <br><span style="color: #8d7249;line-height:50px;"><span style="font-size: 43px;">PROJE</span></span>&nbsp;<span class="custom-div-home-page-text-big" style="color: #333; font-size: 43px; line-height:50px;">SAYISI 57</span> 
                            </div>
                        </div>
                       </div>
                         </div>
            </div>
        </div>
    </section>
    
    <section class="bilgidetay bglight">
        <div class="container-fluid">
            <div class="container">
                <div class="row">
                    <div class="owl-ortaklar" style="margin-top:25px;">
                        @foreach (FotogaleriResim resmim in Partial.FotogaleriResimleri(66))
                        {
                            <div class="col-sm-12 wow fadeIn animated" data-wow-duration=".5s" data-wow-delay=".1s">
                                <div class="kutu">
                                    <div class="kenarlik" style="border:1px solid #c3c3c3;">

                                        <div class="kanvas" style="background-image: url(/Resim/Fotogaleri/Buyuk/@resmim.ResimLink)"></div>

                                    </div>
                                </div>
                            </div>
                        }
                    </div>
                </div>
            </div>
        </div>
    </section>

tema.js dosyasına aşağıdaki kodu ekleyin;

 $(".kayan-yazi").owlCarousel({
        items: 1,
        dots: !0,
        autoplay: !0,
        autoplayTimeout: 4e3,
        autoplayHoverPause: !0,
        loop: !0,
        animateOut: 'slideOutDown',
        animateIn: 'flipInX',
        margin:30,
        stagePadding:30,
        smartSpeed:450,
        responsive: {
            0: { items: 1 },
            767: { items: 1 },
            1199: { items: 1 }
        },
        pagination: false,
        nav: true,
        dots:false,
        navText: ['<span class="sol-buton sliderbuton"><i class="fa fa-angle-left" aria-hidden="true"></i></span>', '<span class="sag-buton sliderbuton"><i class="fa fa-angle-right" aria-hidden="true"></i></span>']
    });

    $(".owl-ortaklar").owlCarousel({ items: 8, dots: !0, autoplay: !0, autoplayTimeout: 4e3, autoplayHoverPause: !0, loop: !0, animateOut: "fadeOut", responsive: { 0: { items: 1 }, 767: { items: 3 }, 1199: { items:8 } } });

CSS dosyasına aşağıdaki kodu ekleyin;

        @@media (max-width:767px) {
                .arkaplan .owl-next, .arkaplan .owl-prev{
                    display:none !important;
                }
                        .text {
             text-align: center;
            padding:0px !important;
        }
            }

        .arkaplan .owl-prev {
            left: 0 !important;
            position: absolute;
            bottom: 50%;
            background: initial !important;
            border: 2px solid #8d7249;
            padding: 15px 30px !important;
        }

        .arkaplan .owl-next {
            right: 0 !important;
            position: absolute;
            bottom: 50%;
            background: initial !important;
            border: 2px solid #8d7249;
            padding: 15px 30px !important;
        }

        .sliderbuton {
            font-size: 50px;
            color: #8d7249;
        }

        .text {
            text-align: center;
            padding: 100px 0px;
        }

        .kayan-yazi-baslik {
            font-size: 43px;
            line-height: 50px;
            text-align: center;
            margin: 50px 0px;
        }

        .arkaplan {
            background-image: url(http://www.itunovatto.com.tr/Uploads/budget.png);
            background-repeat: no-repeat;
            background-position: center center;
        }
        .bilgidetay .kanvas {
    min-height: 100px !important;
}