<div class="slider-container rev_slider_wrapper mb-5" style="height: 670px;">

  <div id="revolutionSlider" class="slider rev_slider" data-version="5.4.8" data-plugin-revolution-slider data-plugin-options="{'delay': 10000, 'stopLoop': 'on', 'stopAfterLoops': 1, 'stopAtSlide': 1, 'gridwidth': 1170, 'gridheight': 630, 'disableProgressBar': 'on', 'responsiveLevels': [4096,1200,992,500], 'parallax': { 'type': 'scroll', 'origo': 'enterpoint', 'speed': 1000, 'levels': [2,3,4,5,6,7,8,9,12,50], 'disable_onmobile': 'on' }, 'navigation' : {'arrows': { 'enable': true }, 'bullets': {'enable': true, 'style': 'bullets-style-1', 'h_align': 'center', 'v_align': 'bottom', 'space': 7, 'v_offset': 70, 'h_offset': 0}}}">

      <ul>

        {% for item in items %}

        {{ item.content }}

        {% endfor %}

        </ul>

  </div>

</div>

 
{{ attach_library('hcann_subtheme/revo-slider') }}

{% set show = paragraph.field_show_image_or_video.value %}

{% set oLevel = paragraph.field_slide_overlay_level.value %}

{% set oColor = paragraph.field_slide_overlay_color.value %}

{% set tran = paragraph.field_revo_transition.value %}

{% set imgPath = file_url(content.field_revo_slider_image['#items'].entity.uri.value) %}

{% set alt = content.field_revo_slider_image['#items'].alt %}

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

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

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

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

{% set yid = paragraph.field_youtube_id.value %}

{% set vid = file_url(content.field_video_upload['#items'].entity.uri.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'] %}

{% set captionpos = paragraph.field_revo_caption_position.value %}

{% set capx = captionpos|render|trim|split('_')[0] %}

{% set capy = captionpos|render|trim|split('_')[1] %}

{% set ken_burns = paragraph.field_ken_burns.value %}

{% set capCol = paragraph.field_text_color.value %}

{% set bTheme = paragraph.field_theme_color.value %}
{% block paragraph %}

    {% block content %}

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

{% if show == "show_image" %}
	<li class="{% if oLevel %}slide-overlay {{ oLevel }}{% endif %} {{ oColor }}" data-transition="{{ tran }}">

		<!-- MAIN IMAGE -->
		{% if ken_burns == "ken_burns" %}

		<img src="{{ imgPath }}" alt="{{ alt }}" data-bgposition="center center" data-kenburns="on" data-duration="10000" data-ease="Linear.easeNone" data-scalestart="100" data-scaleend="120" data-rotatestart="0" data-rotateend="0" data-offsetstart="0 0" data-offsetend="0 0" data-bgparallax="" class="rev-slidebg" data-no-retina>

		{% else %}

		<img src="{{ imgPath }}" alt="{{ alt }}" data-transition="{{ tran }}">

		{% endif %}

		<!-- LAYERS -->
		<!-- LAYER NR. 18 -->

		<div class="tp-caption tp-resizeme"

			id="slide-1600-layer"

			data-x="{{ capx }}"

			data-y="{{ capy }}"

			data-start=""

			data-type="text"

			data-responsive_offset="on"

			data-frames='[{"from":"z:0;rX:0;rY:0;rZ:0;sX:0.9;sY:0.9;skX:0;skY:0;opacity:0;","speed":2500,"to":"o:1;","delay":1500,"ease":"Power3.easeInOut"},{"delay":"bytrigger","speed":700,"to":"y:-50px;opacity:0;","ease":"Power3.easeInOut"}]'

		>

			{{ include('@hcann_subtheme/includes/revo-caption.html.twig') }}

		</div>

	</li>
{% elseif show == "show_youtube" %}

	{% if yid %}
	<!--START YOUTUBE-->

		<!-- BEGIN SLIDE -->

	<li>

		<!-- LAYERS -->

		<!-- LAYER NR. 3 -->

		<div class="tp-caption tp-resizeme fullscreenvideo tp-videolayer"

			id="slide-{{ paragraph.index }}-layer-3"

			data-type="video"

			data-responsive_offset="on"

			data-frames='[{"speed":1000,"to":"o:1;","delay":1000,"ease":"Power1.easeInOut"},{"delay":"wait","speed":1000,"ease":"nothing"}]'

			data-ytid="{{ yid }}"

			data-videoattributes="version=3&enablejsapi=1&html5=1&hd=1&wmode=opaque&showinfo=0&rel=0&

         origin={{ url('<front>') }}"

			data-videorate="1"

			data-videowidth="100%"

			data-videoheight="100%"

			data-videocontrols="none"

			data-videoloop="loopandnoslidestop"

			data-forceCover="1"

			data-aspectratio="16:9"

			data-autoplay="true"

			data-nextslideatend="true"

			data-volume="mute"

			data-forcerewind="on">

		</div>
 		 <!-- LAYER NR. 7 -->

        <div class="tp-caption tp-resizeme"

			id="slide-{{ paragraph.index }}-layer-5"

			data-x="{{ capx }}"

			data-y="{{ capy }}"

			data-start=""

            data-type="text"

            data-responsive_offset="on"

            data-frames='[{"from":"z:0;rX:0;rY:0;rZ:0;sX:0.9;sY:0.9;skX:0;skY:0;opacity:0;","speed":2500,"to":"o:1;","delay":1500,"ease":"Power3.easeInOut"},{"delay":"bytrigger","speed":700,"to":"y:-50px;opacity:0;","ease":"Power3.easeInOut"}]'

            data-lasttriggerstate="reset"

			>

			{{ include('@hcann_subtheme/includes/revo-caption.html.twig') }}

		</div>

    </li>

	<!--END YOUTUBE-->

	{% endif %}

{% elseif show == "show_video" %}

		<li>

			<!-- required for background video, and will serve as the video's "poster/cover" image -->

			<img src="/themes/custom/hcann_subtheme/assets/img/slides/transparent.png"

				alt="MP4 video"

				class="rev-slidebg"

				data-bgposition="center center"

				data-bgfit="cover"

				data-bgrepeat="no-repeat">

			<!-- HTML5 BACKGROUND VIDEO LAYER -->

			<div class="rs-background-video-layer"

				data-videomp4="{{ vid }}"

				data-videopreload="auto"

				data-autoplay="on"

				data-volume="mute"

				data-forcerewind="on"

				data-nextslideatend="true"

				data-videoloop="loopandnoslidestop"

			>

			</div>

			{# CAPTION #}

			<div class="tp-caption tp-resizeme"

				id="slide-{{ paragraph.index }}-layer-5"

				data-x="{{ capx }}"

				data-y="{{ capy }}"

				data-type="text"

				data-start=""

				data-responsive_offset="on"

				data-frames='[{"from":"z:0;rX:0;rY:0;rZ:0;sX:0.9;sY:0.9;skX:0;skY:0;opacity:0;","speed":2500,"to":"o:1;","delay":1500,"ease":"Power3.easeInOut"},{"delay":"bytrigger","speed":700,"to":"y:-50px;opacity:0;","ease":"Power3.easeInOut"}]'

				data-lasttriggerstate="reset"

			>

			{{ include('@hcann_subtheme/includes/revo-caption.html.twig') }}

			</div>

		</li>

{% endif %}

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

    {% endblock %}

{% endblock paragraph %}

{# See Builder Notes for Tansitions: admin/structure/paragraphs_type/revo_slider/form-display #}

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

    <div class="px-2 py-3 text-center revoCaptions">

        {% if cap1 %}<h3 class="{{ capCol }} text-center ">{{ cap1 }}</h3>{% endif %}

            {% if cap2 %}

        <div class="inlineX {{ capCol }}"><p class="{{ capCol }}">&#9605;&#9605;</p><h1 class="{{ capCol }} text-center fw-bolder my-lg-2 px-2">{{ cap2 }}</h1><p class="{{ capCol }}">&#9605;&#9605;</p></div>

            {% endif %}

        {% if cap3 %}<p class="{{ capCol }} text-center">{{ cap3 }}</p>{% endif %}

        {% if link_q %}<a href="{{ link }}" class="d-none d-lg-block btn btn-modern btn-{{ bTheme }} rounded-0 my-2" target="_blank">{{ linkTitle }}</a>{% endif %}

    </div>

{% endif %}