css js 문의드립니다.

css js 문의드립니다.

QA

css js 문의드립니다.

본문

그누보드 메인 페이지에 적용할려고하는데 작동이 이상하게 됩니다.

991200946_1650190465.368.jpg

 

 

아래처럼 나와야 정상인데 ...   위에처럼 이상하게 나옵니다....   

초보라서 쉽게 설명부탁드립니다꾸벅.

 

991200946_1650190481.0834.jpg

 

 


<script>
jQuery("#carousel").owlCarousel({
  autoplay: true,
  rewind: true, /* use rewind if you don't want loop */
  margin: 20,
   /*
  animateOut: 'fadeOut',
  animateIn: 'fadeIn',
  */
  responsiveClass: true,
  autoHeight: true,
  autoplayTimeout: 7000,
  smartSpeed: 800,
  nav: true,
  responsive: {
    0: {
      items: 1
    },
    600: {
      items: 3
    },
    1024: {
      items: 4
    },
    1366: {
      items: 4
    }
  }
});
 
</script>
 
  <style>
 .owl-nav button {
  position: absolute;
  top: 50%;
  background-color: #000;
  color: #fff;
  margin: 0;
  transition: all 0.3s ease-in-out;
}
.owl-nav button.owl-prev {
  left: 0;
}
.owl-nav button.owl-next {
  right: 0;
}
.owl-dots {
  text-align: center;
  padding-top: 15px;
}
.owl-dots button.owl-dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  display: inline-block;
  background: #ccc;
  margin: 0 3px;
}
.owl-dots button.owl-dot.active {
  background-color: #000;
}
.owl-dots button.owl-dot:focus {
  outline: none;
}
.owl-nav button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.38) !important;
}
span {
    font-size: 70px;    
    position: relative;
    top: -5px;
}
.owl-nav button:focus {
    outline: none;
}
 </style>
<div class="owl-slider">
<div id="carousel" class="owl-carousel">
  <div class="item">
    <img src="https://cdn.europosters.eu/image/1300/zen-nature-i49609.jpg" alt="1000X1000">
  </div>
  <div class="item">
    <img src="https://cutewallpaper.org/21/anime-trees-background/Anime-Tree-Background-98-images-in-Collection-Page-3.jpg" alt="">
  </div>
  <div class="item">
    <img src="https://cdn.europosters.eu/image/1300/zen-nature-i49609.jpg" alt="">
  </div>
  <div class="item">
    <img src="https://cutewallpaper.org/21/anime-trees-background/Anime-Tree-Background-98-images-in-Collection-Page-3.jpg" alt="">
  </div>
    <div class="item">
    <img src="https://cdn.europosters.eu/image/1300/zen-nature-i49609.jpg" alt="">
  </div>
  <div class="item">
    <img src="https://cutewallpaper.org/21/anime-trees-background/Anime-Tree-Background-98-images-in-Collection-Page-3.jpg" alt="">
  </div>
  <div class="item">
    <img src="https://cdn.europosters.eu/image/1300/zen-nature-i49609.jpg" alt="">
  </div>
  <div class="item">
    <img src="https://cutewallpaper.org/21/anime-trees-background/Anime-Tree-Background-98-images-in-Collection-Page-3.jpg" alt="">
  </div>
    <div class="item">
    <img src="https://cdn.europosters.eu/image/1300/zen-nature-i49609.jpg" alt="">
  </div>
  <div class="item">
    <img src="https://cutewallpaper.org/21/anime-trees-background/Anime-Tree-Background-98-images-in-Collection-Page-3.jpg" alt="">
  </div>
</div>
</div>

이 질문에 댓글 쓰기 :

답변 1

Css 변경하면되요 폰트 사이즈 조절부터 해보세요

답변을 작성하시기 전에 로그인 해주세요.
전체 2,086
QA 내용 검색
filter #css ×

회원로그인

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