How to put the slider-counter in the middle of the buttons?

I am using the owl.carousel.js plugin for the content slide. The slider is working but I need slider-counter in the center.

I am getting the output like this.

I need output like this.

But still not able to display the slider-counter in the center. Can you help me where I am wrong?

style.css

<style>
     .owl-carousel {
         position: relative;
     }
    .owl-theme .owl-nav {
        float: left;
    }
    .owl-carousel .owl-prev,
    .owl-carousel .owl-next {
        width: 90px;
        height: 50px;
        padding: 10px !important;
    }
    .slider-counter {
        width: 100px;
        text-align: center;
        background-color: #000;
        color: #fff;
        padding: 5px;
        font-size: 16px;
    }
</style>

html (blade)

@if(count($videos) > 0)
    <div class="card-body">
        <h5 class="text-white bg-purple p-3">Videos</h5>
        <div class="carousel-wrapper">
            <div class="owl-carousel owl-theme owl-videos">
                @foreach($videos as $video)
                    <div class="item mb-5" data-dot="<span>{{ $video->id }}</span>">
                        <a class="card border-0 text-decoration-none text-purple" href="{{ $video->play() }}">
                            <img src="{{ asset('storage/'.$section->image) }}" class="card-img-top" alt="{{ $section->title }}" title="{{ $section->title }}">
                            <div class="card-body">
                                <h5 class="h5 card-title">{{ $video->title }}</h5>
                                <div class="card-text">{!! str()->limit($video->body, 20) !!}</div>
                            </div>
                        </a>
                    </div>
                @endforeach
            </div>
            <div class="slider-counter slider-counter3"></div>
        </div>
    </div>
@endif

script

<script type="text/javascript">
    $(document).ready(function () {
        $('.owl-videos').owlCarousel({
            rtl:true,
            loop:true,
            margin:10,
            dots: true,
            nav:true,
            items: 1,
            navText: [
                "<div class='nav-button owl-prev'><i class='fa-solid fa-angle-right'></i><span> prev </span></div>",
                "<div class='nav-button owl-next'><span> next </span><i class='fa-solid fa-angle-left'></i></div>"
            ],
            responsiveClass:true,
            onInitialized: counter3,
            onChanged: counter3,
            responsive:{
                0:{
                    items:1
                },
                600:{
                    items:3
                },
                1000:{
                    items:5
                }
            }
        });
    });
    function counter3(event) {
        if (!event.namespace) {
            return;
        }
        var slides = event.relatedTarget;
        $('.slider-counter3').text(slides.relative(slides.current()) + 1 + ' of ' + slides.items().length);
        console.log(slides.current())
    }
</script>

Tray2

2 years ago

Level 73

You are creating them that way, first the two buttons then the counter.

You need to create them in the proper order.

Previous
Counter
Next

One way would be to do this

navText: [
                "<div class='nav-button owl-prev'><i class='fa-solid fa-angle-right'></i><span> prev </span></div>",
				<div class="slider-counter3"></div>
                "<div class='nav-button owl-next'><span> next </span><i class='fa-solid fa-angle-left'></i></div>"
            ],

aniruddhpurohit

2 years ago

Level 1

Try this

var owl = $('.owl-videos');
owl.owlCarousel({
    rtl:true,
    loop:true,
    margin:10,
    dots: true,
    nav:true,
    items: 1,
    navText: [
        "<div class='nav-button owl-prev'><i class='fa-solid fa-angle-right'></i><span> prev </span></div>",
        "<div class='nav-button owl-next'><span> next </span><i class='fa-solid fa-angle-left'></i></div>"
    ],
    responsiveClass:true,
    onInitialized: counter3,
    onChanged: counter3,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
});
// Listen to owl events:
owl.on('changed.owl.carousel', function(event) {
    const item      = event.item.index + 1;     // Position of the current item
    const items     = event.item.count;     // Number of items
    $('.slider-counter3').text(item + ' of ' + items);
});

Please or to participate in this conversation.