tmiliketurtles
Reputation: 83
How to fit 6 photos on a slideshow instead of 5?
The following code is a slideshow page with 5 slideshows using Owl Slideshow Platform. Each of these slideshows show five pictures each at a time. I need six photos on one slideshow shown at one time instead of five. I have tried experimenting with the <!--Slideshow Headline section--!>. I tried commenting and seeing what would happen if I changed values, however, no luck. My question is how do a make one of the slideshows show six pictures at a time instead of five? Thank you.
<!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>```
Upvotes: 1
Views: 121
Answers (1)
Daniel Sava
Reputation: 250
You can try by adding the items option when initializing the carousel. I've tested it on CodePen, and it seems to work. I've tried with different numbers.
$('#owl-demo' + count).owlCarousel({
items: 6,
...
});
You should consider using the latest version of Owl Carousel. Here is the documentation for the available options Documentation. On this version it will work for sure, just by changing the items value.
Upvotes: 1
Related Questions
- Make center image more bigger than the other in Owl Carousel js
- Owl-carousel: Displaying only one image per slide
- Is there a way to limit number of images or pages in owl carousel
- Owl carousel not showing images despite height given
- Owl carousel for images with different sizes?
- Owl Carousel 2 Responsive image
- Images stacking in owl carousel
- How to add space in carousel slider and only show 3 images
- Owl Carousel - How to show all the images underneath the main carousel?
- OWL Carousel image not right size at first