osb/resources/views/theme/frontend/metronic/widgets/slider.blade.php

<!-- BEGIN SLIDER -->
<div class="page-slider margin-bottom-40">
	<div id="carousel-example-generic" class="carousel slide carousel-slider">
		<!-- Indicators -->
		<ol class="carousel-indicators carousel-indicators-frontend">
			<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
			<li data-target="#carousel-example-generic" data-slide-to="1"></li>
			<li data-target="#carousel-example-generic" data-slide-to="2"></li>
		</ol>

		<!-- Wrapper for slides -->
		<div class="carousel-inner" role="listbox">

			@foreach ($so->site_slider as $ss)
				@switch($ss['style'])

					@case(1)
						<div class="item carousel-item active" style="background: {{ $ss['image'] }};">

							<div class="container">
								<div class="carousel-position-six text-uppercase text-center" style="background: #000; color: #888; opacity: 0.5; font-style: bold;">
									<h2 class="margin-bottom-20 animate-delay carousel-title-v1"  data-animation="animated fadeInDown">
										{!! $ss['title'] !!}
									</h2>
									<p class="carousel-subtitle-v5 border-top-bottom margin-bottom-30" data-animation="animated fadeInDown">{!! $ss['text'] !!}</p>
									@isset($ss['button'])
										<a class="carousel-btn-green" href="{{ $ss['button']['url'] }}" data-animation="animated fadeInUp">{!! $ss['button']['text'] !!}</a>
									@endisset
								</div>
							</div>
						</div>
						@break

					@case(2)
						<div class="item carousel-item" style="background: {{ $ss['image'] }};">

							<div class="container">
								<div class="carousel-position-six">
									<h2 class="animate-delay carousel-title-v6 text-uppercase" data-animation="animated fadeInDown">
										{!! $ss['title'] !!}
									</h2>
									<p class="carousel-subtitle-v6 text-uppercase" data-animation="animated fadeInDown">
										{!! $ss['text'] !!}
									</p>
									<p class="carousel-subtitle-v7 margin-bottom-30" data-animation="animated fadeInDown">
										{!! $ss['text2'] !!}
									</p>
									@isset($ss['button'])
										<a class="carousel-btn-green" href="{{ $ss['button']['url'] }}" data-animation="animated fadeInUp">{!! $ss['button']['text'] !!}</a>
									@endisset
								</div>
							</div>
						</div>
						@break

					@endswitch
			@endforeach
		</div>

		<!-- Controls -->
		<a class="left carousel-control carousel-control-shop carousel-control-frontend" href="#carousel-example-generic" role="button" data-slide="prev">
			<i class="fa fa-angle-left" aria-hidden="true"></i>
		</a>
		<a class="right carousel-control carousel-control-shop carousel-control-frontend" href="#carousel-example-generic" role="button" data-slide="next">
			<i class="fa fa-angle-right" aria-hidden="true"></i>
		</a>
	</div>
</div>

@section('scripts')
	<!-- END SLIDER -->
	@css('/site/js/jquery/plugins/owl.carousel/2.0.0/css/owl.carousel.css')
	@css('/site/css/animate.css')
	@js('/site/js/jquery/plugins/owl.carousel/2.0.0/js/owl.carousel.min.js','jq-owl-carousel','jquery')<!-- slider for products -->
	@js('/pages/js/bs-carousel.js','bs-carousel','jq-owl-carousel')

	<script type="text/javascript">
		jQuery(document).ready(function() {
			Layout.initOWL();
		});
	</script>
@append