我如何在 owl 轮播中每张幻灯片显示 4 个项目

Question

您好，我正在使用 owl 旋转木马，它工作得很好，但是当我尝试设置 items: 4, 时它不起作用，它显示 3 个项目，在侧面显示一半。我尝试使用边距但没有用也尝试向容器添加更多宽度但同样的问题。我希望你明白我的问题是什么。谢谢。

$('.owl-carousel').owlCarousel({
    autoplay: true,
    center: true,
    loop: true,
    infinite:true,
    nav: false,
    rtl: true,
    dots:false,
    items: 4,
    autoplayTimeout:4000,
autoplayHoverPause:true,
  });

.text {
  text-align: center;
  height: 100px;
  background: #0b0a0d;
  color: #FFF;
}
.text .logo a{
  margin: 0;
  line-height: 100px;
  font-size: 48px;
  font-family: 'Zen Dots', cursive;}
.nav {
  background: #0c70de;
  color: #FFF;
  display: flex;
  z-index: 9999;
}

.text .logo a{
  color: #FFF;
  text-decoration: none
}
.nav ul {
  margin: 0 auto;
  padding: 0;
  display: flex;
  /* width: 50%; */
  /* margin-left: auto; */
}
ul li{
  padding: 20px;
  list-style: none
}
ul li a{
  color: #FFF;
  display: block;
  text-decoration: none;
  text-transform: uppercase;
  font-family: 'Changa', sans-serif;
}

.sticky{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%
}
.contain {
  margin: 0 auto;
  max-width: 1200px;
  width: 100%;
}
.item {
  align-items: center;
  display: flex;
  height: auto;
  justify-content: center;
}

/* slider */ 
@import url('https://fonts.googleapis.com/css?family=Raleway:100,400');
body {
font-family: 'Raleway', sans-serif;
font-weight: thin;
background: black;
margin: 0;
padding: 0;

}
body:after{
content: "";
display: block;
position: fixed;
top: 0;
left: 0;
margin: 0;
z-index: -1;
width: 200%;
height: 200%;
background-color: #16151d;


}
.movie-card {
position: relative;
box-sizing: border-box;
width: 100%;
max-width: 800px;
height: 300px;
background-position: center;
background-size: cover;
margin: 4vh auto;
border-radius: 4px;
box-shadow: 2px 3px 12px rgba(0, 0, 0, .4);
color: white;
padding: 2vh 3%;
}
.movie-card:after{
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 4px;
background: linear-gradient(to left, rgba(40,40,60,1) 0%,rgba(40,0,60,0) 90%);
background-blend-mode: multiply;
will-change: transform;
z-index: 0;
}
i {
font-size: .7em;
color: #ff5b84;
}
h1 {
font-size: 170%;
position: relative;
z-index: 10;
}
.time > span {
display: inline-block;
position: relative;
color: rgb(210, 210, 210);
margin-top: 20px;
}
.watch {
display: block;
border: 1px solid white;
border-radius: 4px;
position: relative;
z-index: 10;
color: white;
padding: 10px;
text-align: center;
background: rgba(0, 0, 0, .3);
margin: 20px 0px;
outline: none;
box-shadow: 0 0 10px rgba(0,0,0,.5);
transition: all .2s;
}
button:hover {
background: rgba(255, 255, 255, .8);
color: black;
box-shadow: 0 0 10px rgba(255,255,255,.5);
mix-blend-mode: screen;
}
button:active {
transform: translateY(2px);
}
p {
position: relative;
z-index: 10;
font-size: .8em;
width: 60%;
height: 35%;
}

@media (max-width: 768px) {
body {
/*     background: none; */
}
.movie-card {
  width: 75%;
  height: 200px;
}
h1 {
font-size: 120%;
}
p {
  display: none;
/*     overflow: hidden;
  width: 100%;
  height: 30%; */
}
.watch {
  margin: 5% auto;
}
}
@media (max-width: 500px) {
.movie-card {
  width: 100%;
}
}

.hot {
  background-color: #694ba1;
  padding: 8px 15px;
  border-top-right-radius: 3px;
  border-top-left-radius: 3px;
}
.hot h3 {
  color: #FFF;
}
h3  {
  font-size: 1.1em;
  line-height: 20px;
  font-weight: 500;
  margin: 0;
  position: relative;
}
.anime-list {
  background-color: #222;
}







.card-title {
  width: 100%;
  text-align: center;
}









.caption {
  position: relative;
  bottom: 0;
}
.cards {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
}

/* Screen larger than 600px? 2 column */
@media (min-width: 600px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}

/* Screen larger than 900px? 3 columns */
@media (min-width: 900px) {
  .cards { grid-template-columns: repeat(5, 1fr); }
}





.polaroid {
  display: inline-block;
  margin: 10px;
  position: relative;
  width: auto;
}

.polaroid img {
  -webkit-box-shadow: 3px 3px 3px #888;
  -moz-box-shadow: 3px 3px 3px #888;
  box-shadow: 3px 3px 3px #888;
  height: 300px;
  max-width: 100%;
}

.polaroid p {
  color: #888;
  font: 500 18px/22px Arial, sans-serif;
  text-align: center;
  width: 100%;
}

.contain2 {
  background-image: linear-gradient(to top, rgb(22 21 29), rgb(22 21 29 / 85%)),
  url(https://images3.alphacoders.com/104/1041032.jpg);
}


.owl-item > div:after {
  font-family: sans-serif;
  font-size: 24px;
  font-weight: bold;
}

.time {
  text-align: center;
  height: 500px;
  margin: 10px;

}

.imagebox {
  height: 90%;
}

.imagebox img {
  width: 100%;
  height: 100%;
}

.sildercont {
  width: 100%;
  height: 550px;
  background-image: linear-gradient(to top, rgb(22 21 29), rgb(22 21 29 / 87%)),
url(https://images.wallpapersden.com/image/download/anime-girl-and-colorful-sky_a2ZlbmmUmZqaraWkpJRnamtlrWZpaWU.jpg);
}



.card {
  background: rgba(0, 0, 0, 0.5);
  color: #999;
  /* width: 21%; */
  min-height: 300px;
  border-radius: 0.25em;
  margin: 1em; 
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
  transition-delay: 300ms;
  opacity: 0.8;
  transition: 300ms;
}
.card:hover {
  opacity: 1;
}
.card-content {
  padding: 0 15px 15px 15px;
}
.card-rating {
  position: relative;
  padding: 0;
  list-style-type: none;
  display: inline;
}
.card-actors {
  font-size: 0.8em;
  color: #666;
}
.card-img {
  width: 100%;
  height: 240px;
  border-radius: 0.25em 0.25em 0 0;
}

<!DOCTYPE html>

<html dir="rtl">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>owl</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css">
        <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Zen+Dots&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Changa:wght@500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css">
    </head>
    <body>
         <!-- * Header START -->

    <div class="text">
        <div class="logo">
            <a href="#">ON ANIME</a>
        </div>
    </div>
    <div class="nav">
        
        <ul>
            <li><a href="#">الرئيسية</a></li>
            <li><a href="#">قائمة الانميات</a></li>
            <li><a href="#">افلام الانمي</a></li>
        </ul>
    </div>

        
    <div class="sildercont">
        <div class="contain">
            <div class="owl-carousel">
                <div class="time"><div class="imagebox" style="background-image: url(https://i.pinimg.com/736x/7c/14/e4/7c14e407565ba02c17d527b714bdca29.jpg); background-size: cover; background-position: center;"></div>
                    <span>Boruto Naruto </span>
                </div>
                <div class="time"><div class="imagebox"  style="background-image: url(https://wallpaperaccess.com/full/2412138.jpg); background-size: cover; background-position: center;"></div>
                    <span> Boruto Naruto</span>
                </div>
                <div class="time"><div class="imagebox"  style="background-image: url(https://images3.alphacoders.com/820/thumb-1920-820754.png); background-size: cover; background-position: center;"></div>
                    <span> Boruto Naruto</span>
                </div>
                <div class="time"><div class="imagebox"  style="background-image: url(https://i.pinimg.com/originals/46/fe/b0/46feb0086403dc9beadd8dfa5ccfc198.jpg); background-size: cover; background-position: center;"></div>
                    <span> Boruto Naruto</span>
                </div>
                <div class="time"><div class="imagebox"  style="background-image: url(https://fsb.zobj.net/crop.php?r=ClVYHuoy2lBaOW2dR_TI5VClzDRAayVVdNVqvpESHBtV3pta26wxn6gtkhbHrQraCRCnOt2Q7eLxf0LlN-XgfJvGo1N95xCP7_kG01A30Yx0aJ5AbJIpqFJOBqKxM0UsNMsDqgUKEzjfAhsD); background-size: cover; background-position: center;"></div>
                    <span> Boruto Naruto</span>
                </div>
              </div>
        </div>
    </div>
            

          <div class="contain">
              <div class="postss">
                <div class="hot">
                    <h3>انميات مميزة</h3>
                </div>
                <div class="anime-list">
                    <div class="cards">
                        <div class="card">
                            <div class="card-img" style="background: url(https://m.media-amazon.com/images/M/MV5BY2FmZTY5YTktOWRlYy00NmIyLWE0ZmQtZDg2YjlmMzczZDZiXkEyXkFqcGdeQXVyNjg4NzAyOTA@._V1_.jpg) no-repeat top center; background-size: cover"></div>
                            <div class="card-content">
                            <div class="card-title">
                            <h3>The Big Bang Theory</h3>
                            </div>
                            
                            <div class="card-actors">
                            <span>Kaley Cuoco,Jim Parsons</span>
                            </div>
                            </div>
                            </div>

                            <div class="card">
                                <div class="card-img" style="background: url(https://m.media-amazon.com/images/M/MV5BY2FmZTY5YTktOWRlYy00NmIyLWE0ZmQtZDg2YjlmMzczZDZiXkEyXkFqcGdeQXVyNjg4NzAyOTA@._V1_.jpg) no-repeat top center; background-size: cover"></div>
                                <div class="card-content">
                                <div class="card-title">
                                <h3>The Big Bang Theory</h3>
                                </div>
                               
                                <div class="card-actors">
                                <span>Kaley Cuoco,Jim Parsons</span>
                                </div>
                                </div>
                                </div>

                                <div class="card">
                                    <div class="card-img" style="background: url(https://m.media-amazon.com/images/M/MV5BY2FmZTY5YTktOWRlYy00NmIyLWE0ZmQtZDg2YjlmMzczZDZiXkEyXkFqcGdeQXVyNjg4NzAyOTA@._V1_.jpg) no-repeat top center; background-size: cover"></div>
                                    <div class="card-content">
                                    <div class="card-title">
                                    <h3>The Big Bang Theory</h3>
                                    </div>
                                   
                                    <div class="card-actors">
                                    <span>Kaley Cuoco,Jim Parsons</span>
                                    </div>
                                    </div>
                                    </div>

                                    <div class="card">
                                        <div class="card-img" style="background: url(https://m.media-amazon.com/images/M/MV5BY2FmZTY5YTktOWRlYy00NmIyLWE0ZmQtZDg2YjlmMzczZDZiXkEyXkFqcGdeQXVyNjg4NzAyOTA@._V1_.jpg) no-repeat top center; background-size: cover"></div>
                                        <div class="card-content">
                                        <div class="card-title">
                                        <h3>The Big Bang Theory</h3>
                                        </div>
                                       
                                        <div class="card-actors">
                                        <span>Kaley Cuoco,Jim Parsons</span>
                                        </div>
                                        </div>
                                        </div>

                                        <div class="card">
                                            <div class="card-img" style="background: url(https://m.media-amazon.com/images/M/MV5BY2FmZTY5YTktOWRlYy00NmIyLWE0ZmQtZDg2YjlmMzczZDZiXkEyXkFqcGdeQXVyNjg4NzAyOTA@._V1_.jpg) no-repeat top center; background-size: cover"></div>
                                            <div class="card-content">
                                            <div class="card-title">
                                            <h3>The Big Bang Theory</h3>
                                            </div>
                                           
                                            <div class="card-actors">
                                            <span>Kaley Cuoco,Jim Parsons</span>
                                            </div>
                                            </div>
                                            </div>

                                            <div class="card">
                            <div class="card-img" style="background: url(https://m.media-amazon.com/images/M/MV5BY2FmZTY5YTktOWRlYy00NmIyLWE0ZmQtZDg2YjlmMzczZDZiXkEyXkFqcGdeQXVyNjg4NzAyOTA@._V1_.jpg) no-repeat top center; background-size: cover"></div>
                            <div class="card-content">
                            <div class="card-title">
                            <h3>The Big Bang Theory</h3>
                            </div>
                            
                            <div class="card-actors">
                            <span>Kaley Cuoco,Jim Parsons</span>
                            </div>
                            </div>
                            </div>

                           
                            
                          </div>
                      </div>                      

                </div>
              </div>


        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script>
        <script src="script.js" async defer></script>
    </body>
</html>

Answer 1

出现这个问题是因为你设置了中心属性。去掉中心属性，就可以正常工作了。

$('.owl-carousel').owlCarousel({
    autoplay: true,
    /*center: true,*/
    loop: true,
    infinite:true,
    nav: false,
    rtl: true,
    dots:false,
    items: 4,
    autoplayTimeout:4000,
autoplayHoverPause:true,
  });

我如何在 owl 轮播中每张幻灯片显示 4 个项目

how can i show 4 items per slide in owl carousel

owl-carousel