테마 인덱스에 캐러셀 넣었는데요...
본문
안녕하세요.
현재 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>
답변 1
저렇게 직접 만들어서 하지마시구요
bxslide 사용법을 익히시던지 아니면 swiper나 Owl Carousel 사용해서 하는게 좋구요
보기에 생소한것들 이어서 난감은 한데
또 열심히 찾아서 보도록 해 볼께요..
현재 로고 + 메인메뉴 나오는 헤더 밑으로 슬라이드 되게끔 해 볼려고 하는데
html+php+css는 이거저거 만져보면서 바뀌면 아...이거구나 하는 수준인지라...ㅠㅠ
포기했다가 다시 찾아보고 다닙니다.
바쁘실텐데 매번 답변 고맙습니다.
구글로 검색하면 사용법 다 나와요 어렵지 않아요
답변을 작성하시기 전에 로그인 해주세요.