목록으로

owl-carousel 질문 입니다. 채택완료

허걱김선생

프로필 보기 이 회원 글보기 이 회원의 댓글보기

1년 전 조회 1,052

답변 3

수고하십니다.

잘 사용하고 있던 owl-carousel 부분이 갑자기 나타나지 않습니다.

그런데 그누보드가 설치되어 있지 않은 곳에서는 잘 나타나고

그누보드 설치 된 곳에서는 나타나지 않아요.

그누보드에서는 owl-carousel를 사용 하지 못 하게 된 걸 까요?

조언 좀 부탁드립니다.

owl-carousel 부분을 삭제하면

이미지가 나타나긴 하지만 정렬이 깨집니다.

내용

</p>

<p>/* 

 *  Owl Carousel - Animate Plugin

 */

.owl-carousel .animated {

  -webkit-animation-duration: 1000ms;

  animation-duration: 1000ms;

  -webkit-animation-fill-mode: both;

  animation-fill-mode: both;

}

.owl-carousel .owl-animated-in {

  z-index: 0;

}

.owl-carousel .owl-animated-out {

  z-index: 1;

}

.owl-carousel .fadeOut {

  -webkit-animation-name: fadeOut;

  animation-name: fadeOut;

}</p>

<p>@-webkit-keyframes fadeOut {

  0% {

    opacity: 1;

  }</p>

<p>  100% {

    opacity: 0;

  }

}

@keyframes fadeOut {

  0% {

    opacity: 1;

  }</p>

<p>  100% {

    opacity: 0;

  }

}</p>

<p>/* 

 *     Owl Carousel - Auto Height Plugin

 */

.owl-height {

  -webkit-transition: height 500ms ease-in-out;

  -moz-transition: height 500ms ease-in-out;

  -ms-transition: height 500ms ease-in-out;

  -o-transition: height 500ms ease-in-out;

  transition: height 500ms ease-in-out;

}</p>

<p>/* 

 *  Core Owl Carousel CSS File

 */

.owl-carousel {

  display: none;

  width: 100%;

  -webkit-tap-highlight-color: transparent;

  /* position relative and z-index fix webkit rendering fonts issue */

  position: relative;

  z-index: 1;

}

.owl-carousel .owl-stage {

  position: relative;

  -ms-touch-action: pan-Y;

}

.owl-carousel .owl-stage:after {

  content: ".";

  display: block;

  clear: both;

  visibility: hidden;

  line-height: 0;

  height: 0;

}

.owl-carousel .owl-stage-outer {

  position: relative;

  overflow: hidden;

  /* fix for flashing background */

  -webkit-transform: translate3d(0px, 0px, 0px);

}

.owl-carousel .owl-controls .owl-nav .owl-prev,

.owl-carousel .owl-controls .owl-nav .owl-next,

.owl-carousel .owl-controls .owl-dot {

  cursor: pointer;

  cursor: hand;

  -webkit-user-select: none;

  -khtml-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;

}

.owl-carousel.owl-loaded {

  display: block;

}

.owl-carousel.owl-loading {

  opacity: 0;

  display: block;

}

.owl-carousel.owl-hidden {

  opacity: 0;

}

.owl-carousel .owl-refresh .owl-item {

  display: none;

}

.owl-carousel .owl-item {

  position: relative;

  min-height: 1px;

  float: left;

  -webkit-backface-visibility: hidden;

  -webkit-tap-highlight-color: transparent;

  -webkit-touch-callout: none;

  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;

}

.owl-carousel .owl-item img {

  display: block;

  width: none;

  -webkit-transform-style: preserve-3d;

}

.owl-carousel.owl-text-select-on .owl-item {

  -webkit-user-select: auto;

  -moz-user-select: auto;

  -ms-user-select: auto;

  user-select: auto;

}

.owl-carousel .owl-grab {

  cursor: move;

  cursor: -webkit-grab;

  cursor: -o-grab;

  cursor: -ms-grab;

  cursor: grab;

}

.owl-carousel.owl-rtl {

  direction: rtl;

}

.owl-carousel.owl-rtl .owl-item {

  float: right;

}</p>

<p>/* No Js */

.no-js .owl-carousel {

  display: block;

}</p>

<p>/* 

 *     Owl Carousel - Lazy Load Plugin

 */

.owl-carousel .owl-item .owl-lazy {

  opacity: 0;

  -webkit-transition: opacity 400ms ease;

  -moz-transition: opacity 400ms ease;

  -ms-transition: opacity 400ms ease;

  -o-transition: opacity 400ms ease;

  transition: opacity 400ms ease;

}

.owl-carousel .owl-item img {

  transform-style: preserve-3d;

}</p>

<p>/* 

 *     Owl Carousel - Video Plugin

 */

.owl-carousel .owl-video-wrapper {

  position: relative;

  height: 100%;

  background: #000;

}

.owl-carousel .owl-video-play-icon {

  position: absolute;

  height: 80px;

  width: 80px;

  left: 50%;

  top: 50%;

  margin-left: -40px;

  margin-top: -40px;

  background: url("owl.video.play.png") no-repeat;

  cursor: pointer;

  z-index: 1;

  -webkit-backface-visibility: hidden;

  -webkit-transition: scale 100ms ease;

  -moz-transition: scale 100ms ease;

  -ms-transition: scale 100ms ease;

  -o-transition: scale 100ms ease;

  transition: scale 100ms ease;

}

.owl-carousel .owl-video-play-icon:hover {

  -webkit-transition: scale(1.3, 1.3);

  -moz-transition: scale(1.3, 1.3);

  -ms-transition: scale(1.3, 1.3);

  -o-transition: scale(1.3, 1.3);

  transition: scale(1.3, 1.3);

}

.owl-carousel .owl-video-playing .owl-video-tn,

.owl-carousel .owl-video-playing .owl-video-play-icon {

  display: none;

}

.owl-carousel .owl-video-tn {

  opacity: 0;

  height: 100%;

  background-position: center center;

  background-repeat: no-repeat;

  -webkit-background-size: contain;

  -moz-background-size: contain;

  -o-background-size: contain;

  background-size: contain;

  -webkit-transition: opacity 400ms ease;

  -moz-transition: opacity 400ms ease;

  -ms-transition: opacity 400ms ease;

  -o-transition: opacity 400ms ease;

  transition: opacity 400ms ease;

}

.owl-carousel .owl-video-frame {

  position: relative;

  z-index: 1;

}</p>

<p>.owl-theme .owl-controls {

      display:block;

}

.owl-theme .owl-controls .owl-nav [class*="owl-"] {

  position: relative;

  cursor: pointer;

  display: inline-block;

  color: #898f9f;

  margin: 0px 10px;

  transition: all 500ms ease;

}

.owl-theme .owl-controls .owl-nav [class*="owl-"] span:before{

  margin: 0px;

  font-size: 25px;

}

.owl-theme .owl-controls .owl-nav [class*="owl-"]:hover{

  color: #f2be00;

}

.owl-theme .owl-controls .owl-nav .disabled {

  cursor: default;

  opacity: 0.5;

}

.owl-theme .owl-dots .owl-dot {

    display: inline-block;

}

.owl-theme .owl-dots .owl-dot span {

  background: #222;

  display: block;

  margin: 0px 5px 0px 5px;

  transition: opacity 200ms ease 0s;

  width: 15px;

  height: 15px;

}

.owl-theme .owl-dots .owl-dot.active span {

  background: none repeat scroll 0 0 #cda274;

}

 </p>

<p>

#owl-carousel