Our Community in Action
Code Block
Fixed animation sizing bug + smoother motion + custom buttons
============================================================ -->
/* --- FULL BLEED BREAKOUT --- */
.fs-wrap {
width: 100vw;
margin-left: calc(-50vw + 50%);
padding: 60px 0;
box-sizing: border-box;
}
/* --- STAGE --- */
.fs-stage {
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
height: 420px;
}
/* --- ITEMS --- */
.fs-item {
position: absolute;
width: 520px;
height: 380px;
will-change: transform, opacity;
transition:
transform 0.62s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.62s cubic-bezier(0.22, 1, 0.36, 1);
transform-origin: center center;
}
.fs-item.no-transition {
transition: none !important;
}
.fs-item img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border: 8px solid #ffffff;
border-radius: 28px;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
/* --- POSITIONS --- */
.fs-center {
z-index: 5;
transform: translate3d(0, 0, 0) scale(1);
opacity: 1;
}
.fs-left {
z-index: 4;
transform: translate3d(-420px, 0, 0) scale(0.72);
opacity: 0.78;
}
.fs-right {
z-index: 4;
transform: translate3d(420px, 0, 0) scale(0.72);
opacity: 0.78;
}
.fs-far-l {
z-index: 2;
transform: translate3d(-760px, 0, 0) scale(0.52);
opacity: 0;
pointer-events: none;
}
.fs-far-r {
z-index: 2;
transform: translate3d(760px, 0, 0) scale(0.52);
opacity: 0;
pointer-events: none;
}
.fs-hidden {
z-index: 1;
transform: translate3d(0, 0, 0) scale(0.52);
opacity: 0;
pointer-events: none;
}
/* --- CONTROLS --- */
.fs-controls {
display: flex;
justify-content: center;
align-items: center;
gap: 14px;
margin-top: 28px;
}
.fs-nav {
width: 52px;
height: 52px;
border-radius: 999px;
border: 2px solid #40cea4;
background: #ffffff;
color: #40cea4;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
appearance: none;
-webkit-appearance: none;
transition:
background 0.18s ease,
transform 0.18s ease,
border-color 0.18s ease;
}
.fs-nav:hover {
background: #40cea4;
transform: translateY(-1px);
}
.fs-nav:hover svg {
stroke: #ffffff;
}
.fs-nav:active {
transform: scale(0.96);
}
.fs-nav svg {
width: 18px;
height: 18px;
stroke: #40cea4;
stroke-width: 2.5;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
transition: stroke 0.18s ease;
}
.fs-dot {
width: 11px;
height: 11px;
border-radius: 50%;
border: 2px solid #40cea4;
background: transparent;
cursor: pointer;
padding: 0;
appearance: none;
-webkit-appearance: none;
opacity: 0.7;
transition:
transform 0.18s ease,
background 0.18s ease,
opacity 0.18s ease;
}
.fs-dot:hover {
opacity: 1;
transform: scale(1.08);
}
.fs-dot.active {
background: #40cea4;
opacity: 1;
transform: scale(1.2);
}
/* --- MOBILE --- */
@media (max-width: 768px) {
.fs-wrap {
width: 100%;
margin-left: 0;
padding: 40px 0;
}
.fs-stage {
height: 300px;
}
.fs-item {
width: 260px;
height: 220px;
}
.fs-left,
.fs-right {
opacity: 0 !important;
pointer-events: none;
}
.fs-far-l,
.fs-far-r,
.fs-hidden {
opacity: 0 !important;
pointer-events: none;
}
}
(function () {
var images = [
"https://thepowerofkind.org/wp-content/uploads/2025/09/IMG_1061-scaled.jpg",
"https://thepowerofkind.org/wp-content/uploads/2025/09/47EE7264-CE0F-44A5-8863-101523A06669.jpg",
"https://thepowerofkind.org/wp-content/uploads/2025/09/DSC_0617-scaled.jpg",
"https://thepowerofkind.org/wp-content/uploads/2025/09/DSC_0733-scaled.jpg",
"https://thepowerofkind.org/wp-content/uploads/2025/09/IMG_2202-EDIT-scaled.jpg"
];
var stage = document.getElementById("fs-stage");
var controls = document.getElementById("fs-controls");
var current = 0;
var animating = false;
var items = [];
var dots = [];
var ALL_POS = ["fs-center", "fs-left", "fs-right", "fs-far-l", "fs-far-r", "fs-hidden"];
function getClass(i, cur) {
var n = images.length;
var d = ((i - cur) % n + n) % n;
if (d > n / 2) d -= n;
if (d === 0) return "fs-center";
if (d === -1) return "fs-left";
if (d === 1) return "fs-right";
if (d 1) return "fs-far-r";
return "fs-hidden";
}
function setClass(el, cls) {
for (var i = 0; i < ALL_POS.length; i++) {
el.classList.remove(ALL_POS[i]);
}
el.classList.add(cls);
}
function render() {
for (var i = 0; i < items.length; i++) {
setClass(items[i], getClass(i, current));
}
for (var j = 0; j < dots.length; j++) {
dots[j].classList.toggle("active", j === current);
}
}
function lockAnimation() {
animating = true;
window.setTimeout(function () {
animating = false;
}, 640);
}
function navigate(dir) {
if (animating) return;
current = (current + dir + images.length) % images.length;
render();
lockAnimation();
}
function jumpTo(idx) {
if (animating || idx === current) return;
current = idx;
render();
lockAnimation();
}
for (var i = 0; i < images.length; i++) {
(function (index) {
var wrap = document.createElement("div");
wrap.className = "fs-item no-transition " + getClass(index, 0);
var img = document.createElement("img");
img.src = images[index];
img.alt = "Slide " + (index + 1);
wrap.appendChild(img);
wrap.addEventListener("click", function () {
if (animating) return;
if (wrap.classList.contains("fs-left")) navigate(-1);
if (wrap.classList.contains("fs-right")) navigate(1);
});
stage.appendChild(wrap);
items.push(wrap);
})(i);
}
requestAnimationFrame(function () {
requestAnimationFrame(function () {
for (var i = 0; i < items.length; i++) {
items[i].classList.remove("no-transition");
}
});
});
var prev = document.createElement("button");
prev.className = "fs-nav";
prev.type = "button";
prev.setAttribute("aria-label", "Previous slide");
prev.innerHTML = '';
prev.addEventListener("click", function () {
navigate(-1);
});
var next = document.createElement("button");
next.className = "fs-nav";
next.type = "button";
next.setAttribute("aria-label", "Next slide");
next.innerHTML = '';
next.addEventListener("click", function () {
navigate(1);
});
controls.appendChild(prev);
for (var k = 0; k < images.length; k++) {
(function (dotIndex) {
var dot = document.createElement("button");
dot.className = "fs-dot" + (dotIndex === 0 ? " active" : "");
dot.type = "button";
dot.setAttribute("aria-label", "Go to slide " + (dotIndex + 1));
dot.addEventListener("click", function () {
jumpTo(dotIndex);
});
controls.appendChild(dot);
dots.push(dot);
})(k);
}
controls.appendChild(next);
})();
