<!DOCTYPE html>
<html id="XF" lang="{$xf.language.language_code}" dir="{$xf.language.text_direction}"
data-app="public"
data-template="{$template}"
data-container-key="{$containerKey}"
data-content-key="{$contentKey}"
data-logged-in="{{ $xf.visitor.user_id ? 'true' : 'false' }}"
data-cookie-prefix="{$xf.cookie.prefix}"
data-csrf="{{ csrf_token()|escape('js') }}"
class="has-no-js {{ $template ? 'template-' . $template : '' }}"
{{ $xf.runJobs ? ' data-run-jobs=""' : '' }}>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<xf:set var="$siteName" value="{$xf.options.boardTitle}" />
<xf:set var="$h1"><xf:h1 fallback="{$siteName}" /></xf:set>
<xf:set var="$description"><xf:description /></xf:set>
<title><xf:title formatter="%s | %s" fallback="{$xf.options.boardTitle}" page="{$pageNumber}" /></title>
<link rel="manifest" href="{{ base_url('webmanifest.php') }}">
<xf:if is="property('metaThemeColor')">
<meta name="theme-color" content="{{ parse_less_color(property('metaThemeColor')) }}" />
</xf:if>
<meta name="apple-mobile-web-app-title" content="{{ $xf.options.boardShortTitle ?: $xf.options.boardTitle }}">
<xf:if is="property('publicIconUrl')">
<link rel="apple-touch-icon" href="{{ base_url(property('publicIconUrl', true)) }}">
<xf:elseif is="property('publicMetadataLogoUrl')" />
<link rel="apple-touch-icon" href="{{ base_url(property('publicMetadataLogoUrl')) }}" />
</xf:if>
<xf:foreach loop="$head" value="$headTag">
{$headTag}
</xf:foreach>
<xf:if is="!$head.meta_site_name && $siteName is not empty">
<xf:macro template="metadata_macros" name="site_name" arg-siteName="{$siteName}" arg-output="{{ true }}" />
</xf:if>
<xf:if is="!$head.meta_type">
<xf:macro template="metadata_macros" name="type" arg-type="website" arg-output="{{ true }}" />
</xf:if>
<xf:if is="!$head.meta_title">
<xf:macro template="metadata_macros" name="title" arg-title="{{ page_title() ?: $siteName }}" arg-output="{{ true }}" />
</xf:if>
<xf:if is="!$head.meta_description && $description is not empty && $pageDescriptionMeta">
<xf:macro template="metadata_macros" name="description" arg-description="{$description}" arg-output="{{ true }}" />
</xf:if>
<xf:if is="!$head.meta_share_url">
<xf:macro template="metadata_macros" name="share_url" arg-shareUrl="{$xf.fullUri}" arg-output="{{ true }}" />
</xf:if>
<xf:if is="!$head.meta_image_url && property('publicMetadataLogoUrl')">
<xf:macro template="metadata_macros" name="image_url"
arg-imageUrl="{{ base_url(property('publicMetadataLogoUrl'), true) }}"
arg-output="{{ true }}" />
</xf:if>
<xf:macro template="helper_js_global" name="head" arg-app="public" />
<xf:if is="property('publicFaviconUrl')">
<link rel="icon" type="image/png" href="{{ base_url(property('publicFaviconUrl'), true) }}" sizes="32x32" />
</xf:if>
<xf:include template="google_analytics" />
</head>
<body data-template="{$template}">
<div style="width: 1000px; height: 220px; position:relative; background-color:#3f464e; border-radius:2px;">
<div id="carousel">
<div class="slides">
<xf:if is="$slides is not empty">
<xf:foreach loop="$slides" value="$review">
<div class="slide">
<xf:macro template="rating_macros" name="rating"
arg-name="stars_rating"
arg-currentRating="{$review.stars_rating}"
arg-deselectable="{{ false }}"
arg-row="{{ false }}"
arg-readOnly="{{ true }}" />
</div>
</xf:foreach>
<xf:else />
<div class="slide" style="color: #fff;">Currently no slides!</div>
</xf:if>
</div>
</div>
</div>
<xf:css>
#carousel {
width: 620px;
overflow: hidden;
position: relative;
margin-left: 305px;
}
.slides {
display: flex;
transition: transform 0.5s ease;
}
.slide {
flex-shrink: 0;
border: 1px solid red;
width: calc(50% - 10px);
height: 110px;
flex-shrink: 0;
margin-right: 10px;
margin-top: 48px;
}
</xf:css>
<xf:js>
let currentIndex = 0;
const slides = document.querySelectorAll('.slide');
const totalSlides = slides.length;
const slideWidth = slides[0].offsetWidth; // Get the width of the first slide
function nextSlide() {
currentIndex = (currentIndex + 2) % totalSlides;
updateCarousel();
}
function prevSlide() {
currentIndex = (currentIndex - 2 + totalSlides) % totalSlides;
updateCarousel();
}
function updateCarousel() {
const offset = -currentIndex * (slideWidth + 10); // Adjusted for margin
document.querySelector('.slides').style.transform = `translateX(${offset}px)`;
}
</xf:js>
</body>
</html>
