如何在幻灯片放映中放映 6 张照片而不是 5 张照片？
How to fit 6 photos on a slideshow instead of 5?
以下代码是使用 Owl 幻灯片平台的包含 5 个幻灯片的幻灯片页面。这些幻灯片中的每一个都一次显示五张图片。我需要在一张幻灯片上一次显示六张照片，而不是五张照片。我已经尝试使用 进行试验。我试着发表评论，看看如果我改变价值观会发生什么，但是，运气不好。我的问题是如何让其中一张幻灯片一次显示六张图片而不是五张？谢谢。
<!DOCTYPE html>
<html>
<head>
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet">
<link href="main.css" rel="stylesheet" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet">
<link href="https://use.typekit.net/oov2wcw.css" rel="stylesheet">
<title>Fsdadasdsadet</title>
<link href="/FreeCAD/favicon.png" rel="shortcut icon" type="image/png">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<script>
/* When the user scrolls down, hide the navbar. When the user scrolls up, show the navbar */
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navbar").style.top = "0";
} else {
document.getElementById("navbar").style.top = "-3000px";
}
prevScrollpos = currentScrollPos;
}
</script>
</head>
<body style="font-family:Century Gothic;">
<div id="navbar" style="background-color:#ffffff;text-align: center;">
<a href="isdasex.html"><img alt="Insadsdam" id="border" src="/Index%20Files/indsf.png" style="width:75px;height:75px;"></a>
<a href="frdasad.html"><img alt="Freesdasadt" id="borderwo" src="/Index%20Files/fredsfd.png" style="width:75px;height:75px;"></a>
<a href="yasdeen.html"><img alt="Ysaden" id="border" src="/Index%20Files/yadsf.png" style="width:75px;height:75px;"></a>
<a href="ansdaemy.html"><img alt="AnssaAAemy" id="border" src="/Index%20Files/ansdfsr.png" style="width:75px;height:75px;"></a>
<a href="endsatsdent.html"><img alt="Aasdon" id="border" src="/Index%20Files/amdfn.jpg" style="width:75px;height:75px;"></a>
<a href="hudsas.html"><img alt="Hsad" id="border" src="/Index%20Files/hufdss.jpg" style="width:75px;height:75px;"></a>
<a href="cisdaign.html"><img alt="citdasgn" id="border" src="/Index%20Files/citdsfgn.jpg" style="width:75px;height:75px;"></a>
<a href="osdar.html"><img alt="other" id="border" src="/Index%20Files/odsfer.jpg" style="width:75px;height:75px;"></a>
</div>
<img src="/FresdD/logo.png" width="200" height="40" alt="FasdAD" class="center">
<h3>Frsaddsssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss.</h3>
<h3><a href="https://www.w3schools.com"> Source Code</a></h3>
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css" rel="stylesheet" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js" type="text/javascript">
</script>
<!--Center Logo-->
<style>
/* Logo */
.center {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
<!--Scrollbar-->
<style>
/* width */
::-webkit-scrollbar {
width: 20px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 0px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: lightgrey;
border-radius: 5px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: red;
}
</style>
<!--Slideshow Headline-->
<style>
/* Image padding on left */
#slider .container-fluid{
padding: 15px;
border-radius: 10px;
}
/* Image padding on bottom */
#slider .slider-inner{
padding: 10px;
border-radius: 10px
}
.slider-inner .item img{
display: block;
width: 90%;
height: 90%;
/* Make circle */
border-radius: 10px;
position: relative;
}
.slider-inner h1{
color: black;
border-radius: 10px;
}
</style>
<!--Slideshow-->
<script>
$(function () {
var count = 0;
$('.owl-carousel').each(function () {
$(this).attr('id', 'owl-demo' + count);
$('#owl-demo' + count).owlCarousel({
navigation: true,
slideSpeed: 200,
pagination: false,
singleItem: false,
autoPlay: 2000,
});
count++;
});
});
</script>
<!--Slideshow-->
<section id="slider">
<div class="container-fluid">
<div class="slider-inner">
<div class="owl-carousel owl-theme" id="owl-demo" >
<div class="item"><img alt="p" src="/Fsdasd/ppf/person/l1.jpg"><h3><b>fhgh</b></h3><h3>Basdsdar</h3></div>
<div class="item"><img alt="p" src="/Fsdasd/ppf/person/b1.jpg"><h3><b>isdadssd</b></h3><h3>sdes</h3><h4>Duties:</h4></div>
<div class="item"><img alt="p" src="/Fsdasd/ppf/person/b2.jpg"><h3><b>rdsad</b></h3><h3>Basdes</h3><h4>Duties:</h4></div>
<div class="item"><img alt="p" src="/Fsdasd/ppf/person/b3.jpg"><h3><b>nsade</b></h3><h3>Basd</h3><h4>Duties:</h4></div>
<div class="item"><img alt="p" src="/Fsdasd/ppf/person/b4.jpg"><h3><b>yesdan</b></h3><h3>asdses</h3><h4>Duties:</h4></div>
<div class="item"><img alt="p" src="/Fsdasd/ppf/person/b5.jpg"><h3><b>ssdasd</b></h3><h3>dsaNoses</h3><h4>Duties:</h4></div></div>
</div>
<div class="slider-inner ">
<div class="owl-carousel owl-theme" id="owl-demo" >
<div class="item"><img alt="p" src="/sdasd/ppf/person/l2.jpg"><h3 ><b>sdds</b></h3><h3>sdar</h3></div>
<div class="item"><img alt="p" src="/sdasd/ppf/person/t1.jpg"><h3 ><b>sddsbdasdaah</b></h3><h3>asd</h3><h4>Duties:</h4></div>
<div class="item"><img alt="p" src="/sdasd/ppf/person/t2.jpg"><h3 ><b>sddsdur</b></h3><h3>sda</h3><h4>Duties:</h4></div>
<div class="item"><img alt="p" src="/sdasd/ppf/person/t3.jpg"><h3 ><b>sddsdndari</b></h3><h3>sdo</h3><h4>Duties:</h4></div>
<div class="item"><img alt="p" src="/sdasd/ppf/person/t4.jpg"><h3 ><b>sddstton</b></h3><h3>Tsdao</h3><h4>Duties:</h4></div>
</div>
</div>
<div class="slider-inner ">
<div class="owl-carousel owl-theme" id="owl-demo" >
<div class="item"><img alt="p" src="/saddsd/ppf/person/l3.jpg"><h3><b>Asddsman</b></h3><h3>Csddader</h3></div>
<div class="item"><img alt="p" src="/saddsd/ppf/person/c1.jpg"><h3><b>Asddsdsan</b></h3><h3>Cesad</h3><h4>Duties:</h4></div>
<div class="item"><img alt="p" src="/saddsd/ppf/person/c2.jpg"><h3><b>Jsddsynh</b></h3><h3>Csd</h3><h4>Duties:</h4></div>
<div class="item"><img alt="p" src="/saddsd/ppf/person/c3.jpg"><h3><b>Msddslem</b></h3><h3>Cadss</h3><h4>Duties:</h4></div>
<div class="item"><img alt="p" src="/saddsd/ppf/person/c4.jpg"><h3><b>RsddsCarsdo</b></h3><h3>Ceasd</h3><h4>Duties:</h4></div>
<div class="item"><img alt="p" src="/saddsd/ppf/person/c5.jpg"><h3><b>Tsdds Tran</b></h3><h3>Cerasdrus</h3><h4>Duties:</h4></div>
</div>
</div>
<div class="slider-inner">
<div class="owl-carousel owl-theme" id="owl-demo" >
<div class="item"><img alt="p" src="/sdaasd/ppf/person/l4.jpg"><h3><b>JsddsMcDdsld</b></h3><h3>Nucasder</h3></div>
<div class="item"><img alt="p" src="/sdaasd/ppf/person/n1.jpg"><h3><b>wddsw</b></h3><h3>dsar Node</h3><h4>Duties:</h4></div>
<div class="item"><img alt="p" src="/sdaasd/ppf/person/n2.jpg"><h3><b>wsddsHsdda</b></h3><h3>sdaode</h3><h4>Duties: Casd1</h4></div>
<div class="item"><img alt="p" src="/sdaasd/ppf/person/n3.jpg"><h3><b>wsddsim</b></h3><h3>asdode</h3><h4>Dutiesdsasd</h4></div>
<div class="item"><img alt="p" src="/sdaasd/ppf/person/n4.jpg"><h3><b>sdasddsSage) Han</b></h3><h3>NuasdNode</h3><h4>Duties:</h4></div>
<div class="item"><img alt="p" src="/sdaasd/ppf/person/n5.jpg"><h3><b>dsasddsho</b></h3><h3>asd Node</h3><h4>Duties:</h4></div>
</div>
</div>
<div class="slider-inner ">
<div class="owl-carousel owl-theme" id="owl-demo">
<div class="item"><img alt="p" src="/sadsd/ppf/person/l5.jpg"><h3><b>dssddscott</b></h3><h3>ewusdaon Leader</h3></div>
<div class="item"><img alt="p" src="/sadsd/ppf/person/p1.jpg"><h3><b>dssdddsung</b></h3><h3>Ndastion</h3><h4>Duties:</h4></div>
<div class="item"><img alt="p" src="/sadsd/ppf/person/p2.jpg"><h3><b>sasddsane</b></h3><h3>Nullsadtion</h3><h4>Dutiesaddsmber</h4></div>
<div class="item"><img alt="p" src="/sadsd/ppf/person/p3.jpg"><h3><b>sddsksdh</b></h3><h3>Nusddaiasds:</h4></div>
<div class="item"><img alt="p" src="/sadsd/ppf/person/p4.jpg"><h3><b>sssddya</b></h3><h3>Nullasdon</h3><h4>Duties:</h4></div>
</div>
</div>
</div>
</section>
</body>
</html>```
您可以尝试在初始化轮播时添加items选项。我已经在 CodePen 上测试过了，它似乎可以工作。我试过不同的数字。
$('#owl-demo' + count).owlCarousel({
items: 6,
...
});
您应该考虑使用最新版本的 Owl Carousel. Here is the documentation for the available options Documentation。在此版本中，它肯定会工作，只需更改 items 值。
以下代码是使用 Owl 幻灯片平台的包含 5 个幻灯片的幻灯片页面。这些幻灯片中的每一个都一次显示五张图片。我需要在一张幻灯片上一次显示六张照片，而不是五张照片。我已经尝试使用 进行试验。我试着发表评论，看看如果我改变价值观会发生什么，但是，运气不好。我的问题是如何让其中一张幻灯片一次显示六张图片而不是五张？谢谢。
<!DOCTYPE html>
<html>
<head>
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet">
<link href="main.css" rel="stylesheet" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet">
<link href="https://use.typekit.net/oov2wcw.css" rel="stylesheet">
<title>Fsdadasdsadet</title>
<link href="/FreeCAD/favicon.png" rel="shortcut icon" type="image/png">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<script>
/* When the user scrolls down, hide the navbar. When the user scrolls up, show the navbar */
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navbar").style.top = "0";
} else {
document.getElementById("navbar").style.top = "-3000px";
}
prevScrollpos = currentScrollPos;
}
</script>
</head>
<body style="font-family:Century Gothic;">
<div id="navbar" style="background-color:#ffffff;text-align: center;">
<a href="isdasex.html"><img alt="Insadsdam" id="border" src="/Index%20Files/indsf.png" style="width:75px;height:75px;"></a>
<a href="frdasad.html"><img alt="Freesdasadt" id="borderwo" src="/Index%20Files/fredsfd.png" style="width:75px;height:75px;"></a>
<a href="yasdeen.html"><img alt="Ysaden" id="border" src="/Index%20Files/yadsf.png" style="width:75px;height:75px;"></a>
<a href="ansdaemy.html"><img alt="AnssaAAemy" id="border" src="/Index%20Files/ansdfsr.png" style="width:75px;height:75px;"></a>
<a href="endsatsdent.html"><img alt="Aasdon" id="border" src="/Index%20Files/amdfn.jpg" style="width:75px;height:75px;"></a>
<a href="hudsas.html"><img alt="Hsad" id="border" src="/Index%20Files/hufdss.jpg" style="width:75px;height:75px;"></a>
<a href="cisdaign.html"><img alt="citdasgn" id="border" src="/Index%20Files/citdsfgn.jpg" style="width:75px;height:75px;"></a>
<a href="osdar.html"><img alt="other" id="border" src="/Index%20Files/odsfer.jpg" style="width:75px;height:75px;"></a>
</div>
<img src="/FresdD/logo.png" width="200" height="40" alt="FasdAD" class="center">
<h3>Frsaddsssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss.</h3>
<h3><a href="https://www.w3schools.com"> Source Code</a></h3>
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css" rel="stylesheet" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js" type="text/javascript">
</script>
<!--Center Logo-->
<style>
/* Logo */
.center {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
<!--Scrollbar-->
<style>
/* width */
::-webkit-scrollbar {
width: 20px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 0px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: lightgrey;
border-radius: 5px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: red;
}
</style>
<!--Slideshow Headline-->
<style>
/* Image padding on left */
#slider .container-fluid{
padding: 15px;
border-radius: 10px;
}
/* Image padding on bottom */
#slider .slider-inner{
padding: 10px;
border-radius: 10px
}
.slider-inner .item img{
display: block;
width: 90%;
height: 90%;
/* Make circle */
border-radius: 10px;
position: relative;
}
.slider-inner h1{
color: black;
border-radius: 10px;
}
</style>
<!--Slideshow-->
<script>
$(function () {
var count = 0;
$('.owl-carousel').each(function () {
$(this).attr('id', 'owl-demo' + count);
$('#owl-demo' + count).owlCarousel({
navigation: true,
slideSpeed: 200,
pagination: false,
singleItem: false,
autoPlay: 2000,
});
count++;
});
});
</script>
<!--Slideshow-->
<section id="slider">
<div class="container-fluid">
<div class="slider-inner">
<div class="owl-carousel owl-theme" id="owl-demo" >
<div class="item"><img alt="p" src="/Fsdasd/ppf/person/l1.jpg"><h3><b>fhgh</b></h3><h3>Basdsdar</h3></div>
<div class="item"><img alt="p" src="/Fsdasd/ppf/person/b1.jpg"><h3><b>isdadssd</b></h3><h3>sdes</h3><h4>Duties:</h4></div>
<div class="item"><img alt="p" src="/Fsdasd/ppf/person/b2.jpg"><h3><b>rdsad</b></h3><h3>Basdes</h3><h4>Duties:</h4></div>
<div class="item"><img alt="p" src="/Fsdasd/ppf/person/b3.jpg"><h3><b>nsade</b></h3><h3>Basd</h3><h4>Duties:</h4></div>
<div class="item"><img alt="p" src="/Fsdasd/ppf/person/b4.jpg"><h3><b>yesdan</b></h3><h3>asdses</h3><h4>Duties:</h4></div>
<div class="item"><img alt="p" src="/Fsdasd/ppf/person/b5.jpg"><h3><b>ssdasd</b></h3><h3>dsaNoses</h3><h4>Duties:</h4></div></div>
</div>
<div class="slider-inner ">
<div class="owl-carousel owl-theme" id="owl-demo" >
<div class="item"><img alt="p" src="/sdasd/ppf/person/l2.jpg"><h3 ><b>sdds</b></h3><h3>sdar</h3></div>
<div class="item"><img alt="p" src="/sdasd/ppf/person/t1.jpg"><h3 ><b>sddsbdasdaah</b></h3><h3>asd</h3><h4>Duties:</h4></div>
<div class="item"><img alt="p" src="/sdasd/ppf/person/t2.jpg"><h3 ><b>sddsdur</b></h3><h3>sda</h3><h4>Duties:</h4></div>
<div class="item"><img alt="p" src="/sdasd/ppf/person/t3.jpg"><h3 ><b>sddsdndari</b></h3><h3>sdo</h3><h4>Duties:</h4></div>
<div class="item"><img alt="p" src="/sdasd/ppf/person/t4.jpg"><h3 ><b>sddstton</b></h3><h3>Tsdao</h3><h4>Duties:</h4></div>
</div>
</div>
<div class="slider-inner ">
<div class="owl-carousel owl-theme" id="owl-demo" >
<div class="item"><img alt="p" src="/saddsd/ppf/person/l3.jpg"><h3><b>Asddsman</b></h3><h3>Csddader</h3></div>
<div class="item"><img alt="p" src="/saddsd/ppf/person/c1.jpg"><h3><b>Asddsdsan</b></h3><h3>Cesad</h3><h4>Duties:</h4></div>
<div class="item"><img alt="p" src="/saddsd/ppf/person/c2.jpg"><h3><b>Jsddsynh</b></h3><h3>Csd</h3><h4>Duties:</h4></div>
<div class="item"><img alt="p" src="/saddsd/ppf/person/c3.jpg"><h3><b>Msddslem</b></h3><h3>Cadss</h3><h4>Duties:</h4></div>
<div class="item"><img alt="p" src="/saddsd/ppf/person/c4.jpg"><h3><b>RsddsCarsdo</b></h3><h3>Ceasd</h3><h4>Duties:</h4></div>
<div class="item"><img alt="p" src="/saddsd/ppf/person/c5.jpg"><h3><b>Tsdds Tran</b></h3><h3>Cerasdrus</h3><h4>Duties:</h4></div>
</div>
</div>
<div class="slider-inner">
<div class="owl-carousel owl-theme" id="owl-demo" >
<div class="item"><img alt="p" src="/sdaasd/ppf/person/l4.jpg"><h3><b>JsddsMcDdsld</b></h3><h3>Nucasder</h3></div>
<div class="item"><img alt="p" src="/sdaasd/ppf/person/n1.jpg"><h3><b>wddsw</b></h3><h3>dsar Node</h3><h4>Duties:</h4></div>
<div class="item"><img alt="p" src="/sdaasd/ppf/person/n2.jpg"><h3><b>wsddsHsdda</b></h3><h3>sdaode</h3><h4>Duties: Casd1</h4></div>
<div class="item"><img alt="p" src="/sdaasd/ppf/person/n3.jpg"><h3><b>wsddsim</b></h3><h3>asdode</h3><h4>Dutiesdsasd</h4></div>
<div class="item"><img alt="p" src="/sdaasd/ppf/person/n4.jpg"><h3><b>sdasddsSage) Han</b></h3><h3>NuasdNode</h3><h4>Duties:</h4></div>
<div class="item"><img alt="p" src="/sdaasd/ppf/person/n5.jpg"><h3><b>dsasddsho</b></h3><h3>asd Node</h3><h4>Duties:</h4></div>
</div>
</div>
<div class="slider-inner ">
<div class="owl-carousel owl-theme" id="owl-demo">
<div class="item"><img alt="p" src="/sadsd/ppf/person/l5.jpg"><h3><b>dssddscott</b></h3><h3>ewusdaon Leader</h3></div>
<div class="item"><img alt="p" src="/sadsd/ppf/person/p1.jpg"><h3><b>dssdddsung</b></h3><h3>Ndastion</h3><h4>Duties:</h4></div>
<div class="item"><img alt="p" src="/sadsd/ppf/person/p2.jpg"><h3><b>sasddsane</b></h3><h3>Nullsadtion</h3><h4>Dutiesaddsmber</h4></div>
<div class="item"><img alt="p" src="/sadsd/ppf/person/p3.jpg"><h3><b>sddsksdh</b></h3><h3>Nusddaiasds:</h4></div>
<div class="item"><img alt="p" src="/sadsd/ppf/person/p4.jpg"><h3><b>sssddya</b></h3><h3>Nullasdon</h3><h4>Duties:</h4></div>
</div>
</div>
</div>
</section>
</body>
</html>```
您可以尝试在初始化轮播时添加items选项。我已经在 CodePen 上测试过了，它似乎可以工作。我试过不同的数字。
$('#owl-demo' + count).owlCarousel({
items: 6,
...
});
您应该考虑使用最新版本的 Owl Carousel. Here is the documentation for the available options Documentation。在此版本中，它肯定会工作，只需更改 items 值。