테마 인덱스에 캐러셀 넣었는데요...
본문
안녕하세요.
현재 strawberry 테마 사용중입니다.
index.php 최 상단에 캐러셀 슬라이더를 넣을려고 구글검색후 이거다 싶어서
넣었는데 아주 잘 작동합니다.
그런데 인덱스 페이지에 있는 인기상품, 히트상품 등등이 있는데
캐러셀을 넣으면 인기상품 등이 밀려서 아래로 자동 내려가야는데
캐러셀 뒤에 그대로 위치하고 있습니다.
br을 쫙주면 내려는 가는데 그건 아닌것 같아서요.
그 자리에 텍스트나 이미지를 넣으면 자동 아래로 밀려나거던요....
소스 첨부하니 혹시 어느부분을 건드려야 해결이 될지 부탁 드립니다.
감사합니다.
<style>
#slider{
width: 100%;
position:relative;
}
.slider__item{
width: 100%;
height: 450px;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 48px;
position:absolute;
z-index:0;
opacity:0;
transition: all 1s ease-in-out;
}
.slider__item:nth-child(odd){
background-color:royalblue;
}
.slider__item:nth-child(even){
background-color:blueviolet;
}
.showing{
z-index:1;
opacity:1;
}
</style>
<div id="slider">
<div class="slider__item">1</div>
<div class="slider__item">2</div>
<div class="slider__item">3</div>
<div class="slider__item">4</div>
<div class="slider__item">5</div>
</div>
<script>
const SHOWING_CLASS = "showing";
const firstSlide = document.querySelector(".slider__item:first-child");
function slide(){
const currentSlide = document.querySelector(`.${SHOWING_CLASS}`);
if (currentSlide) { // 만약 현재 슬라이드라면
currentSlide.classList.remove(SHOWING_CLASS); // 현재 슬라이드에서 SHOWING_CLASS를 제거한다
const nextSlide = currentSlide.nextElementSibling; // 다음 슬라이드를 정의한다.
if (nextSlide) { //만약 다음 슬라이드가 있다면
nextSlide.classList.add(SHOWING_CLASS); //다음 슬라이드에 SHOWING_CLASS를 붙인다.
} else { // 다음 슬라이드가 없다면 => 5번째 슬라이드라면(마지막 슬라이드라면)
firstSlide.classList.add(SHOWING_CLASS); // 첫번째 슬라이드에 SHOWING_CLASS를 붙인다.
}
} else {
firstSlide.classList.add(SHOWING_CLASS);
}
}
slide();
setInterval(slide, 4000);
</script>
답변을 작성하시기 전에 로그인 해주세요.