Slider

<div id="slider1" style="width:1920px;height:700px;margin:0 auto;margin-bottom: 0px;">
    @{
        bool firstSlide = true;
        int slideMetaID = 1;
        foreach (Slide slidem in Partial.Slides())
        {
            if (firstSlide)
            {
                <div class="ls-slide" data-ls="bgsize:cover; duration:4000; kenburnsscale:1.2; parallaxevent:scroll; parallaxdurationmove:0;">
                    <img width="1920" height="700" src="/Upload/Slide/@slidem.SlideImage" class="ls-bg" alt="" />
                    <div style="top:50%; left:50%; text-align:initial; font-weight:400; font-style:normal; text-decoration:none; width:100%; height:100%; background:rgba(51, 9, 23, 0.2);" class="ls-l" data-ls="showinfo:1; static:forever; position:fixed;"></div>
                    <p style="text-shadow: 0 1px 2px rgba(0,0,0,0.3);top:289px; left:50%; text-align:initial; font-weight:400; font-style:normal; text-decoration:none;  color:#ffffff; font-size:76px;" class="ls-l" data-ls="showinfo:1; offsetyin:-20; static:forever;">@slidem.SlideTitle</p>
                    <p style="top:390px; left:50%; text-align:initial; font-weight:400; font-style:italic; text-decoration:none; color:#ffffff; font-size:20px;" class="ls-l" data-ls="showinfo:1; offsetyin:-20; delayin:50; static:forever;">@slidem.SlideContent</p>
                    <p style="cursor:pointer;top:440px; text-align:initial; font-weight:600; font-style:normal; text-decoration:none; font-size:16px; line-height:46px; padding-right:38px; padding-left:38px; left:50%; background:#f23374; color:#ffffff;" class="ls-l" data-ls="showinfo:1; offsetyin:-20; delayin:100; hover:true; hoverdurationin:300; hoveropacity:1; hoverbgcolor:#ff4281; static:forever;">@Partial.SlideMeta(slidem.SlideID, slideMetaID)</p>
                </div>
                firstSlide = false;
            }
            else
            {
                <div class="ls-slide" data-ls="duration:4000; kenburnsscale:1.2;">
                    <img width="1920" height="700" src="/Upload/Slide/@slidem.SlideImage" class="ls-bg" alt="" />
                </div>
            }

        }
    }
</div>

JavaScript

    <script type="text/javascript">
		$(document).ready(function() {
		    $('#slider1').layerSlider({
		        sliderVersion: '6.5.0b1',
		        type: 'fullwidth',
		        allowFullscreen: false,
		        maxRatio: 1,
		        hideUnder: 567,
		        pauseOnHover: 'disabled',
		        skin: 'v6',
		        navStartStop: false,
		        thumbnailNavigation: 'disabled',
		        skinsPath: 'https://www.antalyawebtasarim.com/discus/slider/layerslider/skins/',
		    });
		});
    </script>