Why are the dots/navigation buttons not showing up on owlcarousel?

Why can't I see the navigation buttons?

I've implemented jQuery and owlcarousel ().

http://jsfiddle.net/bobbyrne01/s10bgckL/1/

html ..

<div id="owl-demo">
    <div class="item">
        <img src="http://placehold.it/50x50" alt="Owl Image" />
    </div>
    <div class="item">
        <img src="http://placehold.it/50x50" alt="Owl Image" />
    </div>
    <div class="item">
        <img src="http://placehold.it/50x50" alt="Owl Image" />
    </div>
    <div class="item">
        <img src="http://placehold.it/50x50" alt="Owl Image" />
    </div>
    <div class="item">
        <img src="http://placehold.it/50x50" alt="Owl Image" />
    </div>
    <div class="item">
        <img src="http://placehold.it/50x50" alt="Owl Image" />
    </div>
    <div class="item">
        <img src="http://placehold.it/50x50" alt="Owl Image" />
    </div>
    <div class="item">
        <img src="http://placehold.it/50x50" alt="Owl Image" />
    </div>
</div>

js ..

$(document).ready(function () {
    $("#owl-demo").owlCarousel({

        autoPlay: 3000, //Set AutoPlay to 3 seconds
        dots: true,
        items: 2,
        itemsDesktop: [1199, 3],
        itemsDesktopSmall: [979, 3]
    });
});

css ..

#owl-demo .item {
    margin: 3px;
}
#owl-demo .item img {
    display: block;
    width: 50%;
    height: auto;
}

Answer №1

It seems like the minified css file you're using doesn't contain any styles for this specific element:

.owl-theme .owl-controls .owl-page span
.

You can check out the styles applied in the demo on owlgraphic.com by visiting this link: http://jsfiddle.net/s10bgckL/2/

Answer №2

paginate:false,
navigate:true

give it a shot

Answer №3

Implement CSS styling for the Owl Carousel theme,

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css" />

Modify the following code snippet from,

<div id="owl-demo">

to

<div id="owl-demo" class="owl-theme">

View the demonstration: jsfiddle link

Answer №4

It seems like the issue you're facing might be related to missing the Owl Carousel theme in your project. If you haven't already, make sure to include the theme's CSS along with the usual styles. You can find the necessary files on this link: .

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css" />

Answer №5

Kindly specify the following option as dots:true

$('.banner .owl-carousel').owlCarousel({
    items:1,
    loop:true,
    dots:true,
    autoplay:true,
    autoplayTimeout:7000,
    autoplayHoverPause:false,
    navText : ["<i class='fa fa-long-arrow-left'></i>","<i class='fa fa-long-arrow-right'></i>"]
});

Answer №6

Visit either the owl.carousel.min.js or owl.carousel.js file that you have connected to.

Search and substitute all instances of disabled with anyClass. You should find it 6 times, happy editing!

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

Utilizing bootstrap's switch feature with the power of AJAX

As I am still new to web application development, I kindly request some leniency in your feedback. My dilemma lies in binding the Bootstrap "switch" to a JavaScript function that triggers an AJAX request to update a database record. Below is my attempt: ...

Arranging the final item in the empty space above the div section using Flexbox

Kindly review this code for additional details. Take a look at the image above for a clearer understanding. On the right side of the image, you will notice that the last row contains two items and the second row has one empty slot. I need to rearrange one ...

Designing a website's layout with HTML and CSS

I am having trouble developing a concept depicted in the image below. Here is what I have accomplished so far: https://jsfiddle.net/o0zmtr3q/2/. I am struggling to make each box unique, especially with the layout where the text is positioned differently in ...

What steps are involved in sending a POST request using AJAX and Firebase?

My data is stored in the URL domain/data.json with the following structure: [{ "title": "first thought", "content": { "desc":"This is the first thought", "img":"img.png" } }, { "title": "second thought", "content": { "desc":"This is the ...

Animating drop-right feature in a horizontal navigation menu

I want to design a horizontal menu with an animated effect that activates when hovering over first-level items. Here is the code snippet: .nav { float: right; } .nav ul { list-style: none; padding: 0; margin: 0; } .nav ul li { position: relat ...

Retrieving information from a JSON file using AngularJS

Hello, I am a beginner in Angularjs and I am facing an issue while trying to retrieve data from a JSON file. The output I am getting is quite strange. Below are snippets from my controller.js and services.js files: angular .module('app') .contro ...

Move objects into the designated area to access all items located inside

How can I retrieve all the elements inside the droppable area? For example, if I drag ten elements to the droppable area and then remove three, how can I identify which elements are still inside the droppable area when a button is clicked? Has anyone enco ...

utilizing different types of text style

Whenever I write a paragraph, I want the text to be styled like this: Click here for alt text http://img6.imageshack.us/img6/9894/fullscreencapture282010.jpg Do I need to use CSS to achieve this kind of formatting? I'd like it to look similar. ...

What methods can I use to ensure a jQuery dialog stays visible at all times?

To avoid centering the dialog on the screen, I am specifying the top and left coordinates of the box. The positioning is set up so that it aligns next to a link without being open until clicked. $("#error").dialog({ bgiframe: true, autoOpen: false ...

Text enclosed within a two-column div displayed in a single line

When working with a two column layout using divs instead of a table, I encountered an issue with displaying the content properly when the text in the first column is too long. For instance, I want 'Spoken' to be inline with 'English', b ...

Using jQuery to check for empty input fields

How can I check for empty text input? A required message will be displayed if the text field is left empty. <script> function LoadData(data){ var tempdata = data; var i=0; while (i<tempdata.activity.length) { var index = Mat ...

Is there a way to enlarge all web page elements simultaneously without causing displacement?

Essentially, I am attempting to replicate the functionality that Twitter has on their webpage when you use CTRL+ to zoom in or increase the size of the web page. http://twitter.com/ Currently, I am experiencing displacement of elements upon zoom in and h ...

What's causing the HTML body to be fixed at the top of the viewport?

Currently, I am in the process of developing a commandline tool to quickly generate an HTML Bootstrap starter template for my personal use. The main issue I am facing is with the index page, where a basic navigation bar should be displayed at the top, and ...

What is the best way to link a .css file in handlebars when setting /public/css and /public/img directories as static?

I'm struggling to get my handlebars file to access my .css file. Here's how my current folder structure looks: root public css base.css (css file) img ping.png (image file) To make the /public/img and /public/css folders ...

Enable CDATA support in ActionView::Base.full_sanitizer

One method I found helpful was using the ActionView::Base.full_sanitizer.sanitize(value) to remove HTML content. It generally works well, but there is an issue when the value passed into the method is wrapped in <![CDATA[ and ]]> because it returns a ...

Database Selector API

(I am doing my best to ensure everything is written correctly, but English is not my native language) I am facing a challenge. I am unsure how to accomplish the tasks described below... Issue: I need a player to enter their Player TAG (#XXXXXX) in a text ...

Issue with bottom margin on the last flex item located at the end of the container is not being applied

My button is currently touching the end of the container, but I want to create some space between them. However, adding a margin bottom to the button does not seem to be working as expected. Below is the CSS and HTML code: .events{ height: 100%; d ...

Injecting a JavaScript object into an HTML string

I am facing an issue with a JavaScript variable I have, which points to a specific DOM element that I want to display somewhere else within the DOM structure. Here is how it is defined: var salesRep = $("ul.map").attr("id","1"); My goal is to pass this v ...

Implementing cascading ajax calls across various php files

I have a situation where my index.php file calls the url.php file on button click using Ajax to load without page reload. On 'url.php', there is another button that triggers a call to data.php through ajax. Currently, this is what happens: When ...

What is the best method for sorting comments by ID using jQuery?

I am embarking on a new project to create a filter for comments so that they are displayed with the corresponding post ID. Your help is greatly appreciated! $(function () { $.ajax({ type: "GET", url: "https://jsonpla ...