<!-- ### Begin: Element extension-news ### -->
<div id="c890" class="frame frame-default frame-type-extension-news 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="news-list-view" id="news-container-956">
<div class="article articletype-news" itemscope="itemscope" itemtype="http://schema.org/Article">
<!-- header -->
<div class="header">
<h3>
<a href="#">
<span itemprop="headline">News Title</span>
</a>
</h3>
</div>
<!-- media preview element -->
<div class="news-img-wrap">
<a href="#">
<picture>
<img loading="lazy" src="holder.js/400x300?auto=yes" width="400" height="300" intrinsicsize="400x300" title="Image Title" alt="Alternative Title" />
</picture>
</a>
</div>
<!-- teaser -->
<div class="teaser-text">
<div itemprop="description">
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<a class="more" href="#">Read more</a>
</div>
<!-- footer information -->
<div class="footer">
<p>
<!-- date -->
<span class="news-list-date">
<time itemprop="datePublished" datetime="2021-01-29">
29.01.2021
</time>
</span>
<!-- Tags -->
<span class="news-list-tags" itemprop="keywords">
Example tag
</span>
<!-- author -->
<span class="news-list-author">
Author: Max Mustermann
</span>
</p>
</div>
</div>
<div class="article articletype-news" itemscope="itemscope" itemtype="http://schema.org/Article">
<!-- header -->
<div class="header">
<h3>
<a href="#">
<span itemprop="headline">News Title</span>
</a>
</h3>
</div>
<!-- media preview element -->
<div class="news-img-wrap">
<a href="#">
<picture>
<img loading="lazy" src="holder.js/400x300?auto=yes" width="400" height="300" intrinsicsize="400x300" title="Image Title" alt="Alternative Title" />
</picture>
</a>
</div>
<!-- teaser -->
<div class="teaser-text">
<div itemprop="description">
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<a class="more" href="#">Read more</a>
</div>
<!-- footer information -->
<div class="footer">
<p>
<!-- date -->
<span class="news-list-date">
<time itemprop="datePublished" datetime="2021-01-29">
29.01.2021
</time>
</span>
<!-- Tags -->
<span class="news-list-tags" itemprop="keywords">
Example tag
</span>
<!-- author -->
<span class="news-list-author">
Author: Max Mustermann
</span>
</p>
</div>
</div>
<div class="article articletype-news" itemscope="itemscope" itemtype="http://schema.org/Article">
<!-- header -->
<div class="header">
<h3>
<a href="#">
<span itemprop="headline">News Title</span>
</a>
</h3>
</div>
<!-- media preview element -->
<div class="news-img-wrap">
<a href="#">
<picture>
<img loading="lazy" src="holder.js/400x300?auto=yes" width="400" height="300" intrinsicsize="400x300" title="Image Title" alt="Alternative Title" />
</picture>
</a>
</div>
<!-- teaser -->
<div class="teaser-text">
<div itemprop="description">
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<a class="more" href="#">Read more</a>
</div>
<!-- footer information -->
<div class="footer">
<p>
<!-- date -->
<span class="news-list-date">
<time itemprop="datePublished" datetime="2021-01-29">
29.01.2021
</time>
</span>
<!-- Tags -->
<span class="news-list-tags" itemprop="keywords">
Example tag
</span>
<!-- author -->
<span class="news-list-author">
Author: Max Mustermann
</span>
</p>
</div>
</div>
<div class="article articletype-news" itemscope="itemscope" itemtype="http://schema.org/Article">
<!-- header -->
<div class="header">
<h3>
<a href="#">
<span itemprop="headline">News Title</span>
</a>
</h3>
</div>
<!-- media preview element -->
<div class="news-img-wrap">
<a href="#">
<picture>
<img loading="lazy" src="holder.js/400x300?auto=yes" width="400" height="300" intrinsicsize="400x300" title="Image Title" alt="Alternative Title" />
</picture>
</a>
</div>
<!-- teaser -->
<div class="teaser-text">
<div itemprop="description">
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<a class="more" href="#">Read more</a>
</div>
<!-- footer information -->
<div class="footer">
<p>
<!-- date -->
<span class="news-list-date">
<time itemprop="datePublished" datetime="2021-01-29">
29.01.2021
</time>
</span>
<!-- Tags -->
<span class="news-list-tags" itemprop="keywords">
Example tag
</span>
<!-- author -->
<span class="news-list-author">
Author: Max Mustermann
</span>
</p>
</div>
</div>
<nav aria-label="...">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item active">
<a class="page-link" href="#">
1 <span class="sr-only">(current)</span>
</a>
</li>
<li class="page-item">
<a class="page-link" href="#">
2 </a>
</li>
<li class="page-item">
<a class="page-link" href="#">
3 </a>
</li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
<!-- ### End: Element extension-news ### -->
{% extends '@wrapper-frame' %}
{% import _self as list %}
{% set CType = 'extension-news' %}
{% set contentObjectDataUid = random(999) %}
{% macro item(newsItem, settings, iterator) %}
{% import '@macro-format' as format %}
{% import '@plugin-detail' as detail %}
{% if newsItem.istopnews %}
{% set class = ' topnews' %}
{% endif %}
{% set type = newsItem.type|default('news') %}
<div class="article articletype-{{ type }}{{ class }}"
itemscope="itemscope"
itemtype="http://schema.org/Article">
<!-- header -->
<div class="header">
<h3>
<a href="#">
<span itemprop="headline">{{ newsItem.title }}</span>
</a>
</h3>
</div>
<!-- media preview element -->
{% if newsItem.media %}
<div class="news-img-wrap">
<a href="#">
{% set mediaElement = newsItem.media[0] %}
{% if mediaElement.type == 'image' %}
{% include '@atom-image' with {
file: mediaElement
} %}
{% endif %}
{% if mediaElement.type == 'media' %}
{{ detail.mediaVideo(mediaElement, settings) }}
{% endif %}
</a>
</div>
{# TODO: {% else %}
{% if settings.displayDummyIfNoMedia %}
<div class="news-img-wrap">
<span class="no-media-element">
<n:link newsItem="{newsItem}" settings="{settings}" title="{newsItem.title}">
<f:image src="{settings.list.media.dummyImage}" title="" alt="" maxWidth="{f:if(condition: settings.media.maxWidth, then: settings.media.maxWidth, else: settings.list.media.image.maxWidth)}" maxHeight="{f:if(condition: settings.media.maxHeight, then: settings.media.maxHeight, else: settings.list.media.image.maxHeight)}"/>
</n:link>
</span>
</div>
{% endif %} #}
{% endif %}
<!-- teaser -->
<div class="teaser-text">
{% if newsItem.teaser %}
<div itemprop="description">
{% include template_from_string(newsItem.teaser) %}
</div>
{% else %}
<div itemprop="description">
{% include template_from_string(newsItem.bodytext) %}
</div>
{% endif %}
<a class="more" href="#">Read more</a>
</div>
<!-- footer information -->
<div class="footer">
<p>
<!-- date -->
<span class="news-list-date">
<time itemprop="datePublished"
datetime="{{ date|date('Y-m-d') }}">
{{ date|date('d.m.Y') }}
</time>
</span>
{% if newsItem.firstCategory %}
<!-- first category -->
<span class="news-list-category">
{{ newsItem.firstCategory.title }}
</span>
{% endif %}
{% if newsItem.tags %}
<!-- Tags -->
<span class="news-list-tags" itemprop="keywords">
{% for tag in newsItem.tags %}
{{ tag.title }}
{% endfor %}
</span>
{% endif %}
<!-- author -->
{% if newsItem.author %}
<span class="news-list-author">
Author: {{ newsItem.author }}
</span>
{% endif %}
</p>
</div>
</div>
{% endmacro %}
{% block main %}
{% if news %}
<div class="news-list-view"
id="news-container-{{ contentObjectDataUid }}">
{% if settings.hidePagination %}
{% for newsItem in news %}
{{ list.item(newsItem, settings, loop.index0) }}
{% endfor %}
{% else %}
{% for newsItem in news %}
{{ list.item(newsItem, settings, loop.index0) }}
{% endfor %}
{% include '@atom-pagination' with {
label: '...',
pages: 3,
active: 1,
prev: 'Previous',
next: 'Next',
icons: true,
prevDisabled: true
} %}
{% endif %}
</div>
{% else %}
<div class="no-news-found">
No news available.
</div>
{% endif %}
{% endblock %}
{
"settings": {
"backPid": true,
"detail": {
"showSocialShareButtons": true,
"media": {
"image": {
"lightbox": {
"enabled": true,
"width": null,
"height": null
}
}
}
},
"hidePagination": false
},
"news": [
{
"title": "News Title",
"datetime": "now",
"author": "Max Mustermann",
"teaser": "<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>\n",
"bodytext": "<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>\n<p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p>\n<p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>\n",
"media": [
{
"type": "image",
"holder": {
"width": 400,
"height": 300
},
"properties": {
"title": "Image Title",
"alternative": "Alternative Title",
"description": "Image description",
"link": null,
"link_target": "_blank"
}
},
{
"type": "media",
"url": "https://www.youtube-nocookie.com/embed/yiJjpKzCVE4?autohide=1&controls=1&rel=0&enablejsapi=1",
"properties": {
"title": "Media (iframe) Title",
"description": "Media (iframe) description"
}
},
{
"type": "media",
"url": "https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4",
"properties": {
"title": "Media (Video) Title",
"description": "Media (Video) description",
"autoplay": true,
"loop": false,
"muted": true
}
}
],
"categories": [
{
"title": "Example category"
}
],
"tags": [
{
"title": "Example tag"
}
]
},
{
"title": "News Title",
"datetime": "now",
"author": "Max Mustermann",
"teaser": "<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>\n",
"bodytext": "<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>\n<p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p>\n<p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>\n",
"media": [
{
"type": "image",
"holder": {
"width": 400,
"height": 300
},
"properties": {
"title": "Image Title",
"alternative": "Alternative Title",
"description": "Image description",
"link": null,
"link_target": "_blank"
}
},
{
"type": "media",
"url": "https://www.youtube-nocookie.com/embed/yiJjpKzCVE4?autohide=1&controls=1&rel=0&enablejsapi=1",
"properties": {
"title": "Media (iframe) Title",
"description": "Media (iframe) description"
}
},
{
"type": "media",
"url": "https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4",
"properties": {
"title": "Media (Video) Title",
"description": "Media (Video) description",
"autoplay": true,
"loop": false,
"muted": true
}
}
],
"categories": [
{
"title": "Example category"
}
],
"tags": [
{
"title": "Example tag"
}
]
},
{
"title": "News Title",
"datetime": "now",
"author": "Max Mustermann",
"teaser": "<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>\n",
"bodytext": "<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>\n<p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p>\n<p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>\n",
"media": [
{
"type": "image",
"holder": {
"width": 400,
"height": 300
},
"properties": {
"title": "Image Title",
"alternative": "Alternative Title",
"description": "Image description",
"link": null,
"link_target": "_blank"
}
},
{
"type": "media",
"url": "https://www.youtube-nocookie.com/embed/yiJjpKzCVE4?autohide=1&controls=1&rel=0&enablejsapi=1",
"properties": {
"title": "Media (iframe) Title",
"description": "Media (iframe) description"
}
},
{
"type": "media",
"url": "https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4",
"properties": {
"title": "Media (Video) Title",
"description": "Media (Video) description",
"autoplay": true,
"loop": false,
"muted": true
}
}
],
"categories": [
{
"title": "Example category"
}
],
"tags": [
{
"title": "Example tag"
}
]
},
{
"title": "News Title",
"datetime": "now",
"author": "Max Mustermann",
"teaser": "<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>\n",
"bodytext": "<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>\n<p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p>\n<p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>\n",
"media": [
{
"type": "image",
"holder": {
"width": 400,
"height": 300
},
"properties": {
"title": "Image Title",
"alternative": "Alternative Title",
"description": "Image description",
"link": null,
"link_target": "_blank"
}
},
{
"type": "media",
"url": "https://www.youtube-nocookie.com/embed/yiJjpKzCVE4?autohide=1&controls=1&rel=0&enablejsapi=1",
"properties": {
"title": "Media (iframe) Title",
"description": "Media (iframe) description"
}
},
{
"type": "media",
"url": "https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4",
"properties": {
"title": "Media (Video) Title",
"description": "Media (Video) description",
"autoplay": true,
"loop": false,
"muted": true
}
}
],
"categories": [
{
"title": "Example category"
}
],
"tags": [
{
"title": "Example tag"
}
]
}
]
}
.player,
.news-slider,
.news-slider-featured {
&-next,
&-prev {
@include position(absolute, null 60px -30px null);
width: 60px;
height: 60px;
align-items: center;
background: #FFFFFF;
box-shadow: $box-shadow-sm;
cursor: pointer;
display: flex;
justify-content: center;
transform: scale(.75);
transition: $transition-base;
z-index: 1;
@include hover-focus {
transform: scale(.9);
}
@include media-breakpoint-up(xl) {
transform: scale(1);
@include hover-focus {
transform: scale(1.1);
}
}
&::before {
display: block;
content: "";
}
}
&-next::before {
@extend .svg-arrow-right-20x20;
}
&-prev {
right: 120px;
@include media-breakpoint-up(xl) {
right: 130px;
}
&::before {
@extend .svg-arrow-left-20x20;
}
}
}
.news .article {
.news-list-date {
@include Rift-Regular;
letter-spacing: 1px;
}
.news-img-wrap img {
max-width: 100%;
}
}
.news-sponsor {
.gallery-row {
@include margin($grid-gutter-width -#{$grid-gutter-width/2} 0);
display: block;
white-space: nowrap;
text-align: center;
.gallery-item {
display: inline-flex;
justify-content: center;
padding: $grid-gutter-width/2;
vertical-align: middle;
img {
max-height: 5rem;
max-width: 8rem;
object-fit: contain;
}
}
}
&:not(.news-sponsor-slider) .gallery-row {
align-items: center;
display: flex;
justify-content: center;
}
// Cards
&-cards {
&:not(.news-sponsor-slider) .gallery-row {
align-items: stretch;
}
.news-img-wrap {
height: 100%;
width: 100%;
a {
align-items: center;
background: none;
border: $border-width solid $border-color;
display: flex;
height: 100%;
justify-content: center;
padding: $grid-gutter-width/3;
width: 100%;
}
}
}
// Slider
&-slider .gallery-row {
transform: translateX(calc(var(--offset) * calc(-100% / var(--cols))));
--duration: 1500;
--timeout: 2000;
--cols: 2;
@include media-breakpoint-up('sm') {
--timeout: 3000;
--cols: 3;
}
@include media-breakpoint-up('md') {
--timeout: 6000;
--cols: 6;
}
.gallery-item {
--col: 0;
$colDelay: 200;
--itemDuration: calc((var(--duration) - var(--cols) * #{$colDelay}) * 1ms);
opacity: 0;
&.animate-in {
animation: logoBarItemIn cubic-bezier(0.5, 1, 0.89, 1) both;
animation-duration: var(--itemDuration);
animation-delay : calc(var(--col) * #{$colDelay * 1ms});
}
&.animate-out {
animation: logoBarItemOut cubic-bezier(0.11, 0, 0.5, 0) both;
animation-duration: var(--itemDuration);
animation-delay : calc(var(--col) * #{$colDelay * 1ms});
}
}
}
}
@keyframes logoBarItemIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes logoBarItemOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.news-slider {
.card {
height: auto;
opacity: .4;
pointer-events: none;
transition: $transition-fade;
.btn {
@extend .btn-primary;
}
&.topnews {
&, a {
@include plain-hover-focus {
color: $white;
}
}
.card-body {
background-color: $primary;
}
.news-list-date,
.card-text {
opacity: .7;
}
.btn {
@extend .btn-secondary;
}
}
&.swiper-slide-active,
&.swiper-slide-next {
opacity: 1;
pointer-events: visible;
}
}
}
@include media-breakpoint-up(md) {
.magic-cape {
position: relative;
align-items: center;
display: flex;
padding-right: $grid-gutter-width*1.5;
&::before {
background: $white;
content: "";
@include position(absolute, -30px 15px -30px null);
width: 50vw;
z-index: 5;
}
&::after {
content: "";
@include position(absolute, -30px -5px -30px #{calc(100% - 15px)});
z-index: 5;
background: linear-gradient(270deg, transparent, $white);
}
.content {
position: relative;
z-index: 6;
}
}
}
.frame-type-plugin-news_pi1 {
overflow: hidden;
}
.news-slider-featured {
.article {
position: relative;
&::after {
content: "";
pointer-events: none;
background: linear-gradient(0deg, rgba($black, .7), transparent);
@include position(absolute, 30% 0 0);
}
a {
color: $white;
}
img {
height: auto;
max-width: 100%;
filter: grayscale(100%);
transition: $transition-base;
}
.news-list-date {
@include Rift-Regular;
}
.news-headline {
@include Rift-Bold;
font-size: $h4-font-size;
display: block;
color: $white;
margin-bottom: 0;
}
.content {
@include position(absolute, null 0 0 0);
opacity: 0;
z-index: 1;
padding: $grid-gutter-width;
transition: $transition-fade;
}
// Desktop
@include media-breakpoint-up(md) {
.news-headline {
font-size: $h2-font-size;
}
.content {
@include position(absolute, null 40% 0 0);
padding: $grid-gutter-width*2;
}
}
}
.swiper-slide {
&::before {
content: "";
background: rgba($white, .5);
@include position(absolute, 0);
pointer-events: none;
transition: $transition-fade;
z-index: 2;
}
&-active {
&::before {
opacity: 0;
}
img {
filter: grayscale(0%);
}
.content {
opacity: 1;
}
}
}
}
class LogoBar {
constructor(node) {
this.node = node;
this.container = node.querySelector('.gallery-row');
this.items = Array.from(this.container.querySelectorAll('.gallery-item'));
this.container.style.setProperty('--length', this.items.length);
this.offset = 0;
this.tick();
}
getCSSProps(defaults = {}) {
const style = getComputedStyle(this.container);
const result = {};
Object.keys(defaults).map((key) => {
result[key] = parseInt(style.getPropertyValue(`--${key}`), 10) || defaults[key];
});
return result;
}
tick() {
let { offset } = this;
const { cols, timeout, duration } = this.getCSSProps({
cols: 1,
duration: 300,
timeout: 1000,
});
this.container.style.setProperty('--offset', offset);
let outItems = [];
this.items.forEach((item, index) => {
item.classList.toggle('animate-out', false);
if (index >= offset && index < offset + cols) {
item.style.setProperty('--col', index - offset);
item.classList.toggle('animate-in', true);
outItems.push(item);
}
});
offset = offset + cols;
if (offset >= this.items.length) {
offset = 0;
}
this.offset = offset;
setTimeout(() => {
outItems.forEach((item) => {
item.classList.toggle('animate-in', false);
item.classList.toggle('animate-out', true);
});
}, timeout - duration - 1);
setTimeout(this.tick.bind(this), timeout);
}
}
window.addEventListener('DOMContentLoaded', () => {
Array.from(document.querySelectorAll('.news-sponsor-slider'), (frame) => {
new LogoBar(frame);
});
});
import Swiper, { Navigation } from 'swiper';
$(() => {
Swiper.use([Navigation]);
let swiper = new Swiper('.news-slider', {
slidesPerView: 1.0001, //how to fix https://stackoverflow.com/questions/38406690/swiper-slides-showing-end-start-of-previous-next-slides-like-airbnb-slider
spaceBetween: 30,
loop: true,
speed: 900,
breakpoints: {
992: {
slidesPerView: 2.0001,
},
},
autoplay: {
delay: 5000,
disableOnInteraction: false,
},
navigation: {
nextEl: '.news-slider-next',
prevEl: '.news-slider-prev',
},
observer: true,
observeParents: true,
});
let swiperFeatured = new Swiper('.news-slider-featured', {
slidesPerView: 1.0001,
spaceBetween: 30,
centeredSlides: true,
loop: true,
speed: 900,
autoplay: {
delay: 5000,
disableOnInteraction: false,
},
navigation: {
nextEl: '.news-slider-featured-next',
prevEl: '.news-slider-featured-prev',
},
observer: true,
observeParents: true,
});
});
No notes defined.