Portfolio - Components

View All Components

Component: Inner Slider

Features:

  1. add images to slider

Notes:

  1. uses owl carousel


 

Watch Short Video

Inner Slider

class
build
field--inner-slider-repeater.html.twig

 
<div class="row"> <!-- open inner slider -->

		<div class="col appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="300">

			<div class="owl-carousel owl-theme nav-inside nav-inside-edge nav-squared nav-with-transparency nav-dark nav-lg d-block overflow-hidden" data-plugin-options="{'items': 1, 'margin': 10, 'loop': false, 'nav': true, 'dots': false, 'autoHeight': true}" style="height: 510px;">

{% for item in items %}

{{ item.content }}

{% endfor %}

        </div>

    </div>

</div> <!-- close inner slider -->
paragraph--inner-slider.html.twig

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

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

{% block paragraph %}

    {% block content %}

    <div>

      <div class="img-thumbnail border-0 border-radius-0 p-0 d-block">

        <img src="{{ imgPath }}" class="img-fluid border-radius-0" alt="{{ alt }}">

      </div>

    </div>

    {% endblock %}

{% endblock paragraph %}