<div id="bgslideshow">
	<div id="boslideshow">
	<script src="assets/js/jquery-1.9.1.min.js"></script>
	<script src="assets/js/jssor.js"></script>
	<script src="assets/js/jssor.slider.js"></script>
	<script>
		jQuery(document).ready(function ($) {
			var _CaptionTransitions = [];
			_CaptionTransitions["L"] = { $Duration: 900, x: 0.6, $Easing: { $Left: $JssorEasing$.$EaseInOutSine }, $Opacity: 2 };
			_CaptionTransitions["R"] = { $Duration: 900, x: -0.6, $Easing: { $Left: $JssorEasing$.$EaseInOutSine }, $Opacity: 2 };
			_CaptionTransitions["T"] = { $Duration: 900, y: 0.6, $Easing: { $Top: $JssorEasing$.$EaseInOutSine }, $Opacity: 2 };
			_CaptionTransitions["B"] = { $Duration: 900, y: -0.6, $Easing: { $Top: $JssorEasing$.$EaseInOutSine }, $Opacity: 2 };
			_CaptionTransitions["ZMF|10"] = { $Duration: 900, $Zoom: 11, $Easing: { $Zoom: $JssorEasing$.$EaseOutQuad, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2 };
			_CaptionTransitions["RTT|10"] = { $Duration: 900, $Zoom: 11, $Rotate: 1, $Easing: { $Zoom: $JssorEasing$.$EaseOutQuad, $Opacity: $JssorEasing$.$EaseLinear, $Rotate: $JssorEasing$.$EaseInExpo }, $Opacity: 2, $Round: { $Rotate: 0.8} };
			_CaptionTransitions["RTT|2"] = { $Duration: 900, $Zoom: 3, $Rotate: 1, $Easing: { $Zoom: $JssorEasing$.$EaseInQuad, $Opacity: $JssorEasing$.$EaseLinear, $Rotate: $JssorEasing$.$EaseInQuad }, $Opacity: 2, $Round: { $Rotate: 0.5} };
			_CaptionTransitions["RTTL|BR"] = { $Duration: 900, x: -0.6, y: -0.6, $Zoom: 11, $Rotate: 1, $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Top: $JssorEasing$.$EaseInCubic, $Zoom: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear, $Rotate: $JssorEasing$.$EaseInCubic }, $Opacity: 2, $Round: { $Rotate: 0.8} };
			_CaptionTransitions["CLIP|LR"] = { $Duration: 900, $Clip: 15, $Easing: { $Clip: $JssorEasing$.$EaseInOutCubic }, $Opacity: 2 };
			_CaptionTransitions["MCLIP|L"] = { $Duration: 900, $Clip: 1, $Move: true, $Easing: { $Clip: $JssorEasing$.$EaseInOutCubic} };
			_CaptionTransitions["MCLIP|R"] = { $Duration: 900, $Clip: 2, $Move: true, $Easing: { $Clip: $JssorEasing$.$EaseInOutCubic} };
			
			var options = {
				$FillMode: 2, 
				$AutoPlay: true,
				$AutoPlayInterval: 4000,
				$PauseOnHover: 1,			
				$ArrowKeyNavigation: true,
				$SlideEasing: $JssorEasing$.$EaseOutQuint,
				$SlideDuration: 800,
				$MinDragOffsetToSlide: 20,
				//$SlideWidth: 600,
				//$SlideHeight: 300,
				$SlideSpacing: 0,
				$DisplayPieces: 1,
				$ParkingPosition: 0,
				$UISearchMode: 1,
				$PlayOrientation: 1,
				$DragOrientation: 1,
				
				$CaptionSliderOptions: {
					$Class: $JssorCaptionSlider$,
					$CaptionTransitions: _CaptionTransitions,
					$PlayInMode: 1,
					$PlayOutMode: 3
				},
				
				$BulletNavigatorOptions: {
					$Class: $JssorBulletNavigator$,
					$ChanceToShow: 2,
					$AutoCenter: 1,
					$Steps: 1,
					$Lanes: 1,
					$SpacingX: 8,
					$SpacingY: 8,
					$Orientation: 1
				},
				
				$ArrowNavigatorOptions: {
					$Class: $JssorArrowNavigator$,
					$ChanceToShow: 1,
					$AutoCenter: 2,
					$Steps: 1
				}
			};
			
			var jssor_slider1 = new $JssorSlider$("slider1_container", options);
			
			//responsive code begin
			function ScaleSlider() {
				var bodyWidth = document.body.clientWidth;
				if (bodyWidth)
				jssor_slider1.$ScaleWidth(Math.min(bodyWidth, 1920));
				else
				window.setTimeout(ScaleSlider, 30);
			}
			
			ScaleSlider();
			
			if (!navigator.userAgent.match(/(iPhone|iPod|iPad|BlackBerry|IEMobile)/)) {
				$(window).bind('resize', ScaleSlider);
			}
			//responsive code end
		});
	</script>
	
	<div id="slider1_container" style="position:relative;margin:0 auto;top:0px;left:0px;width:1920px;height:1080px;overflow:hidden;">
		<div u="loading" style="position:absolute;top:0px;left:0px;">
			<div style="filter:alpha(opacity=70);opacity:0.7;position:absolute;display:block;top:0px;left:0px;width:100%;height:100%;">
			</div>
			<div style="position:absolute;display:block;background:url(assets/images/loading.gif) no-repeat center center;top:0px;left:0px;width:100%;height:100%;">
			</div>
		</div>
		<div u="slides" style="cursor:move;position:absolute;left:0px;top:0px;width:1920px;height:1080px;overflow:hidden;">
			<?php
				include '../libs/functiondb.php';
				$slidb = mysqli_query($koneksi, "SELECT * FROM cmas_slideshow WHERE slideshow_status='Aktif' ORDER BY slideshow_order ASC");
				while($slidt = mysqli_fetch_array($slidb)) {
			?>	
				<div>
					<?php if ($slidt['slideshow_texton'] == 0) { ?>
						<?php if ($slidt['slideshow_url'] == "") { ?>
							<img u="image" src="assets/images/slideshow/<?php echo $slidt['slideshow_gambar']; ?>" alt="<?php echo $slidt['slideshow_judul']; ?>" title="<?php echo $slidt['slideshow_judul']; ?>">
						<?php } else { ?>
							<a href="<?php echo $slidt['slideshow_url']; ?>">
								<img u="image" src="assets/images/slideshow/<?php echo $slidt['slideshow_gambar']; ?>" alt="<?php echo $slidt['slideshow_judul']; ?>" title="<?php echo $slidt['slideshow_judul']; ?>">
							</a>
						<?php } ?>
					<?php } else { ?>
						<?php if ($slidt['slideshow_url'] == "") { ?>
							<img u="image" src="assets/images/slideshow/<?php echo $slidt['slideshow_gambar']; ?>" alt="<?php echo $slidt['slideshow_judul']; ?> - <?php echo $slidt['slideshow_keterangan']; ?>" title="<?php echo $slidt['slideshow_judul']; ?> - <?php echo $slidt['slideshow_keterangan']; ?>">
							
							<?php if ($slidt['slideshow_textpos'] == "Left") { ?>
								<div style="width:100%;height:auto;bottom:43%;line-height:1;padding:0 5%;position:absolute;text-align:center;z-index:999;">
									
									<span style="width:100%;margin:0 auto;padding:0;display:block;font-weight:700;font-size:60px;font-family:'Roboto', sans-serif;color:#fff;text-align:left;line-height:1;text-shadow:0 0 10px rgba(0,0,0,0.5);">
										<?php echo $slidt['slideshow_judul']; ?>
									</span>
									
									<span style="width:100%;margin:0 auto;padding:0;display:block;font-weight:500;font-size:40px;font-family:'Roboto', sans-serif;color:#FFF62C;text-align:left;text-shadow:0 0 10px rgba(0,0,0,0.5);">
										<?php echo $slidt['slideshow_keterangan']; ?>
									</span>
									
								</div>
							<?php } else { ?>
								<div style="width:100%;height:auto;bottom:43%;line-height:1;padding:0 5%;position:absolute;text-align:center;z-index:999;">
									
									<span style="width:100%;margin:0 auto;padding:0;display:block;font-weight:700;font-size:60px;font-family:'Roboto', sans-serif;color:#fff;text-align:right;line-height:1;text-shadow:0 0 10px rgba(0,0,0,0.5);">
										<?php echo $slidt['slideshow_judul']; ?>
									</span>
									
									<span style="width:100%;margin:0 auto;padding:0;display:block;font-weight:500;font-size:40px;font-family:'Roboto', sans-serif;color:#FFF62C;text-align:right;text-shadow:0 0 10px rgba(0,0,0,0.5);">
										<?php echo $slidt['slideshow_keterangan']; ?>
									</span>
									
								</div>
							<?php } ?>
						<?php } else { ?>
							<a href="<?php echo $slidt['slideshow_url']; ?>">
								<img u="image" src="assets/images/slideshow/<?php echo $slidt['slideshow_gambar']; ?>" alt="<?php echo $slidt['slideshow_judul']; ?> - <?php echo $slidt['slideshow_keterangan']; ?>" title="<?php echo $slidt['slideshow_judul']; ?> - <?php echo $slidt['slideshow_keterangan']; ?>">
								
								<?php if ($slidt['slideshow_textpos'] == "Left") { ?>
									<div style="width:100%;height:auto;bottom:43%;line-height:1;padding:0 5%;position:absolute;text-align:center;z-index:999;">
									
										<span style="width:100%;margin:0 auto;padding:0;display:block;font-weight:700;font-size:60px;font-family:'Roboto', sans-serif;color:#fff;text-align:left;line-height:1;text-shadow:0 0 10px rgba(0,0,0,0.5);">
											<?php echo $slidt['slideshow_judul']; ?>
										</span>
										
										<span style="width:100%;margin:0 auto;padding:0;display:block;font-weight:500;font-size:40px;font-family:'Roboto', sans-serif;color:#FFF62C;text-align:left;text-shadow:0 0 10px rgba(0,0,0,0.5);">
											<?php echo $slidt['slideshow_keterangan']; ?>
										</span>
										
									</div>
								<?php } else { ?>	
									<div style="width:100%;height:auto;bottom:43%;line-height:1;padding:0 5%;position:absolute;text-align:center;z-index:999;">
									
										<span style="width:100%;margin:0 auto;padding:0;display:block;font-weight:700;font-size:60px;font-family:'Roboto', sans-serif;color:#fff;text-align:right;line-height:1;text-shadow:0 0 10px rgba(0,0,0,0.5);">
											<?php echo $slidt['slideshow_judul']; ?>
										</span>
										
										<span style="width:100%;margin:0 auto;padding:0;display:block;font-weight:500;font-size:40px;font-family:'Roboto', sans-serif;color:#FFF62C;text-align:right;text-shadow:0 0 10px rgba(0,0,0,0.5);">
											<?php echo $slidt['slideshow_keterangan']; ?>
										</span>
										
									</div>
								<?php } ?>
							</a>
						<?php } ?>
					<?php } ?>
				</div>
			<?php } ?>
		</div>
		
		<style>
			.jssorb21 div, .jssorb21 div:hover, .jssorb21 .av {background:url(assets/images/b17.png) no-repeat;overflow:hidden;cursor:pointer;}
			.jssorb21 div { background-position:-5px -5px;}
			.jssorb21 div:hover, .jssorb21 .av:hover { background-position:-35px -5px;}
			.jssorb21 .av { background-position:-65px -5px;}
			.jssorb21 .dn, .jssorb21 .dn:hover { background-position:-95px -5px;}
		</style>
		<div u="navigator" class="jssorb21" style="position:absolute;bottom:150px;left:6px;">
			<div u="prototype" style="position:absolute;width:19px;height:19px;text-align:center;line-height:19px;color:#0082D2!important;font-size:12px;"></div>
		</div>
		<style>
			.jssora21l, .jssora21r, .jssora21ldn, .jssora21rdn {position:absolute;cursor:pointer;display:block;background:url(assets/images/a17.png) center center no-repeat;overflow:hidden;}
			.jssora21l { background-position:-3px -33px;}
			.jssora21r { background-position:-63px -33px;}
			.jssora21l:hover { background-position:-123px -33px;}
			.jssora21r:hover { background-position:-183px -33px;}
			.jssora21ldn { background-position:-243px -33px;}
			.jssora21rdn { background-position:-303px -33px;}
		</style>
		<span u="arrowleft" class="jssora21l" style="width:55px;height:55px;top:123px;left:8px;"></span>
		<span u="arrowright" class="jssora21r" style="width:55px;height:55px;top:123px;right:8px"></span>
	</div>
	</div>
</div>