Portfolio - Components

Owl Slider Demo

 
<div class="owl-carousel owl-carousel-light owl-carousel-light-init-fadeIn owl-theme manual dots-inside dots-horizontal-center show-dots-hover nav-inside nav-inside-plus nav-dark nav-md nav-font-size-md show-nav-hover mb-5"  data-plugin-options="{'autoplayTimeout': 10000}" data-dynamic-height="['670px','670px','670px','550px','500px']" style="height: 670px;">

  <div class="owl-stage-outer">

    <div class="owl-stage">

          {% for item in items %}

          {{ item.content }}

          {% endfor %}

        </div>

          <div class="owl-nav">

            <button type="button" role="presentation" class="owl-prev" aria-label="Previous"></button>

            <button type="button" role="presentation" class="owl-next" aria-label="Next"></button>

          </div>

        <div class="owl-dots mb-5">

        {% for item in items %}

          <button role="button" class="owl-dot active"><span></span></button>

          {% endfor %}

          {# <button role="button" class="owl-dot active"><span></span></button> #}

        </div>

    </div>

</div>

 
{% set pos = paragraph.field_home_page_caption_position.value %}

{% set cap1 = paragraph.field_home_page_caption_1.value %}

{% set cap2 = paragraph.field_home_page_caption_2.value %}

{% set cap3 = paragraph.field_home_page_caption_3.value %}

{% set link_q = paragraph.field_button_link.value %}

{% set link = content.field_button_link.0['#url'] %}

{% set linkTitle = content.field_button_link.0['#title'] %}
{% block paragraph %}

    {% block content %}

<!-- Open Carousel Slide {{ paragraph.index }}-->

<div class="owl-item position-relative" style="background-image: url({{ file_url(content.field_home_page_slide['#items'].entity.uri.value) }}); background-color: #2E3136; background-size: cover; background-position: center;">

{% if cap1 or cap2 or cap3 or link_q %}

	<div class="container position-relative z-index-1 h-100 py-3">

		<div class="row {{ pos }} h-100">

			<div class="col-lg-6">

			{% if cap1 or link_q %}

				<div class="d-flex flex-column align-items-center h-100">

				<h3 class="position-relative text-color-light text-5 line-height-5 font-weight-medium px-4 mb-2 appear-animation" data-appear-animation="fadeInDownShorter" data-plugin-options="{'minWindowWidth': 0}">

					<span class="position-absolute right-100pct top-50pct transform3dy-n50 opacity-3">

						<img src="/assets/img/slides/slide-title-border.png" class="w-auto appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="250" data-plugin-options="{'minWindowWidth': 0}" alt="" />

					</span>

					{{ cap1 }} {% if link_q %}<a href="{{ link }}" class="btn btn-modern btn-primary rounded-0 my-2" target="_blank">{{ linkTitle }}</a>{% endif %}<span class="position-relative"><span class="position-absolute left-50pct transform3dx-n50 top-0 mt-4"><img src="/assets/img/slides/slide-blue-line.png" class="w-auto appear-animation" data-appear-animation="fadeInLeftShorterPlus" data-appear-animation-delay="1000" data-plugin-options="{'minWindowWidth': 0}" alt="" /></span></span>

					<span class="position-absolute left-100pct top-50pct transform3dy-n50 opacity-3">

						<img src="/assets/img/slides/slide-title-border.png" class="w-auto appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="250" data-plugin-options="{'minWindowWidth': 0}" alt="" />

					</span>

				</h3>

			{% endif %}

			{% if cap2 %}

				<h1 class="text-color-light font-weight-extra-bold text-12 mb-3 appear-animation" data-appear-animation="blurIn" data-appear-animation-delay="500" data-plugin-options="{'minWindowWidth': 0}">{{ cap2 }}</h1>

			{% endif %}

			{% if cap3 %}

				<p class="text-4 text-color-light font-weight-light opacity-7 mb-0" data-plugin-animated-letters data-plugin-options="{'startDelay': 1000, 'minWindowWidth': 0}">{{ cap3 }}</p>

			{% endif %}

				</div>

			</div>

		</div>

	</div>

{% endif %}

</div>

<!-- Close Carousel Slide {{ paragraph.index }}-->

    {% endblock %}

{% endblock paragraph %}