In the <div class="B"> section, if I write:
<?php for ($i = 1; $ i <= 1; $i++) : ?>
it works, however this:
<?php for ($i = 1; $i <= 7; $i++) : ?>
does not work like a photo.
Somebody knows why this happens?
](https://i.sstatic.net/nN7WnbPN.png)
My PHP code:
<?php
/**
* Template Name: xxxxxx
*/
?>
<?php get_header(); ?>
<main>
<section class="sec-t">
<div class="cnt">
<div class="store_info">
<div class="A">
<div class="about-shop">
<div>
<div class="swiper-container main-image-container">
<div class="swiper-wrapper">
<?php for ($i = 1; $i <= 17; $i++) : ?>
<div class="swiper-slide">
<img src="<?php imgurl(); ?>/store/xxx_store/xxx_store_inside/xxx_store_inside<?php echo $i; ?>.jpg" alt="xxx<?php echo $i; ?>">
</div>
<?php endfor; ?>
</div>
<?php
if ($i > 2): ?>
<div class="swiper-pagination"></div>
<?php endif; ?>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
<div class="swiper-container seat-image-container">
<div class="swiper-wrapper">
<?php for ($i = 1; $i <= 7; $i++) : ?>
<div class="swiper-slide">
<img src="<?php imgurl(); ?>/store/xxx_store/xxx_c/xxx_c<?php echo $i; ?>.jpg" alt="c_seat_image<?php echo $i; ?>">
</div>
<?php endfor; ?>
</div>
<?php
if ($i > 2): ?>
<div class="swiper-pagination"></div>
<?php endif; ?>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
</div>
</div>
</div>
<div class="B">
<div class="cnt">
<div class="swiper-container seat-image-container">
<div class="swiper-wrapper">
<?php for ($i = 1; $i <= 7; $i++) : ?>
<div class="swiper-slide">
<img src="<?php imgurl(); ?>/store/xxx_store/xxx_c/xxx_c<?php echo $i; ?>.jpg" alt="c_seat_image<?php echo $i; ?>">
</div>
<?php endfor; ?>
</div>
<?php
if ($i > 2): ?>
<div class="swiper-pagination2"></div>
<?php endif; ?>
<div class="swiper-button-next2"></div>
<div class="swiper-button-prev2"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<?php get_footer(); ?>
My main.js script:
document.addEventListener('DOMContentLoaded', function() {
// When you click tab1
document.getElementById('tab1').addEventListener('click', function() {
document.querySelector('.A').style.display = 'block';
document.querySelector('.B').style.display = 'none';
// document.querySelector('.C').style.display = 'none';
document.querySelector('#tab1').classList.remove('off');
document.querySelector('#tab2').classList.remove('on');
document.querySelector('#tab3').classList.remove('on');
document.querySelector('#tab1').classList.add('on');
document.querySelector('#tab2').classList.add('off');
document.querySelector('#tab3').classList.add('off');
});
// When you click tab2
document.getElementById('tab2').addEventListener('click', function() {
document.querySelector('.A').style.display = 'none';
document.querySelector('.B').style.display = 'block';
// document.querySelector('.C').style.display = 'none';
document.querySelector('#tab1').classList.remove('on');
document.querySelector('#tab2').classList.remove('off');
// document.querySelector('#tab3').classList.remove('on');
document.querySelector('#tab1').classList.add('off');
document.querySelector('#tab2').classList.add('on');
// document.querySelector('#tab3').classList.add('off');
});
});
document.addEventListener('DOMContentLoaded', function() {
var swipers = document.querySelectorAll('.swiper-container');
swipers.forEach(function(swiperContainer) {
var slideCount = swiperContainer.querySelectorAll('.swiper-slide').length;
if (slideCount <= 1) {
swiperContainer.querySelector('.swiper-button-next').style.display = 'none';
swiperContainer.querySelector('.swiper-button-prev').style.display = 'none';
}
new Swiper(swiperContainer, {
loop: slideCount > 1,
slidesPerView: 1,
centeredSlides: false,
effect: 'fade',
pagination: {
el: swiperContainer.querySelector('.swiper-pagination'),
type: 'fraction',
},
fadeEffect: {
crossFade: true
},
navigation: {
nextEl: swiperContainer.querySelector('.swiper-button-next'),
prevEl: swiperContainer.querySelector('.swiper-button-prev'),
},
});
});
});
I tried this:
var swipers = document.querySelectorAll('.swiper-container');
but nothing happens.
