Owl carousel numbered pagination - pure css metod

index.html

<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> Slide 6 </div>
  <div> Slide 7 </div>
</div>

<div class="info">
    <p>You can also check Owl carousel counter <a href="https://codepen.io/jovanivezic/pen/zNKgbe" target="_blank">JS solution</a></p>
</div>

owl-carousel-numbered-pagination-pure-css-metod.markdown

Owl carousel numbered pagination - pure css metod

A Pen by Jovan on CodePen.

License.

script.js

$(".owl-carousel").owlCarousel({
  margin:10,
  loop:true,
  dots: true,
  nav: true,
  items: 1
});    

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/owl.carousel.min.js"></script>

style.scss

.owl-item {
  background-color: #D2527F;
  color: white;
  text-align: center;
  padding: 100px 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; /* Initialize counter. */ 
    position: absolute;
    top: 100%;
    left: 50%;
    margin-top: 15px;

		&:after {
			content: counter(slides-num); /* get total number of items - more info on http://www.sitepoint.com/a-little-known-way-to-replace-some-scripts-with-css-counters/ */ 
			display: inline-block;
			font-size: 20px;
			font-weight: 700;
			vertical-align: middle;
      padding-left: 5px;
		}
	}

	.owl-dot {
    display: inline-block;
		counter-increment: slides-num; /* Increment counter */
    margin-right: 5px;

		span {
			display: none;
		}

		&.active {

			&:before {
				content:  counter(slides-num) " of" ; /* Use the same counter to get current item. */
				display: inline-block;
				vertical-align: middle;
        font-size: 20px;
        position: absolute;
        left: 0;
        top: 0;
			}
		}
	}

.info {
  text-align: center;
  margin-top: 110px;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.carousel.min.css" rel="stylesheet" />