2
は、フル幅フクロウカルーセルを作成しようとするが、私は検査要素ときをクロムに私は.owlステージにこれを見ておいてください。全幅 - フクロウカルーセル2の問題
element.style {
transform: translate3d(-1872px, 0px, 0px);
transition: 0s;
width: 7264px;
padding-left: 200px;
padding-right: 200px;
}
は当初、私はちょうど.owlステージにパディングを上書きしようとしたが、パディングは同じとどまりました。
また、すべての画像の最小幅を100％と100vwに設定しようとしましたが、どちらも機能しませんでした。
とにかくパッドを調整する必要がありますか？.owl-stage？
これは私のコードです：
$('.owl-carousel').owlCarousel({
stagePadding: 200,
loop:true,
margin:0,
singleItem:true,
nav:true,
navText: [
"<i class='fa fa-caret-left'></i>",
"<i class='fa fa-caret-right'></i>"
],
dots:true,
// autoplay: true,
// autoplayHoverPause: true,
responsive:{
0:{
items:1,
stagePadding: 60
},
600:{
items:1,
stagePadding: 100
},
1000:{
items:1,
stagePadding: 200
},
1200:{
items:1,
stagePadding: 250
},
1400:{
items:1,
stagePadding: 300
},
1600:{
items:1,
stagePadding: 350
},
1800:{
items:1,
stagePadding: 400
}
}
});body {
padding: 0;
margin: 80px 0 0 0;
font-family: Merriweather;
}
.owl-carousel:after {
content: "";
display: block;
position: absolute;
width: 8%;
top: 0;
bottom: 0;
left: 50%;
margin-left: 0;
pointer-events: none;
background: url() no-repeat center 50%;
background-size: 100% auto;
}
.owl-stage{
min-width: 100%;
width: 100%;
padding-left: 0;
padding-right: 0;
}
.owl-item {
-webkit-backface-visibility: hidden;
-webkit-transform: translate(0) scale(1.0, 1.0);
}
.item {
opacity: 0.4;
transition: .4s ease all;
transform: scale(.6);
}
.item img{
display: block;
min-width: 100%;
width: auto;
height: auto;
max-height: 680px !important;
}
.active .item {
display: block;
width: 100%;
height: auto;
opacity: 1;
transform: scale(1);
max-height: 680px !important;
}
/* content and cta */
.inner {
position: absolute;
bottom: 20%;
left: 0;
right: 0;
text-align: center;
}
/* END CTA Button*/
/* Title Animation */
.reveal-text,
.reveal-text:after {
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
-webkit-animation-duration: 600ms;
animation-duration: 600ms;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.reveal-text {
position: relative;
-webkit-user-select: none;
user-select: none;
color:#ffe221;
text-shadow: 1px 1px #000000;
white-space: nowrap;
}
.reveal-text:after {
content: "";
position: absolute;
z-index: 1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #8ce2ea;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
pointer-events: none;
}
.active .reveal-text{
-webkit-animation-name: reveal-text;
animation-name: reveal-text;
}
.active .reveal-text:after {
-webkit-animation-name: revealer-text;
animation-name: revealer-text;
}
/* Before animation */
@-webkit-keyframes reveal-text {
from {
-webkit-clip-path: inset(0 100% 0 0);
clip-path: inset(0 100% 0 0);
}
to {
-webkit-clip-path: inset(0 0 0 0);
clip-path: inset(0 0 0 0);
}
}
@keyframes reveal-text {
from {
-webkit-clip-path: inset(0 100% 0 0);
clip-path: inset(0 100% 0 0);
}
to {
-webkit-clip-path: inset(0 0 0 0);
clip-path: inset(0 0 0 0);
}
}
/* After animation */
@-webkit-keyframes revealer-text {
0%, 50% {
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
}
60%, 100% {
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
50% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
60% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
100% {
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
}
@keyframes revealer-text {
0%, 50% {
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
}
60%, 100% {
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
50% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
60% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
100% {
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
}
/* Title Animation END */
/* OWL-Carousel Navigation*/
.owl-nav div {
position: absolute;
top: 45%;
color: #cdcbcd;
}
.owl-nav i {
font-size: 52px;
}
.owl-nav .owl-prev {
left: 5% !important;
}
.owl-nav .owl-next {
right: 5% !important;;
}
.owl-prev:hover, .owl-next:hover{
text-shadow: 2px 2px #000000;
transform: translateX(10%);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
.owl-prev:hover{
text-shadow: -2px 2px #000000;
transform: translateX(-10%);
}
.owl-theme .owl-dots .owl-dot span{
width: 0;
}
.owl-dots {
text-align: center;
position: fixed;
margin-top: 10px;
width: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.owl-dot {
border-radius: 50px;
height: 10px;
width: 10px;
display: inline-block;
background: rgba(127,127,127, 0.5);
margin-left: 5px;
margin-right: 5px;
}
.owl-dot.active {
background: rgba(127,127,127, 1);
}
/* END OWL-Carousel Navigation*/
@media only screen and (max-width:768px) {
#full-width{
padding: 0;
}
.item{
transform: scale(0);
}
.item img{
height: 400px !important;
}
.active .item img{
max-height: 400px;
}
}
@media only screen and (max-width:420px) {
.item img{
height: 200px !important;
}
.active .item img{
max-height: 200px;
}
}<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Tanya-UI-Kit-3 Full Page Width</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.theme.default.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet"/>
</head>
<body>
<div class="owl-carousel owl-theme owl-loaded owl-drag">
<div class="item">
<img src="https://bboyjplus.files.wordpress.com/2014/04/bboying-steps-2043304.jpg" alt="" />
<div class="inner">
<div class="row row-content">
<div class="col-md-12">
<div class="headline-wrap">
<h1><span class="reveal-text">H1 TITLE</span></h1>
<h2><span class="reveal-text">H2 TITLE</span></h2>
</div>
</div>
</div>
<div class="row row-cta">
<div class="col-md-12 cta-wrap">
<a class="cta-main"><span class="cta-text reveal-text">CTA-MAIN</span></a>
</div>
</div>
</div>
</div>
<div class="item">
<img src="https://i.vimeocdn.com/video/550760587.jpg?mw=1920&mh=1080&q=70" alt="" />
<div class="inner">
<div class="row row-content">
<div class="col-md-12">
<div class="headline-wrap">
<h1><span class="reveal-text">H1 TITLE</span></h1>
<h2><span class="reveal-text">H2 TITLE</span></h2>
</div>
</div>
</div>
<div class="row row-cta">
<div class="col-md-12 cta-wrap js-cta-wrap">
<a class="cta-main"><span class="cta-text reveal-text">CTA-MAIN</span></a>
</div>
</div>
</div>
</div>
</div>
<!-- scripts -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
</body>
</html>
ありがとう！すべての画像を同じ高さに設定するにはどうすればよいですか（全幅を維持したまま）。 –
@PeteKangすべての画像が同じアスペクト比を使用しているか、代わりに背景画像を使用していることを確認してください。 –
@PeteKang画像のアスペクト比が異なっていて、全幅と特定の高さを強制すると、画像がゆがんでしまい、あなたが望んでいないと思われます。 –