css js 문의드립니다.
본문
그누보드 메인 페이지에 적용할려고하는데 작동이 이상하게 됩니다.
아래처럼 나와야 정상인데 ... 위에처럼 이상하게 나옵니다....
초보라서 쉽게 설명부탁드립니다꾸벅.
<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>
답변을 작성하시기 전에 로그인 해주세요.
