We use the element – but leave the autorotation disabled by Enfold. The selection that it functions as a slider remains.
However, we set two user-defined classes
enable-custom-slider this is to check if we do not use the enfold settings for the slider. And activate our own script.
columns-X incicates the number of columns that should be shown in viewport
e.g: columns-5 (see example)
with custom class: enable-custom-slider and columns-5
images are smaller because there is a gap of 50px
Enfold normal behaviour with no trigger classes
/* ==== unfortunately necessary, because Enfold sets the transition to none inline when the autoration is turned off. ==== */
#top .enable-custom-slider .slide-entry-wrap {
transition: transform 2s ease !important;
gap: 50px; /* === you can setup via css a gap here ( Distance between the elments )==== */
}
#top .enable-custom-slider .slide-entry-wrap .av-partner-fake-img {
background-position: center center;
}
/* === for those images with links - you can set your own rule: === */
#top .enable-custom-slider .slide-image {
background-color: #efefef;
}function manipulate_dom_content_slider(){
?>
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", function () {
(function($) {
// --- Iteriere über jeden avia-logo-element-container ---
// Dies stellt sicher, dass wir nur die spezifischen Slider bearbeiten, die unsere Klassen haben.
$('.avia-logo-element-container').each(function() {
const $logoContainer = $(this); // Der aktuelle Container in der Schleife
// Prüfe, ob dieser spezifische Container die Aktivierungsklasse hat
if (!$logoContainer.hasClass('enable-custom-slider')) {
console.log('Custom Slider: (Instance Check) Container without "enable-custom-slider" class. Skipping this instance.');
return true; // continue in jQuery's .each() loop
}
console.log('Custom Slider: (Instance Check) "enable-custom-slider" class found on this container. Initializing instance.');
// --- Variablen für diese spezifische Slider-Instanz ---
let initialColumnsFromClass = 5;
const classList = $logoContainer[0].className;
const columnsMatch = classList.match(/columns-(\d+)/);
if (columnsMatch && columnsMatch[1]) {
const parsedColumns = parseInt(columnsMatch[1], 10);
if (!isNaN(parsedColumns) && parsedColumns > 0) {
initialColumnsFromClass = parsedColumns;
} else {
console.warn('Custom Slider: (Instance) Found column count in "columns-X" is invalid. Using fallback value.');
}
} else {
console.log('Custom Slider: (Instance) No "columns-X" class found. Using fallback value.');
}
console.log('Custom Slider: (Instance) Initial columns from class (or fallback):', initialColumnsFromClass);
// Finde den zugehörigen avia-content-slider-inner innerhalb DIESES Containers
const $sliderInnerWrapper = $logoContainer.find('.avia-content-slider-inner');
if ($sliderInnerWrapper.length === 0) {
console.log('Custom Slider: (Instance) .avia-content-slider-inner not found within this container. Skipping instance.');
return true; // continue
}
// --- Autoplay-Intervall für diese Instanz ---
let slideIntervalMs = 2500;
const slideshowOptionsData = $sliderInnerWrapper.data('slideshow-options');
if (slideshowOptionsData) {
try {
const options = (typeof slideshowOptionsData === 'object') ? slideshowOptionsData : JSON.parse(slideshowOptionsData);
if (options.hasOwnProperty('interval')) {
slideIntervalMs = options.interval * 1000;
console.log('Custom Slider: (Instance) Autoplay interval read from data-slideshow-options:', options.interval + ' seconds (' + slideIntervalMs + ' ms)');
} else {
console.log('Custom Slider: (Instance) Autoplay interval (interval) not found in data-slideshow-options. Using default:', slideIntervalMs + ' ms');
}
} catch (e) {
console.error('Custom Slider: (Instance) Error parsing data-slideshow-options or reading interval:', e);
console.log('Custom Slider: (Instance) Using default autoplay interval:', slideIntervalMs + ' ms');
}
} else {
console.log('Custom Slider: (Instance) data-slideshow-options not found. Using default autoplay interval:', slideIntervalMs + ' ms');
}
// --- Konsolidierung der Slides in den ersten Wrapper für diese Instanz ---
const $allSlides = $sliderInnerWrapper.find('.slide-entry-wrap .slide-entry');
let $firstSlideWrapper = $sliderInnerWrapper.find('.slide-entry-wrap:first');
if ($firstSlideWrapper.length === 0) {
console.warn('Custom Slider: (Instance) No .slide-entry-wrap:first found. Attempting to create one.');
const $potentialSlideParent = $sliderInnerWrapper;
if ($potentialSlideParent.length) {
$potentialSlideParent.append('<div class="slide-entry-wrap"></div>');
$firstSlideWrapper = $potentialSlideParent.find('.slide-entry-wrap:first');
}
if ($firstSlideWrapper.length === 0) {
console.error('Custom Slider: (Instance) Critical error: Could not find/create a .slide-entry-wrap for slides. Skipping instance.');
return true; // continue
}
}
$allSlides.each( function() {
$(this).detach().appendTo($firstSlideWrapper);
});
$sliderInnerWrapper.find('.slide-entry-wrap:empty').remove();
const $slideContainer = $sliderInnerWrapper.find('.slide-entry-wrap');
if ($slideContainer.length === 0) {
console.log('Custom Slider: (Instance) No consolidated .slide-entry-wrap found. Skipping instance.');
return true; // continue
}
const $slides = $slideContainer.find('.slide-entry');
const numSlides = $slides.length;
console.log('Custom Slider: (Instance) Total number of slides after consolidation:', numSlides);
if (numSlides === 0) {
console.log('Custom Slider: (Instance) No slides found. Skipping instance.');
return true;
}
// --- Ermittlung des Gap-Wertes (einmalig, da CSS-basiert) ---
let gapValue = 0;
try {
const computedStyle = window.getComputedStyle($slideContainer[0]);
const gapProperty = computedStyle.columnGap || computedStyle.gap;
if (gapProperty && gapProperty.endsWith('px')) {
gapValue = parseFloat(gapProperty);
} else if (gapProperty === 'normal' || gapProperty === '0px' || gapProperty === '0') {
gapValue = 0;
}
} catch (e) {
console.error('Custom Slider: (Instance) Error reading gap value:', e);
}
if (isNaN(gapValue) || gapValue < 0) {
gapValue = 0;
}
console.log('Custom Slider: (Instance) Determined gapValue:', gapValue + 'px');
// --- WICHTIG: currentVisibleColumns muss außerhalb der Funktion sein,
// wenn gotoSlide sie direkt nutzen soll
let currentVisibleColumns = initialColumnsFromClass;
// --- Funktion zur Berechnung und Anwendung der Flex-Basis & Spaltenanzahl ---
function updateResponsiveColumns() {
const oldVisibleColumns = currentVisibleColumns;
console.log(`Custom Slider: (Instance) (updateResponsiveColumns) Current window.innerWidth: ${window.innerWidth}px`);
if (window.innerWidth < 480) {
currentVisibleColumns = 2;
console.log('Custom Slider: (Instance) (updateResponsiveColumns) Screen width < 480px. Setting visible columns to 2.');
} else if (window.innerWidth < 768) {
currentVisibleColumns = 3;
console.log('Custom Slider: (Instance) (updateResponsiveColumns) Screen width < 768px. Setting visible columns to 3.');
} else if (window.innerWidth < 1024) {
currentVisibleColumns = 4;
console.log('Custom Slider: (Instance) (updateResponsiveColumns) Screen width < 1024px. Setting visible columns to 4.');
} else {
currentVisibleColumns = initialColumnsFromClass;
console.log('Custom Slider: (Instance) (updateResponsiveColumns) Screen width >= 1024px. Using initial columns from class:', initialColumnsFromClass);
}
console.log('Custom Slider: (Instance) (updateResponsiveColumns) Final currentVisibleColumns for this size:', currentVisibleColumns);
const dynamicFlexBasis = `calc((100% / ${currentVisibleColumns}) - ((${currentVisibleColumns} - 1) * ${gapValue}px / ${currentVisibleColumns}))`;
console.log('Custom Slider: (Instance) (updateResponsiveColumns) Calculated dynamicFlexBasis:', dynamicFlexBasis);
$slides.each(function() {
const slideElement = this;
slideElement.style.setProperty('flex', `1 0 ${dynamicFlexBasis}`, 'important');
slideElement.style.setProperty('width', 'unset', 'important');
slideElement.style.setProperty('box-sizing', 'border-box', 'important');
slideElement.style.setProperty('margin-right', '0px', 'important');
slideElement.style.setProperty('margin-left', '0px', 'important');
slideElement.style.setProperty('padding-left', '0px', 'important');
slideElement.style.setProperty('padding-right', '0px', 'important');
});
const maxScrollIndex = numSlides - currentVisibleColumns;
console.log(`Custom Slider: (Instance) (updateResponsiveColumns) numSlides: ${numSlides}, currentVisibleColumns: ${currentVisibleColumns}, maxScrollIndex: ${maxScrollIndex}`);
if (maxScrollIndex <= 0) {
$sliderInnerWrapper[0].style.setProperty('overflow', 'visible', 'important');
$sliderInnerWrapper[0].style.setProperty('height', 'auto', 'important');
$slideContainer[0].style.setProperty('justify-content', 'center', 'important'); // Use $slideContainer here
console.log('Custom Slider: (Instance) (updateResponsiveColumns) Not enough slides for scrolling. Centering items. Returns false.');
return false;
} else {
$sliderInnerWrapper[0].style.setProperty('overflow', 'hidden', 'important');
$sliderInnerWrapper[0].style.setProperty('height', 'auto', 'important');
$slideContainer[0].style.setProperty('justify-content', 'flex-start', 'important'); // Use $slideContainer here
console.log('Custom Slider: (Instance) (updateResponsiveColumns) Slider is scrollable. Returns true.');
return true;
}
}
const isInitialScrollable = updateResponsiveColumns();
// --- Styles für den Slide-Container (einmalig, da diese unabhängig von Spalten sind) ---
setTimeout(() => {
$slideContainer[0].style.setProperty('will-change', 'transform', 'important');
$slideContainer[0].style.setProperty('display', 'flex', 'important');
$slideContainer[0].style.setProperty('flex-wrap', 'nowrap', 'important');
console.log('Custom Slider: (Instance) Critical CSS styles re-applied to slideContainerElement after 300ms timeout.');
}, 300);
// --- Slider-Animationslogik ---
let currentSlideIndex = 0;
let autoPlayDirection = 1;
let autoSlideInterval;
function gotoSlide(index) {
const maxIndex = numSlides - currentVisibleColumns;
console.log(`Custom Slider: (Instance) (gotoSlide) Attempting to go to index: ${index}, maxIndex (derived from currentVisibleColumns): ${maxIndex}`);
if (maxIndex <= 0) {
console.log('Custom Slider: (Instance) (gotoSlide) Not scrollable, cannot move.');
currentSlideIndex = 0;
const targetSlide = $slides.eq(currentSlideIndex)[0];
const offset = targetSlide ? targetSlide.offsetLeft : 0;
$slideContainer[0].style.setProperty('transform', `translateX(-${offset}px) translateZ(0)`, 'important');
return;
}
if (index < 0) {
index = maxIndex;
} else if (index > maxIndex) {
index = 0;
}
currentSlideIndex = index;
const targetSlide = $slides.eq(currentSlideIndex)[0];
const offset = targetSlide ? targetSlide.offsetLeft : 0;
$slideContainer[0].style.setProperty('transform', `translateX(-${offset}px) translateZ(0)`, 'important');
console.log('Custom Slider: (Instance) (gotoSlide) Slider moved to index:', currentSlideIndex);
}
function startAutoplay() {
clearInterval(autoSlideInterval);
if (updateResponsiveColumns()) {
autoSlideInterval = setInterval(animateAutoSlide, slideIntervalMs);
console.log('Custom Slider: (Instance) (startAutoplay) Autoplay started.');
} else {
console.log('Custom Slider: (Instance) (startAutoplay) Autoplay not started/stopped because slider is not scrollable.');
}
}
function animateAutoSlide() {
const maxIndex = numSlides - currentVisibleColumns;
if (maxIndex <= 0) {
clearInterval(autoSlideInterval);
console.log('Custom Slider: (Instance) (animateAutoSlide) Autoplay stopped because slider is not scrollable.');
return;
}
let nextIndex = currentSlideIndex + autoPlayDirection;
if (autoPlayDirection === 1) {
if (nextIndex > maxIndex) {
autoPlayDirection = -1;
nextIndex = maxIndex;
}
} else {
if (nextIndex < 0) {
autoPlayDirection = 1;
nextIndex = 0;
}
}
gotoSlide(nextIndex);
}
if (isInitialScrollable) {
startAutoplay();
} else {
console.log('Custom Slider: (Instance) (INIT) Autoplay not started initially because slider is not scrollable.');
}
// --- Hover-Funktionalität (Autoplay stoppen/starten) ---
$logoContainer.on('mouseenter', function() {
clearInterval(autoSlideInterval);
console.log('Custom Slider: (Instance) (Hover) Autoplay stopped.');
});
$logoContainer.on('mouseleave', function() {
startAutoplay();
console.log('Custom Slider: (Instance) (Hover) Autoplay initiated after mouseleave.');
});
// --- MANUELLE NAVIGATION (Pfeile) ---
// Finde die Pfeile innerhalb DIESES Containers
const $prevArrow = $logoContainer.find('.avia-slideshow-arrows .prev-slide');
const $nextArrow = $logoContainer.find('.avia-slideshow-arrows .next-slide');
if ($prevArrow.length && $nextArrow.length) {
$prevArrow.attr('href', 'javascript:void(0)');
$nextArrow.attr('href', 'javascript:void(0)');
$prevArrow.css('cursor', 'pointer');
$nextArrow.css('cursor', 'pointer');
$prevArrow.on('click', function(e) {
e.preventDefault();
clearInterval(autoSlideInterval);
const maxIndex = numSlides - currentVisibleColumns;
if (maxIndex <= 0) {
console.log('Custom Slider: (Instance) (Manual) Not scrollable, prev click ignored.');
return;
}
let targetIndex = currentSlideIndex - 1;
if (targetIndex < 0) {
targetIndex = maxIndex;
}
gotoSlide(targetIndex);
console.log('Custom Slider: (Instance) (Manual) Previous slide clicked. Current index:', currentSlideIndex);
});
$nextArrow.on('click', function(e) {
e.preventDefault();
clearInterval(autoSlideInterval);
const maxIndex = numSlides - currentVisibleColumns;
if (maxIndex <= 0) {
console.log('Custom Slider: (Instance) (Manual) Not scrollable, next click ignored.');
return;
}
let targetIndex = currentSlideIndex + 1;
if (targetIndex > maxIndex) {
targetIndex = 0;
}
gotoSlide(targetIndex);
console.log('Custom Slider: (Instance) (Manual) Next slide clicked. Current index:', currentSlideIndex);
});
console.log('Custom Slider: (Instance) Enfold Nav Arrows assigned click functionality.');
} else {
console.log('Custom Slider: (Instance) Enfold Nav Arrows not found for this instance.');
}
// --- Resize-Handler (für JEDE Instanz) ---
let resizeTimeout;
$(window).on('resize', function() {
clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(() => {
console.log('Custom Slider: (Instance) (Resize) Handling resize event for this instance...');
const wasScrollable = updateResponsiveColumns();
gotoSlide(currentSlideIndex);
$sliderInnerWrapper[0].style.setProperty('height', 'auto', 'important');
if (wasScrollable) {
startAutoplay();
} else {
clearInterval(autoSlideInterval);
console.log('Custom Slider: (Instance) (Resize) Autoplay stopped due to non-scrollable state after resize.');
}
console.log('Custom Slider: (Instance) (Resize) Resize event handled. Current index:', currentSlideIndex);
}, 250);
});
}); // End of .each() loop
})(jQuery);
});
</script>
<?php
}
add_action('wp_footer', 'manipulate_dom_content_slider');