$(document).ready(function () { var splide = new Splide( '.splide', { type : 'loop', perPage: 3, perMove: 1, arrows: false, gap: '2rem', breakpoints: { 992: { perPage: 1, }, } } ); splide.mount(); const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]') const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl)) const bubbleIcons = $(".bubble-icon"); const bubbleContainer = $(".bubble-container"); const bubbleContents = $(".bubble-content"); const bubbles = $(".bubble"); const prevArrow = $(".nav-arrow.prev"); const nextArrow = $(".nav-arrow.next"); let activeBubbleIndex = -1; // Track the active bubble index bubbleIcons.each(function (index) { $(this).on("click", function () { navigateToBubble(index); }); }); prevArrow.on("click", function () { navigateToBubble(activeBubbleIndex - 1); console.log("prev"); }); nextArrow.on("click", function () { navigateToBubble(activeBubbleIndex + 1); console.log("next"); }); function navigateToBubble(index) { console.log('navigating to bubble: ' + index) if (activeBubbleIndex == index) { console.log('returning to main view') prevArrow.addClass("invisible"); nextArrow.addClass("invisible"); bubbleContents.removeAttr('style') bubbles.removeAttr('style') bubbles.removeClass('invisible') bubbleContainer.css("height", "") activeBubbleIndex = -1; } else { prevArrow.removeClass("invisible"); nextArrow.removeClass("invisible"); // Determine the direction for each bubble bubbleContents.each(function (i) { const direction = i < index ? "-150%" : "150%"; $(this).css("transform", `translateX(${direction})`); $(this).addClass("invisible"); }); // Determine the direction for each bubble bubbles.each(function (i) { const direction = i < index ? "-150%" : "150%"; $(this).css("transform", `translateX(${direction})`); $(this).addClass("invisible"); }); // Ensure index wraps around for looping index = (index + bubbleContents.length) % bubbleContents.length; // Show the clicked content bubbleContents.eq(index).css("transform", ""); bubbleContents.eq(index).css("left", "40%"); bubbleContents.eq(index).removeClass("invisible"); bubbles.eq(index).removeClass("invisible"); bubbles.eq(index).removeClass("col"); bubbles.eq(index).addClass("col-auto"); bubbles.eq(index).css("transform", ""); bubbles.eq(index).css("position", "absolute"); bubbles.eq(index).css("left", "10%"); var new_height = bubbleContents.eq(index).height() bubbleContainer.css("height", new_height) // Update active bubble index activeBubbleIndex = index; } } });