Paging with Owl Carousel
I'm trying to do with a paging format with owl carousel, I did as this answer, but I couldn't get past that.
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css">
<style type="text/css">
.num{
background:#000;
color:#fff;
padding:10px;
width:50px;
text-align:center;
}
</style>
<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.3.4/owl.carousel.min.js"></script>
<div class="container-fluid p-0">
<div class="row no-gutters">
<div class="col-12">
<div class="owl-carousel owl-theme">
<div class="item" data-dot="<button>01</button>">
<img src="https://picsum.photos/1920/800/?random">
</div>
<div class="item" data-dot="<button>02</button>">
<img src="https://picsum.photos/1920/800/?random">
</div>
<div class="item" data-dot="<button>02</button>">
<img src="https://picsum.photos/1920/800/?random">
</div>
<div class="item" data-dot="<button>02</button>">
<img src="https://picsum.photos/1920/800/?random">
</div>
<div class="item" data-dot="<button>02</button>">
<img src="https://picsum.photos/1920/800/?random">
</div>
</div>
<div class="num"></div>
</div>
</div>
</div>
<script type="text/javascript">
$('.owl-carousel').owlCarousel({
loop:true,
autoplay:true,
autoplayTimeout:5000,
margin:0,
nav:true,
dots: false,
mouseDrag: false,
items:1
});
var items = $('.owl-item').length;
var cloned = $('.owl-item.cloned').length;
var totalItems = items - cloned;
var currentIndex = $('div.active').index() + 1;
$('.num').html(''+currentIndex+'/'+totalItems+'');
</script>1 answers
I'll give you an answer with CSS only the first part of it is based on this question counter properties in CSS. What are they for and how do they work? and basically it uses the CSS counter property to count how many LI imagensvc's inside a container and which one is active.
First look at this basic model to understand the concept.
Notice that in it I start the counter in UL, and in the ::after of this UL I put the result inside do content. After that I use LI to increment the counter value. This means that I will "count" how many LI there are in DOM with CSS and plot that value in content from UL.
Now vc the part of putting the number of LI. For this you will put in ::after das I read the same counter(teste), only as now it is in each LI it will show index of the element itself.
See the code to better understand, I left the comments for you understand better.
ul {
/* inicia o contador aqui */
counter-reset: teste;
}
ul::after {
/* vai pegar o que vier do counter-increment das LIs e colocar aqui nesse after */
content: counter(teste);
font-weight: bold;
color: red;
}
li {
/* vai contar quantas LI tem no DOM dentro dessa UL */
counter-increment: teste;
}
li::after {
/* coloca na LI o próprio número que ela tem no index */
content: " " counter(teste);
color: green;
} <ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ul>Applying to OWL carousel
Now that you have understood the concept let's go to practice, I took as a basis this example .
So starting from this idea, vc can individually enumerate each LI by its index, and also take the total number of LIs inside the UL, and that's what vc will use to count the type slides 1 de 5 in your Caroucel OWL.
Note that CSS only shows the index of the item that tb has the class .active. Also, you need to style the original styles of the Dots to use them to show the count of the items.
Follows the working model.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.min.css">
<style>
.owl-item {
background-color: #D2527F;
color: white;
text-align: center;
padding: 60px 0;
}
.owl-prev {
float: left;
font-size: 20px;
text-transform: uppercase;
padding: 20px;
}
.owl-next {
float: right;
font-size: 20px;
text-transform: uppercase;
padding: 20px;
}
.owl-dots {
counter-reset: slides-num;
position: absolute;
top: 100%;
left: 50%;
margin-top: 15px;
}
.owl-dots::after {
content: counter(slides-num);
display: inline-block;
font-size: 20px;
font-weight: 700;
vertical-align: middle;
padding-left: 15px;
}
.owl-dot {
display: inline-block;
counter-increment: slides-num;
margin-right: 5px;
}
.owl-dot span {
display: none;
}
.owl-dot.active::before {
content: counter(slides-num) " de";
display: inline-block;
vertical-align: middle;
font-size: 20px;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="owl-carousel">
<div> Slide 1 </div>
<div> Slide 2 </div>
<div> Slide 3 </div>
<div> Slide 4 </div>
<div> Slide 5 </div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<script>
$(".owl-carousel").owlCarousel({
margin:10,
loop:true,
dots: true,
nav: true,
items: 1
});
</script>
</body>
</html>