複数の行とフクロウのドットを表示したいだけです。このように。
しかし、このための組み込みオプションはないようです。だから私は与えようとしました
.owl-item {
width: 20%;
}
だから5列に並んでいます。しかし、それはまったく機能しませんでした。プラグインスタイルが適用されると思います。
これがフィドルです。 https://jsfiddle.net/7mt5aL2x/
解決策はありますか?
flex
を使用した簡単なアイデア
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
items:1,
nav: true
})
.owl-carousel .item {
background: #4DC7A0;
padding: 1rem;
}
body{
padding: 10px;
}.flex-container {
display: flex;
flex-wrap: nowrap;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<div class="owl-carousel owl-theme">
<div class="item">
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</div>
<div class="item">
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</div>
</div>
1つのアイテムに複数のオブジェクトを追加し、CSSを調整してオブジェクトを長くすることができます。
<div class="owl-carousel owl-theme">
<div class="item"><h4>1</h4><h4>2</h4></div>
<div class="item"><h4>3</h4><h4>4</h4></div>
<div class="item"><h4>5</h4><h4>6</h4></div>
<div class="item"><h4>7</h4><h4>8</h4></div>
<div class="item"><h4>9</h4><h4>10</h4></div>
</div>
グリッドを作成してvide-item内に配置する限り、問題ありません。
これは、2行のビデオカルーセルを作成する方法です。
<div class="video-carousel-container container">
<div class="row slider-carousel-video owl-carousel">
@foreach ($videos as $item)
<div class="video-item col-lg-4 col-md-4 col-xs-1">
<iframe width="320" height="185" src="https://www.youtube.com/embed/{{$item->video}}" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
<iframe width="320" height="185" src="https://www.youtube.com/embed/{{$item->video}}" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</div>
@endforeach
</div>