Paging with Owl Carousel

Asked

Viewed 877 times

3

I’m trying to do with a pagination format with Owl Carousel, I did as per this answer, but I couldn’t get past it.

  <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>

javascript jquery css owl-carousel

  • what exactly is your doubt?

  • 1

    Thanks Lucas, if you have any problem with this code just comment on the Answer I help you, but I tested it here and it worked perfect, just go putting the slides that it adds alone :D Tb put an answer there in the other Emoji Question, then look there

1 answer

3


I’ll give you an answer with CSS only the first part of it is based on that question Counter properties in CSS. What they are for and how they work? and but basically it uses the counter property of CSS to count how many LI imagens you have inside of a container and which one is active.

First see this basic model to understand the concept.

Notice that in it I start the counter in UL, and in the ::after that UL I put the result inside the content. After that I use LI to increment the counter value. This means I will "count" how many LI exist in the DOM with CSS and plot this value in content of UL.

Now you put the number on the LI. For that you will put in the ::after das LI the same counter(teste), only now he’s in every LI it will display the element’s own index.

inserir a descrição da imagem aqui

See the code to better understand, I left the comments for you to better understand.

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 understand the concept we go to practice, I took as a basis that example.

inserir a descrição da imagem aqui

So from this idea, you can enumerate each individually LI by its index, and also take the total number of LIs within the UL, and that’s what you’ll use to count the slides like 1 de 5 in his OWL Caroucel.

Note that the CSS only shows the index of the item that tb has the class .active. In addition, you need to style the original styles of Dots to use them to show the count of 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>

Browser other questions tagged javascript jquery css owl-carousel

You are not signed in. Login or sign up in order to post.