Creating personalized dots in the owl carousel

I have successfully added custom previous and next buttons to my carousel using Owl Carousel, but I am having trouble displaying the navigation dots. Can anyone help me identify where I might have made a mistake?

// owl.carousel.css

.owl-controls {
    text-align: center;
}
.owl-controls .owl-dot {
    display: inline-block;
}
.owl-controls .owl-dot span {
    background-color: #333;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    display: block;
    height: 12px;
    margin: 5px 7px;
    width: 12px;
    filter: Alpha(Opacity=500);/*IE7 fix*/
    opacity: 0.5;
}
.owl-controls .owl-dot.active span, .owl-controls .owl-dot:hover span {
    filter: Alpha(Opacity=100);/*IE7 fix*/
    opacity: 1;
}
<script>
$(document).ready(function(){
  $('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    navText: ["<img src='prevArrow.png'>","<img src='nextArrow.png'>"],
    responsive:{
        0:{
            items:1
        },
        600:{
            items:1
        },
        1000:{
            items:1
        }
    }
})
});
</script>

<div class="owl-carousel">
  <img src="lylka.png" alt="">
  <img src="lylka.png" alt="">
  <img src="lylka.png" alt="">
  <img src="lylka.png" alt="">
  <img src="lylka.png" alt="">
</div>

htmlcssowl-carousel

Answer №1

Try using the dotsContainer option, although it may sometimes behave strangely.

For instance

<div id='carousel' class='owl-carousel'> 
  <div class='item'></div> 
  <div class='item'></div> 
  <div class='item'></div> 
</div>
<ul id='carousel-custom-dots' class='owl-dots'> 
  <li class='owl-dot'><!-- Anything in here --></li> 
  <li class='owl-dot'></li> 
  <li class='owl-dot'></li> 
</ul>

Then add this code to your options object.

owl.owlCarousel({
  dotsContainer: '#carousel-custom-dots'
});

This code instructs Owl Carousel 2 to navigate to a slide based on the index of the clicked dot.

$('.owl-dot').click(function () {
  owl.trigger('to.owl.carousel', [$(this).index(), 300]);
});

Following these steps should enable you to set up custom dots with Owl Carousel 2.

via

Answer №2

If you encounter an issue, try this approach:

Here is the HTML code snippet for your reference

<section id="slider" class="content-slider row">
<div class="col-8 owl-carousel slide-cnt">
    <div class="slide"><h3>TITLE</h3></div>
    <div class="slide"><h3>TITLE</h3></div>
    <div class="slide"><h3>TITLE</h3></div>
</div>
<div class="col-4 dots-cnt">
    <ul class="elenco-articoli">
        <li>Title</li>
        <li>Title</li>
        <li>Title</li>
    </ul>
</div>

Now, let's take a look at the JS code:

var owl;
owl = jQuery('.owl-carousel').owlCarousel({
    loop:true,
    autoplay: true,
    autoplaySpeed: 600,
    nav:true,
    navText: ["<",">"],
    dots:false,
    items:1
});
jQuery('.elenco-articoli').on('click', 'li', function(e) {
    owl.trigger('to.owl.carousel', [jQuery(this).index(), 300]);
});

This solution has proven effective for me.

If you wish to explore further, check out: https://codepen.io/vbeetlejuice/pen/dRaero

Answer №3

Cascading Style Sheets:

   .owl-dots button i {
        position: absolute;
        z-index: 9999;
        width: 100%;
        height: 100%;
    }

HyperText Markup Language:

<div class="testimonial_slider owl-carousel owl-theme">
    <div class="item" data-dot="<button><i></i><img src='images/testimonial-1.jpg' alt='' class='img-fluid' /></button>">
        <div class="testimonial-dec">
            <h4>Aklima The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections Bonorum et Malorum original.</h4>
        </div>
        <div class="testimonial-name mt-4">
            <p class="border-bottom d-inline-block"><span class="d-inline-block text-uppercase text-dark">AKLIMA</span>  - COO, AMERIMAR ENTERPRISES, INC.</p>
        </div>
    </div>
</div>

jQuery Script:

$('.testimonial_slider').owlCarousel({
    loop:false,
    margin:32,
    nav:false,
    dots: true,
    items:1,
    mouseDrag: false,
    dotsData: true,
});

view image preview

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it necessary to upload a file in order to view a webpage? Could it be that my coding skills

Here's a simple concept: when you navigate to the same webpage, a different file should be uploaded based on whether you click on <a> elements labeled as tracks or sets. However, my code seems to be malfunctioning. Any ideas? Below is the HTML ...

jqueryhtmlajax

If a single checkbox is selected within a group, then every other checkbox should be deactivated and deselected

Here is the code snippet provided: function listen(element, event, callback) { if (element.attachEvent) { element.attachEvent('on' + event, callback); } else { element.addEventListener(event, callback); } } var form = document.que ...

javascriptjqueryhtmlcheckbox

Maintaining aspect ratio while resizing images: A foolproof guide

I've been working on image editing and encountered a bit of trouble with aspect ratios. <img src="big_image.jpg" width="900" height="600" alt="" /> As you can see, the height and width are already specifi ...

cssimageaspect-ratio

Arranging adjacent div blocks to maintain alignment in a stylish way

I am facing an issue with divs that are placed side by side inside a table. These divs have been styled to appear as colored blocks. Everything seems fine when the text within each div fits on two lines, however, if it overflows onto another line, the en ...

htmlcss

Getting a jquery lightbox up and running

After experimenting with three different jquery plugins in an attempt to create a lightbox that appears when clicking on a link containing an image, I am currently testing out this one: . Despite adding the plugin source in the head and ensuring that the l ...

javascriptjquerycssdjangolightbox

Superceding Meta Character Encoding Statements

Have you ever wondered what happens when two older-style character encoding declarations are used in a webpage? Will the first declaration override the second, or vice versa? Or will they both be ignored and excluded from the encoding algorithm? For Ex ...

htmlencodingcharacter-encodingmeta-tagsmeta

Chart showing a Google Timeline: Allow for each bar to be colored differently when there are multiple bars on the same line

It appears that the Google Timeline charts have a feature to color individual blocks on the timeline as indicated in the documentation at However, there seems to be an issue when two bars overlap on the same line, which is evident in this fiddle: http://j ...

javascriptjquerycss

css code for styling html elements

HTML: <link rel="stylesheet" type="text/css" href="styles.css"><table border="0" cellpadding="0" cellspacing="0" class="month"> <tr><th colspan="7" class="month">January 2017</th></tr> <tr><th class="mon">Mo ...

htmlcss

Animate a dotted border with CSS

How can I make a text block with a dotted style border move like a gif image using CSS at runtime? ...

cssborder

Adding flair to the selected element in the HTML nav bar

I was attempting to customize the appearance of the active item within an HTML navigation bar, which corresponds to the a element. To test this out, I used the example from Here is my modified code, where I introduced a new class "active" and applied the ...

htmlcss

Troubleshooting SCSS Issues in NextJS

Can anyone help me with debugging SCSS in NEXT.JS? I've been trying to figure it out but haven't had any luck. When I use @debug on a SCSS module, nothing shows up in the console. Do I need to configure something in the next.config.js file or is ...

cssdebuggingsassnext.js

What is the best way to achieve concave borders in HTML/CSS, similar to the example provided?

Check out this unique graphic created with normal divs in a flexbox layout, courtesy of mode.com. https://i.sstatic.net/hWwhQ.png Ever wondered how this effect is achieved? Upon inspecting the page source, I discovered that there are four elements arrang ...

htmlcssuser-interface

Obtaining only a portion of the text when copying and editing it

I have a React application where I am attempting to copy text from an HTML element, modify it, and then send it back to the user. I have been successful in achieving this, but I am facing an issue where even if I select only a portion of the text, I still ...

javascripthtmlreactjs

What technique works best for changing the visibility of an image without causing other elements to shift position?

On my webpage, I have a table cell with an image that should only display when hovering over the cell. The problem is that when the image is shown, it shifts the other text to the left because its default state is "display:none". I'm searching for a s ...

jquerycsshovertoggle

What are some of the top languages, libraries, and modules used to create a web application for constructing templates?

Our company specializes in creating websites for membership-based associations. Currently, we utilize custom DLL's created with CodeGear Delphi to connect with a SQL Server database and implement a unique HTML template language. Essentially, our templ ...

htmliistemplates

Fixed Navigation - Employing stickUp.js extension

* { box-sizing: border-box; } body { margin: 0; padding: 0; font-weight: 500; font-family: 'Helvetica Neue', sans-serif; } main {} .bckgrnd { background-position: center center; background-repeat: no-repeat; background-attachment: ...

javascriptjqueryhtmlcss

Trouble with AngularJs 1.x causing Bootstrap4 menu toggle collapse to malfunction

Issue with Navbar toggle menu not closing properly. I have attempted the solutions provided here and others in an effort to fix this bug. However, none of them seem to work for me. Here is a snippet of my code: <nav class="navbar navbar-expand-lg ...

htmlangularjstwitter-bootstrapbootstrap-4

Utilizing checkboxes for toggling the visibility of buttons in Angular

I want to dynamically show or hide buttons based on a checkbox. Here is the HTML code I am using: <input class="form-check-input" [(ngModel)]="switchCase" type="checkbox" id="flexSwitchCheckChecked" (change)=" ...

htmlangulartypescripttwo-way-binding

Utilizing Jquery for deleting text content from a div element

I have a situation where I need to eliminate the text "(2012)" from a particular div using jQuery. Here is the code snippet that I am currently using: var el = $("#myDiv"); //replace(/word to remove/ig, ""); el.html(el.html().replace(/(2012)/ig, "")); ...

jquerycsshtmlreplace

Ways to ensure a function is only triggered once using onmouseover

I'm fairly new to JavaScript and I've been attempting to create a function that only runs once. Here's the logo I've been trying to animate: <img src="img/logot2.png" id="logoutjs" onmouseover="move()" ...

javascripthtml