/* Menggunakan prefix 'its-' agar tidak konflik dengan tema web */
.its-multiple-wrapper {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Membuat tampilan grid responsif */
gap: 20px;
padding: 20px;
}
.its-slider-container {
position: relative;
max-width: 100%;
margin: auto;
overflow: hidden;
border-radius: 12px;
border: 10px solid #ffffff; /* Bingkai Luar Putih Tebal */
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
background-color: #fff;
}
.its-slider-track {
display: flex;
transition: transform 0.6s cubic-bezier(0.45, 0, 0.55, 1);
padding: 0;
margin: 0;
list-style: none;
}
.its-slide {
min-width: 100%;
box-sizing: border-box;
padding: 5px;
}
.its-slide img {
width: 100% !important;
height: 300px !important; /* Tinggi disesuaikan agar pas dalam grid */
object-fit: cover !important;
display: block;
border-radius: 6px;
border: 1px solid #eaeaea;
}
.its-nav-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.4) !important;
color: white !important;
border: none !important;
padding: 10px !important;
cursor: pointer;
border-radius: 50% !important;
z-index: 10;
font-size: 16px;
transition: 0.3s;
}
.its-nav-btn:hover { background-color: rgba(0, 0, 0, 0.7) !important; }
.its-prev { left: 10px; }
.its-next { right: 10px; }
document.querySelectorAll('.its-slider-container').forEach(container => {
let itsIdx = 0;
const track = container.querySelector('.its-slider-track');
const slides = track.querySelectorAll('.its-slide');
const total = slides.length;
const speed = parseInt(container.getAttribute('data-speed')) || 2000;
function updateSlider() {
if (itsIdx >= total) itsIdx = 0;
if (itsIdx {
itsIdx += n;
updateSlider();
};
// Jalankan Otomatis
let autoPlay = setInterval(() => {
itsIdx++;
updateSlider();
}, speed);
// Reset timer jika ada interaksi manual
container.resetTimer = () => {
clearInterval(autoPlay);
autoPlay = setInterval(() => {
itsIdx++;
updateSlider();
}, speed);
};
});
// Fungsi Global untuk Tombol Manual
function manualMove(btn, direction) {
const container = btn.closest('.its-slider-container');
container.itsUpdate(direction);
container.resetTimer();
}
/* Menggunakan prefix 'its-' agar tidak konflik dengan tema web */
.its-multiple-wrapper {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Membuat tampilan grid responsif */
gap: 20px;
padding: 20px;
}
.its-slider-container {
position: relative;
max-width: 100%;
margin: auto;
overflow: hidden;
border-radius: 12px;
border: 10px solid #ffffff; /* Bingkai Luar Putih Tebal */
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
background-color: #fff;
}
.its-slider-track {
display: flex;
transition: transform 0.6s cubic-bezier(0.45, 0, 0.55, 1);
padding: 0;
margin: 0;
list-style: none;
}
.its-slide {
min-width: 100%;
box-sizing: border-box;
padding: 5px;
}
.its-slide img {
width: 100% !important;
height: 300px !important; /* Tinggi disesuaikan agar pas dalam grid */
object-fit: cover !important;
display: block;
border-radius: 6px;
border: 1px solid #eaeaea;
}
.its-nav-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.4) !important;
color: white !important;
border: none !important;
padding: 10px !important;
cursor: pointer;
border-radius: 50% !important;
z-index: 10;
font-size: 16px;
transition: 0.3s;
}
.its-nav-btn:hover { background-color: rgba(0, 0, 0, 0.7) !important; }
.its-prev { left: 10px; }
.its-next { right: 10px; }
document.querySelectorAll('.its-slider-container').forEach(container => {
let itsIdx = 0;
const track = container.querySelector('.its-slider-track');
const slides = track.querySelectorAll('.its-slide');
const total = slides.length;
const speed = parseInt(container.getAttribute('data-speed')) || 2000;
function updateSlider() {
if (itsIdx >= total) itsIdx = 0;
if (itsIdx {
itsIdx += n;
updateSlider();
};
// Jalankan Otomatis
let autoPlay = setInterval(() => {
itsIdx++;
updateSlider();
}, speed);
// Reset timer jika ada interaksi manual
container.resetTimer = () => {
clearInterval(autoPlay);
autoPlay = setInterval(() => {
itsIdx++;
updateSlider();
}, speed);
};
});
// Fungsi Global untuk Tombol Manual
function manualMove(btn, direction) {
const container = btn.closest('.its-slider-container');
container.itsUpdate(direction);
container.resetTimer();
}
