description = "Section About"

[viewBag]

==
<section class="section section-about" id="about">
	<div class="container" style="background-image: url('{{ data.background_image | media }}')">
		<div class="about-animation" id="about-animation"></div>
		<div class="section-title header-animation magic-scroll-animation">
			<h1>{{ data.title }}</h1>
			{{ data.description | raw }}
		</div>
	</div>

	{% set images = { 
		'1': 'photos/slide_1.jpg', 
		'2':'photos/desmond.jpg',
		'3': 'photos/slide_2.jpg', 
		'4': 'photos/slide_3.jpg',
	 }%}
<!-- <div class="container-fluid">
	<div id="carouselFour" class="carousel slide" data-ride="carousel" data-interval="false">
		<div class="carousel-inner row mx-auto" role="listbox">
{% for image in images %}
			<div class="carousel-item col-md-3 {% if loop.first %} active{% endif %}">
				<img class="d-block img-fluid mx-auto" src="{{ image | media }}" alt="Slide {{ loop.index }} ">
			</div>
{% endfor %}
		</div>
		<a class="carousel-control-prev" data-target="#carouselFour" role="button" data-slide="prev">
			<i class="fa fa-chevron-left fa-lg text-muted"></i>
			<span class="sr-only">Previous</span>
		</a>
		<a class="carousel-control-next text-faded" data-target="#carouselFour" role="button" data-slide="next">
			<i class="fa fa-chevron-right fa-lg text-muted"></i>
			<span class="sr-only">Next</span>
		</a>
	</div>
</div> -->
<div class="container-fluid">
<div class="glide about">
		<div class="glide__arrows" data-glide-el="controls">
			<a class="glide__arrow glide__arrow--left" data-glide-dir="<">
					<i class="fa fa-chevron-left fa-lg text-muted"></i>
					<span class="sr-only">Previous</span>
				</a>
				<a class="glide__arrow glide__arrow--right" data-glide-dir=">">
					<i class="fa fa-chevron-right fa-lg text-muted"></i>
					<span class="sr-only">Next</span>
				</a>
		</div>
		<div class="glide__track" data-glide-el="track">
		  <ul class="glide__slides">
				{% for image in images %}
				<li class="glide__slide">
					<img src="{{ image | media }}" alt="Slide {{ loop.index }}">
				</li>
				{% endfor %}
		  </ul>
		</div>
	  </div>
	</div>
</div>
</section>