小贝子编程

如何在幻灯片中放入6张照片而不是5张



下面的代码是一个使用Owl slideshow平台的幻灯片页面，包含5个幻灯片。这些幻灯片每次显示五张图片。我需要在一个幻灯片上同时显示六张照片，而不是五张。我试着用&lt--幻灯片标题部分--&gt；。我试着评论，看看如果我改变了价值观会发生什么，但没有运气。我的问题是，如何让一个幻灯片一次显示六张图片，而不是五张？非常感谢。

<!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,
...
});

你应该考虑使用最新版本的猫头鹰旋转木马。以下是可用选项的文档文档。在这个版本中，只要更改items值，它肯定会起作用。

相关内容

  • 没有找到相关文章

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium