<div class=" uslider uslider-<?php echo $controlsWhen ?> uslider-<?php echo $style ?> uslider-<?php echo $transition ?> <?php echo $captionUseBackground == '1' ? 'uslider-caption-background' : '' ?>"
  id="uslider-<?php echo $element_id ?>"
  data-item=".uslide"
  data-auto="<?php echo $rotate ?>"
  data-auto_height="<?php echo $production ?>"
  data-adjust_slide_size="<?php echo $production ?>"
  data-effect="<?php echo $transition ?>"
  data-interval="<?php echo $rotateTime * 1000 ?>"
  data-show_control="<?php echo $controlsWhen ?>"
  data-control_num="<?php echo $dots /* && $production */ ? 1 : 0 ?>"
  data-control_next_prev="<?php echo $arrows /* && $production */ ? 1 : 0 ?>"
  data-starting_slide="<?php echo $startingSlide ?>"
  data-caption_height="<?php echo $primaryStyle == 'below' ? 1 : 0 ?>"
>
	<?php if($slidesLength){ ?>
	<div class="uslides">
		<?php for($i=0; $i<$slidesLength; $i++) { ?>
		<div class="uslide uslide-<?php echo $slides[$i]['style'] ?>"
			<?php if($primaryStyle != 'notext'){ ?>
				data-caption-selector="#uslider-<?php echo $element_id ?> .caption-<?php echo $slides[$i]['id'] ?>"
			<?php } ?>
			rel="<?php echo $slides[$i]['id'] ?>">

			<?php if($slides[$i]['url']){ ?>
			<a href="<?php echo $slides[$i]['url'] ?>" target="<?php echo $slides[$i]['linkTarget'] ?>" class="uslider-link uslide-image <?php echo $slides[$i]['urlType'] == 'image' ? ' uslider_lightbox_link' : '' ?>">
			<?php } else { ?>
			<div class="uslide-image">
			<?php } ?>
				<img src="<?php echo $slides[$i]['src'] ?>" style="min-width:100%, min-height:100%">
			<?php if($slides[$i]['url']){ ?>
			</a>
			<?php } else { ?>
			</div>
			<?php } ?>

		</div>
		<?php } ?>
	</div>
	<?php if($primaryStyle != 'notext'){ ?>
	<div class="uslider-texts">
		<?php for($i=0; $i<$slidesLength; $i++) { ?>
		<div class="uslide-text caption-<?php echo $slides[$i]['id'] ?>" rel="<?php echo $slides[$i]['id'] ?>" style="background-color:<?php echo $captionUseBackground == '1' ? $slides[$i]['captionBackground'] : 'transparent' ?>;color:<?php echo $slides[$i]['captionColor'] ?>">
			<div class="uslide-editable-text" placeholder="Slider description">
				<?php echo $slides[$i]['text'] ?>
			</div>
		</div>
		<?php } ?>
	</div>
	<?php } ?>
	<?php } else { ?>
	<!-- No images in this slider -->
	<?php } ?>
</div>

<style type="text/css">
	#uslider-<?php echo $element_id ?> {
		width: 100%;
	}
	#uslider-<?php echo $element_id ?> .uslide-caption {
		width: <?php echo $textWidth ?>;
		<?php echo $captionUseBackground ? 'padding: 5px 15px;' : '' ?>
	}

	#uslider-<?php echo $element_id ?> .uslide-right .uslide-caption {
		margin-left: <?php echo $imageWidth ?>;
	}

	#uslider-<?php echo $element_id ?> .uslide-right .uslide-image {
		float: left;
	}

	#uslider-<?php echo $element_id ?> .uslide-left .uslide-caption {
		float: left;
	}

	#uslider-<?php echo $element_id ?> .uslide-left .uslide-image {
		margin-left: <?php echo $textWidth ?>
	}
	#uslider-<?php echo $element_id ?> .uslide-left .uslide-caption,
	#uslider-<?php echo $element_id ?> .uslide-right .uslide-caption {
		height: <?php echo $imageHeight ?>px;
	}

	#uslider-<?php echo $element_id ?> .uslide-left .uslide-image,
	#uslider-<?php echo $element_id ?> .uslide-right .uslide-image {
		width: <?php echo $imageWidth ?>;
	}

	#uslider-<?php echo $element_id ?> .uslide-image {
		height: <?php echo $imageHeight ?>px;
		position: relative;
		overflow: hidden;
	}

	#uslider-<?php echo $element_id ?> .uslide-caption {
		background-color:<?php echo $captionUseBackground == '1' ? $captionBackground : 'transparent' ?>;
	}
</style>
