Creating a logo slider using CSS - A step-by-step guide

I attempted creating a logo slider using Owl carousel. Unfortunately, the carousel isn't showing up.

Here's how I envision my carousel to appear: https://i.sstatic.net/scDtT.png

This is the HTML code I used:

    <div class="owl-carousel">
      <div class="item"><img src="resources/img/c-logo.png" alt="Owl Image"></div>
      <div class="item"><img src="resources/img/h-logo.png" alt="Owl Image"></div>
      <div class="item"><img src="resources/img/a-logo.png" alt="Owl Image"></div>
      <div class="item"><img src="resources/img/am_logo.png" alt="Owl Image"></div>
       ...
    </div>

For CSS styling, this is what I have:

.owl-carousel .item{
    margin: 3px;
}

.owl-carousel .item img{
    display: block;
    width: 100%;
    height: auto;
}

In addition, I included the following JavaScript snippet in my HTML:

<script>


$(document).ready(function() {

  $(".owl-carousel").owlCarousel({

      autoPlay: 3000, //Set AutoPlay to 3 seconds

      items : 4,
      itemsDesktop : [1199,3],
      itemsDesktopSmall : [979,3]

  });

});


</script>

Lastly, I made sure to include these scripts and styles in my project file:

<script src="vendors/js/owl.carousel.js"></script> 
<link rel="stylesheet" href="vendors/css/owl.carousel.css" type="text/css">
<link rel="stylesheet" href="vendors/css/owl.theme.css" type="text/css">
<script src="https://cdn.jsdelivr.net/jquery/3.0.0-beta1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery/3.0.0-beta1/jquery.js"></script>

How can I troubleshoot why the slider is not visible? Is there a simpler method to achieve the desired slider appearance?

Answer №1

To properly integrate the owl carousel into your project, make sure to include the owl carousel file after you have included JQuery. Here is an example of how to do it:

<link rel="stylesheet" href="vendors/css/owl.carousel.css" type="text/css">
<link rel="stylesheet" href="vendors/css/owl.theme.css" type="text/css">
<script src="https://cdn.jsdelivr.net/jquery/3.0.0-beta1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery/3.0.0-beta1/jquery.js"></script>
<script src="vendors/js/owl.carousel.js"></script> 

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

Transferring an image to an internet-based storage system/database through XMLHttpRequest (XHR)

After reading several posts on similar topics, I have yet to find the specific information I need. Currently, I am working on a web application (utilizing HTML5 and Javascript) that includes a photo-taking feature. I am looking to then save these photos t ...

Automatic File refresh in Javascript without page reload

My webpage includes a javascript file that is called in the head tags of the document. I need this javascript file to reload every 30 seconds. In my research, I found issues with pulling a locally stored copy of the file and potential cross-browser compat ...

Why isn't it working? Looking for a script that adds a class when the element is empty?

I have a script that should add the class "leftmax" to the li element with id "spect" when the div element with id "tab2" is empty, but it doesn't seem to be working. Can someone provide some assistance? <script type="text/javascript"> $(funct ...

Centered CSS navigation bar without any spacing between the buttons

Good evening everyone, I am looking to create a navigation bar that is centered on the screen with no gaps between the buttons. I have tried using 'float:left' to close the gaps, but this aligns the navigation bar to the left. Without 'floa ...

Immediate self-invocation occurs within a JavaScript function

My goal is to dynamically create a DOM button object with JavaScript, and it seems to be happening perfectly fine. However, I'm facing an issue where if I try to assign another JavaScript function to one of the buttons, the other script triggers itsel ...

Converting Milliseconds to a Date using JavaScript

I have been facing a challenge with converting milliseconds data into date format. Despite trying various methods, I found that the solution provided in this link only works for a limited range of milliseconds values and fails for higher values. My goal is ...

Issue with Jquery Ajax call disrupting typical behavior of other links

On a page containing several "normal" links (<a href=XXX>), there is a section that retrieves data using the jQuery Ajax method. The retrieval process might take anywhere from 20 to 30 seconds. I've noticed that if I click on one of the links w ...

Using AJAX to bind dropdown with JSON data

I'm currently working on populating a drop-down list using a .json file. Here is my ActionMethod: public JsonResult LoadDropdown() { using (StreamReader sr = new StreamReader(Server.MapPath("~/Scripts/Drop1.json"))) { ...

Show a dynamic dropdown box using AJAX if a specific variable is present

I am currently working on implementing an ajax call for a dynamic dropdown box. Once the variable $place is available, it triggers an ajax call to populate the dropdown box. My goal is to pass the variable $place to listplace.php, encode it as JSON data ...

Is it possible to retrieve all PHP classes that share a common word in their names?

Is there a way in PHP to match all classes with the same word? For example: <div class="classeby_class"> <div class="classos-nope"> <div class="row"> <div class="class-show"></d ...

jQuery dropdown switch is malfunctioning and not functioning properly

I have been attempting to display and conceal certain HTML elements based on selected options in a dropdown menu using a switch statement instead of an if/else condition. You can find a demo on a fiddle. Any assistance would be appreciated. HTML <body ...

Toggle the visibility of the navigation bar in Angular based on the user

I have implemented rxjs BehaviorSubject in my login page to transmit data to auth.service.ts, enabling my app.component to access the data stored in auth.service.ts. However, I now require the app.component to detect any changes made to the data in auth.se ...

One PHP variable that can hold two distinct values

I've been working on a basic website using a local apache webserver with CGI to run my Python scripts. In addition, I'm incorporating jQuery for AJAX requests to the Python scripts to make it asynchronous. PHP comes into play for a login button t ...

Displaying a specific number of items from an array using Rails

Looking to showcase only 4 items from an array at a time? Simply click "Next" to reveal the next set of 4 items. Here's the code: <table> <tr> <th></th> <th>3</th> <th&g ...

Tips for retrieving the value of an input field using Material-UI

Currently, I am implementing Material-UI within a React project. render(){return ( <input type="range" min="0" max="100" value="100" onChange={this.handleMasterVolume} class="master-gain form-control ...

Error: The function $.ajax(...).done(...).fail(...).complete does not exist

Out of nowhere, I started encountering the error message below: TypeError: $.ajax(...).done(...).fail(...).complete is not a function Below is my code snippet: this.sendRequest = function (type, extension, data, successCallback, successMsg, failMsg, ...

The footer has a wandering nature, constantly moving around as the wrapper mysteriously vanishes

I understand that this question has been asked multiple times before, but I am struggling to get it right! My goal is to keep the footer at the bottom of the page, but it seems to be acting strangely. Here is my HTML: <!DOCTYPE HTML> <html& ...

Tips for populating a row in the Bootstrap grid with the assistance of the mr or ml classes

I've come across a roadblock here. The issue arises when attempting to fill the Bootstrap row while also utilizing mr (or ml). Initially, I attempted to calculate the numbers so that they add up to 12. In my 3-column layout, I have a column of 5, fol ...

Retrieve the username from one table and insert it into a different table

Learning PHP has been quite a challenge for me today. I've been trying to pull information from a user's database into a file and then use it in a form to insert into another table. My issue is with getting the user's ID and username. I suc ...

Excessive letter spacing in font-face causing display issues on Apple devices such as iPhone and iPad

Recently, I designed a website using some unique fonts that aren't supported on all devices. To ensure compatibility across various platforms, I converted the fonts to all major file formats, including SVG for iPhones and iPads. Surprisingly, this sol ...