테마 인덱스에 캐러셀 넣었는데요...

테마 인덱스에 캐러셀 넣었는데요...

QA

테마 인덱스에 캐러셀 넣었는데요...

본문

안녕하세요.

 

현재 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는 이거저거 만져보면서 바뀌면 아...이거구나 하는 수준인지라...ㅠㅠ
포기했다가 다시 찾아보고 다닙니다.

바쁘실텐데 매번 답변 고맙습니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 1

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT