DIA Frontend

Swiper 

<!-- ### Begin: Element swiper ### -->
<div id="c680" class="frame frame-default frame-type-swiper frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none">
    <div class="frame-container">
        <div class="frame-inner">

            <div class="swiper-container gallery-top">
                <div class="swiper-wrapper">

                    <div class="swiper-slide" style="background-image: url(../../common/img/dummy-images/adrian-5jw9OQOQ29c-unsplash.jpg)"></div>

                    <div class="swiper-slide" style="background-image: url(../../common/img/dummy-images/adrian-FlwhX4vtzt0-unsplash.jpg)"></div>

                    <div class="swiper-slide" style="background-image: url(../../common/img/dummy-images/adrian-LA6EufpEUv0-unsplash.jpg)"></div>

                    <div class="swiper-slide holderjs" data-background-src="?holder.js/6000x4000?auto=yes&text=3:2&theme=sky"></div>

                    <div class="swiper-slide holderjs" data-background-src="?holder.js/6000x4000?auto=yes&text=3:2&theme=vine"></div>

                    <div class="swiper-slide holderjs" data-background-src="?holder.js/6000x4000?auto=yes&text=3:2&theme=social"></div>

                    <div class="swiper-slide holderjs" data-background-src="?holder.js/6000x4000?auto=yes&text=3:2&theme=gray"></div>

                    <div class="swiper-slide holderjs" data-background-src="?holder.js/6000x4000?auto=yes&text=3:2&theme=industrial"></div>

                    <div class="swiper-slide holderjs" data-background-src="?holder.js/6000x4000?auto=yes&text=3:2&theme=lava"></div>

                </div>
                <!-- Add Arrows -->
                <div class="swiper-button-next swiper-button-white"></div>
                <div class="swiper-button-prev swiper-button-white"></div>
            </div>
            <div class="swiper-container gallery-thumbs">
                <div class="swiper-wrapper">

                    <div class="swiper-slide" style="background-image: url(../../common/img/dummy-images/adrian-5jw9OQOQ29c-unsplash.jpg)"></div>

                    <div class="swiper-slide" style="background-image: url(../../common/img/dummy-images/adrian-FlwhX4vtzt0-unsplash.jpg)"></div>

                    <div class="swiper-slide" style="background-image: url(../../common/img/dummy-images/adrian-LA6EufpEUv0-unsplash.jpg)"></div>

                    <div class="swiper-slide holderjs" data-background-src="?holder.js/6000x4000?auto=yes&text=3:2&theme=sky"></div>

                    <div class="swiper-slide holderjs" data-background-src="?holder.js/6000x4000?auto=yes&text=3:2&theme=vine"></div>

                    <div class="swiper-slide holderjs" data-background-src="?holder.js/6000x4000?auto=yes&text=3:2&theme=social"></div>

                    <div class="swiper-slide holderjs" data-background-src="?holder.js/6000x4000?auto=yes&text=3:2&theme=gray"></div>

                    <div class="swiper-slide holderjs" data-background-src="?holder.js/6000x4000?auto=yes&text=3:2&theme=industrial"></div>

                    <div class="swiper-slide holderjs" data-background-src="?holder.js/6000x4000?auto=yes&text=3:2&theme=lava"></div>

                </div>
            </div>
        </div>
    </div>
</div>
<!-- ### End: Element swiper ### -->
 
{% extends images ? '@wrapper-frame' : '@wrapper-empty' %}

{% set CType = 'swiper' %}

{% import '@macro-img' as img %}

{% block main %}
    {% include '@atom-header' %}

    <div class="swiper-container gallery-top">
        <div class="swiper-wrapper">
            {% for image in images %}
                {# holderjs special #}
                {% if image.holder.width and image.holder.height and not image.url %}
                    {% set holder = true %}
                {% endif %}

                <div class="swiper-slide{% if holder %} holderjs{% endif %}"
                    {% if holder %}
                        data-background-src="?{{ img.src(image) }}"
                    {% else %}
                        style="background-image: url({{ img.src(image) }})"
                    {% endif %}
                ></div>
                {# <img class="img-fluid" src="{{ image.src }}" alt="{{ image.alt }}" title="{{ image.title }}"> #}
            {% endfor %}
        </div>
        <!-- Add Arrows -->
        <div class="swiper-button-next swiper-button-white"></div>
        <div class="swiper-button-prev swiper-button-white"></div>
    </div>
    <div class="swiper-container gallery-thumbs">
        <div class="swiper-wrapper">
            {% for image in images %}
                {# holderjs special #}
                {% if image.holder.width and image.holder.height and not image.url %}
                    {% set holder = true %}
                {% endif %}

                <div class="swiper-slide{% if holder %} holderjs{% endif %}"
                    {% if holder %}
                        data-background-src="?{{ img.src(image) }}"
                    {% else %}
                        style="background-image: url({{ img.src(image) }})"
                    {% endif %}
                ></div>
                {# <img class="img-fluid" src="{{ image.src }}" alt="{{ image.alt }}" title="{{ image.title }}"> #}
            {% endfor %}
        </div>
    </div>
{% endblock %}
 
{
  "bodytext": null,
  "categories": null,
  "CType": null,
  "customId": null,
  "date": null,
  "frame_class": null,
  "header": null,
  "header_color": null,
  "header_layout": 2,
  "header_link": null,
  "header_position": null,
  "header_style": null,
  "layout": null,
  "space_after_class": null,
  "space_before_class": null,
  "space_inner_after_class": null,
  "space_inner_before_class": null,
  "subheader": null,
  "target": null,
  "images": [
    {
      "url": "../../common/img/dummy-images/adrian-5jw9OQOQ29c-unsplash.jpg"
    },
    {
      "url": "../../common/img/dummy-images/adrian-FlwhX4vtzt0-unsplash.jpg"
    },
    {
      "url": "../../common/img/dummy-images/adrian-LA6EufpEUv0-unsplash.jpg"
    },
    {
      "holder": {
        "width": 6000,
        "height": 4000,
        "text": "3:2",
        "theme": "sky"
      }
    },
    {
      "holder": {
        "width": 6000,
        "height": 4000,
        "text": "3:2",
        "theme": "vine"
      }
    },
    {
      "holder": {
        "width": 6000,
        "height": 4000,
        "text": "3:2",
        "theme": "social"
      }
    },
    {
      "holder": {
        "width": 6000,
        "height": 4000,
        "text": "3:2",
        "theme": "gray"
      }
    },
    {
      "holder": {
        "width": 6000,
        "height": 4000,
        "text": "3:2",
        "theme": "industrial"
      }
    },
    {
      "holder": {
        "width": 6000,
        "height": 4000,
        "text": "3:2",
        "theme": "lava"
      }
    }
  ]
}
  • Content: 
    // Import Swiper
@import "~swiper/swiper";

.frame-type-swiper {
  height: 100vh;

  .frame-container,
  .frame-inner {
    height: 100%;
  }
}

.swiper-container {
  width: 100%;
}

.swiper-slide {
  background-position: center;
  background-size: cover;

  // fix for holderjs
  &.holderjs {
    background-size: cover !important;
  }
}

.gallery-top {
  height: 80%;
}

.gallery-thumbs {
  box-sizing: border-box;
  height: 20%;
  padding: $grid-gutter-width 0 0;

  .swiper-slide {
    height: 100%;
    opacity: 0.4;
    transition: $transition-fade;
    width: 25%;
  }

  .swiper-slide-thumb-active {
    opacity: 1;
  }
}
  • URL: /components/raw/frame-swiper/_swiper.scss
  • Filesystem Path: ../template/components/03-typo3/frame/06-special-elements/swiper/_swiper.scss
  • Size: 630 Bytes
  • Content: 
    import Swiper from "swiper";

$(() => {
  let galleryThumbs = new Swiper(".gallery-thumbs", {
      spaceBetween: 30,
      slidesPerView: 4,
      freeMode: true,
      watchSlidesVisibility: true,
      watchSlidesProgress: true,
    }),
    galleryTop = new Swiper(".gallery-top", {
      spaceBetween: 30,
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      thumbs: {
        swiper: galleryThumbs,
      },
    });
});
  • URL: /components/raw/frame-swiper/script.js
  • Filesystem Path: ../template/components/03-typo3/frame/06-special-elements/swiper/script.js
  • Size: 485 Bytes

No notes defined.