Slider Kod


    <div id="slider" style="width:1200px; height:700px; margin:0 auto;margin-bottom: 0px;">
        @foreach (Slide slide in Partial.Slides(lang))
        {
            if (Partial.SlideMeta(slide.SlideID, "Konum").ToString() == "left")
            {
                <div class="ls-slide" data-ls="bgposition:50% 50%; duration:4000; transition2d:4; kenburnsscale:1.2;">
                    <img width="1920" height="750" src="/Upload/Slide/@slide.SlideImage" class="ls-bg" alt="" />
                    <p style="font-weight:600;font-family:Poppins; font-size:60px; line-height:76px; color:#ffffff; top:50%; left:78px; width:400px; white-space:normal;" class="ls-l" data-ls="offsetyin:30; durationin:600; delayin:50; offsetyout:-30; durationout:400; parallaxlevel:0;">@slide.SlideTitle</p>
                    <p style="font-weight:600;font-family:Poppins; font-size:20px; line-height:20px; color:#ffffff; top:239px; left:82px;" class="ls-l" data-ls="offsetyin:30; durationin:600; offsetyout:-30; durationout:400; parallaxlevel:0;">@slide.SlideContent</p>
                    <a style="" class="ls-l" href="#" target="_self" data-ls="offsetyin:30; durationin:600; delayin:150; offsetyout:-30; durationout:400; hover:true; hoverdurationin:300; hoveropacity:1; hoverbgcolor:#ffffff; hovercolor:#444444; parallaxlevel:0;">
                        <p style="font-weight:500; text-align:center;cursor:pointer; ;padding-top:12px; padding-bottom:10px; font-family:Poppins; font-size:15px; top:445px; left:84px; border-top:2px solid #fff; border-right:2px solid #fff; padding-right:35px; border-bottom:2px solid #fff; border-left:2px solid #fff; padding-left:35px; line-height:30px; text-align:initial; font-weight:400; font-style:normal; text-decoration:none; color:#ffffff; background:rgba(0, 0, 0, 0.1); border-radius:2px; style:font-weight:500; text-align:center;cursor:pointer; ;" class=" ls-button">@Partial.SlideMeta(slide.SlideID, "Buton").ToString()</p>
                    </a>
                </div>
            }
            else if (Partial.SlideMeta(slide.SlideID, "Konum").ToString() == "right")
            {
                <div class="ls-slide" data-ls="bgposition:50% 50%; duration:4000; transition2d:4; kenburnsscale:1.2;">
                    <img width="1920" height="750" src="/Upload/Slide/@slide.SlideImage" class="ls-bg" alt="" />
                    <p style="font-weight:600;text-align:right !important;width:500px; font-family:Poppins; font-size:70px; line-height:76px; color:#ffffff; top:280px; left:610px; white-space:normal;" class="ls-l" data-ls="offsetyin:30; durationin:600; delayin:50; offsetyout:-30; durationout:400; parallaxlevel:0;">@slide.SlideTitle</p>
                    <p style="font-weight:600;text-align:right;width:500px; font-family:Poppins; font-size:20px; line-height:20px; color:#ffffff; top:230px; left:610px;" class="ls-l" data-ls="offsetyin:30; durationin:600; offsetyout:-30; durationout:400; parallaxlevel:0;">@slide.SlideContent</p>
                    <a style="" class="ls-l" href="#" target="_self" data-ls="offsetyin:30; durationin:600; delayin:150; offsetyout:-30; durationout:400; hover:true; hoverdurationin:300; hoveropacity:1; hoverbgcolor:#ffffff; hovercolor:#444444; parallaxlevel:0;">
                        <p style="font-weight:500; text-align:center;cursor:pointer; ;padding-top:12px; padding-bottom:10px; font-family:Poppins; font-size:15px; top:446px; left:953px; border-top:2px solid #fff; border-right:2px solid #fff; padding-right:35px; border-bottom:2px solid #fff; border-left:2px solid #fff; padding-left:35px; line-height:30px; text-align:initial; font-weight:400; font-style:normal; text-decoration:none; color:#ffffff; background:rgba(0, 0, 0, 0.1); border-radius:2px; style:font-weight:500; text-align:center;cursor:pointer; ;" class=" ls-button">@Partial.SlideMeta(slide.SlideID, "Buton").ToString()</p>
                    </a>
                </div>
            }
            else
            {
                <div class="ls-slide" data-ls="bgposition:50% 50%; duration:4000; transition2d:4; kenburnsscale:1.2;">
                    <img width="1920" height="750" src="/Upload/Slide/@slide.SlideImage" class="ls-bg" alt="" />
                    <p style="font-weight:600;font-family:Poppins; font-size:70px; line-height:20px; color:#ffffff; top:40%; left:50%;" class="ls-l" data-ls="durationin:700; easingin:easeOutBack; rotatexin:-360; durationout:400; rotatexout:-360; parallaxlevel:0;">@slide.SlideTitle</p>
                    <p style="font-weight:600;font-family:Poppins; font-size:20px; line-height:76px; color:#ffffff; top:50%; left:50%;" class="ls-l" data-ls="durationin:700; delayin:100; easingin:easeOutBack; rotatexin:-360; durationout:400; rotatexout:-360; parallaxlevel:0;">@slide.SlideContent</p>
                    <a style="" class="ls-l" href="#" target="_self" data-ls="durationin:700; delayin:200; easingin:easeOutBack; rotatexin:-360; durationout:400; rotatexout:-360; hover:true; hoverdurationin:300; hoveropacity:1; hoverbgcolor:#ffffff; hovercolor:#444444; parallaxlevel:0;">
                        <p style="font-weight:500; text-align:center;cursor:pointer; ;padding-top:12px; padding-bottom:10px; font-family:Poppins; font-size:15px; top:407px; left:50%; border-top:2px solid #fff; border-right:2px solid #fff; padding-right:35px; border-bottom:2px solid #fff; border-left:2px solid #fff; padding-left:35px; line-height:30px; text-align:initial; font-weight:400; font-style:normal; text-decoration:none; color:#ffffff; background:rgba(0, 0, 0, 0.1); border-radius:2px; style:font-weight:500; text-align:center;cursor:pointer; ;" class=" ls-button">@Partial.SlideMeta(slide.SlideID, "Buton").ToString()</p>
                    </a>
                </div>
            }
        }
    </div>

Slider JavaScript



<link rel="stylesheet" href="https://www.antalyawebtasarim.com/discus/slider/layerslider/css/layerslider.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,regular,500,600,700">
<script src="https://www.antalyawebtasarim.com/discus/slider/layerslider/js/jquery.js"></script>
<script src="https://www.antalyawebtasarim.com/discus/slider/layerslider/js/greensock.js"></script>
<script src="https://www.antalyawebtasarim.com/discus/slider/layerslider/js/layerslider.transitions.js"></script>
<script src="https://www.antalyawebtasarim.com/discus/slider/layerslider/js/layerslider.kreaturamedia.jquery.js"></script>

    <script type="text/javascript">
		$(document).ready(function() {
			$("#slider").on('sliderDidLoad', function( event, slider ) {
				var	d = new Date(),
					rotateHours,
					rotateMinutes,
					rotateSeconds,
					curHours = d.getHours(),
					curMinutes = d.getMinutes(),
					curSeconds = d.getSeconds();
				if( curHours >= 12 ){ curHours -= 12; }
				rotateSeconds = 360 / 60 * curSeconds;
				rotateMinutes = 360 / 60 * curMinutes + 6 * rotateSeconds / 360;
				rotateHours = 360 / 12 * curHours + 30 * rotateMinutes / 360;
				jQuery( '#hours' ).attr( 'data-ls', jQuery( '#hours' ).attr( 'data-ls') + 'rotate: ' + rotateHours );
				jQuery( '#minutes' ).attr( 'data-ls', jQuery( '#minutes' ).attr( 'data-ls') + 'rotate: ' + rotateMinutes );
				jQuery( '.seconds' ).attr( 'data-ls', jQuery( '.seconds' ).first().attr( 'data-ls') + 'rotate: ' + rotateSeconds );
				TweenMax.ticker.useRAF(false);
				TweenMax.lagSmoothing(0);

			});


			$('#slider').layerSlider({
				sliderVersion: '6.5.8',
				skin: 'v6',
				globalBGSize: 'cover',
				navPrevNext: false,
				hoverPrevNext: false,
				navStartStop: false,
				navButtons: false,
				showCircleTimer: false,
				thumbnailNavigation: 'disabled',
				skinsPath: 'https://www.antalyawebtasarim.com/discus/slider/layerslider/skins/'
			});
		});

    </script>

ÖZEL ALAN EKLEME

Konum ( "left", "right","center" yazarak konumlandırma yapabilirsiniz)

Buton