Creating a 3D slider on Owl-carousel 2: A Step-by-Step Guide

I am trying to create a slider using Owl-carousel, but I'm having trouble implementing it. I came across this example https://codepen.io/Webevasion/pen/EPMGQe

https://i.stack.imgur.com/KnnaN.jpg

However, the code from this example doesn't seem to work for me. It appears to be from an old version of owl-carousel and I think the solution may lie in afterAction. But what has afterAction been replaced with in the second version?

Here is my code:

$(document).ready(function($) {
    $('.gallery').owlCarousel({
      loop:true,
      margin:0,
      responsiveClass:true,
      items:7,
      center: true,
      nav: true,
      navText : ["<i class='fas fa-chevron-left'></i>","<i class='fas fa-chevron-right'></i>"],
      onDragged: callback
      
    });
    
    $(".center").next().addClass("near");
    $(".center").prev().addClass("near");
    
    $(".center").nextAll().eq(1).addClass("next");
    $(".center").prevAll().eq(1).addClass("next");
    
    $(".center").nextAll().eq(2).addClass("last");
    $(".center").prevAll().eq(2).addClass("last");
    
    $(".center").nextAll().eq(3).addClass("lastest");
    $(".center").prevAll().eq(3).addClass("lastest");... 
}

The full code can be found at jsfiddle.net/kzcbdLjs/

Visit the website at tempes74.beget.tech

Answer №1

Perhaps the best course of action would be to exclude the use of the dollar sign in .ready(function($)

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

Conceal the Download Button Effectively

I operate a website for playing audio files and I am looking to prevent users from downloading the sounds using the download button in the HTML audio element. Here is what I came up with: <audio src="sound.mp3" controls controlsList="nodownload">< ...

Default close x button not functioning to close modal dialog

When I click the [X] button in my modal dialog box, it doesn't close. Here is an example of my code: $('#apply_Compensation_Leave').show(); This is the modal code: <div class="modal" id="apply_Compensation_Leave" tabindex="-1" role="di ...

Words program with the header feature incorporated

Hello, I am currently working with Laravel to build an HTML page and have successfully converted it to MS Word. However, I am now trying to add a header inside. Can anyone help me achieve this? Here is a snippet of my code: <body> <a class= ...

"Utilizing the power of Angular 6's JSON pipe

Looking for a well-structured formatted JSON, but all I get is confusion and this strange image: Does anyone have any insights on what might be causing the issue? HTML <span style="font-weight: 500;">Payload Data: </span> <pre><co ...

Click on the entire table to be redirected to the specified link

Currently, I am facing an issue with styling my tables as links. I have 3 tables and I want each table to be a clickable link. However, after implementing the links, I am unable round the corners of the tables. I envision the final look to be similar to t ...

I'm new to Angular and I'm wondering how to close the panel by clicking on the 'x' button and also by clicking on the screen. Can anyone help me with this

Below is the HTML code I use for my button: <button class="btn btn-outlined " ng-click="vm.showCommentBox1()">Notify All</button> <div class="comment-box custom saveAll" ng-if=""><div class="panel panel-default"> ...

Navigate to the previous or next page using JavaScript

I've been struggling to figure out how to navigate one page up and down using simple links, but I haven't found a solution that works for me. The URL I am working with is: . When the "next page" button is clicked, it should go to ?page=2, and whe ...

Creating a login form using HTML, PHP, and MySQL: A step-by-step guide

UPDATE [13.10.16] After revisiting a previous question of mine on stackoverflow that has low reputation, I realized the reasons behind it and decided to update it to make it more relevant. When I initially asked this question, I was attempting to create ...

The DataTables plugin is failing to show the server response

I have been attempting to retrieve data from an API using AJAX Datatables. Although the data appears to be successfully retrieved and displayed in the network tab, it is not being rendered properly within the DataTable. Below is my AJAX Call: "ajax": { ...

Is there a way to automatically redirect a webpage based on the URL that is entered

Looking for a solution where a page checks a typed link upon loading, such as: www.test.com/myphp.php=10 If it detects a specific number, it should redirect to another link. For example: Upon finding www.test.com/myphp.php=10, it redirects to www. ...

Having trouble with Firebug throwing a '$(' error message?

I'm encountering a peculiar issue in Firebug that I'm not experiencing in Webkit. The error being displayed is '$(' in Firebug. Here is the code that seems to be causing this problem: $.getScript("http://kylehotchkiss.com/min/?g=packa ...

Using HTML Select field to make ajax calls to web services

When working with modals that contain forms to create objects for database storage, there is a Select field included. This is the code snippet for the Select field: <div class="form-group" id=existingUser> <label>Username</label> < ...

Dynamically changing the borders of WebGL canvases: a guide to adding and

Here is my code snippet for creating an HTML canvas: <canvas id="glCanvas" class="canvases" width="20" height="20></canvas> To set the color, I am using the following: gl.clearColor(0.0, 0.0, 0.0, 1.0); gl.clear(gl.COLOR_BUFFER_BIT); I am w ...

Adding HTML components to an image with adjustable dimensions

A graphic designer has provided us with an image featuring three selection boxes. I implemented the necessary HTML elements and CSS to display three overlapped selection boxes on top of the image, using pixel values for positioning. However, the original ...

Mysterious failure of JavaScript regular expression when encountering the term "tennis"

We developed a JavaScript script to detect duplicates or potential duplicates, but it seems to have some issues with certain words like "tennis." The script functions correctly in most cases, but fails when analyzing phrases related to the word "tennis" fo ...

Issue with Chrome when using angled CSS gradient backgrounds

I'm encountering a problem with a CSS gradient background on a div that is set to 100% width and height. This issue only seems to be happening in Chrome. I have some content placed over the div, and when I hover over links within that div, the gradien ...

The value binding for input elements in Angular 4 remains static and does not reflect changes in the UI

Struggling with binding input to a value in angular 4? Take for example [value]="inputFrom". Sometimes it updates when I change inputFrom, other times it doesn't. How can I ensure the input always changes whenever inputFrom changes, not sporadically? ...

What is the method for placing a badge above a Font Awesome icon?

Is it possible to add a badge with numbers like 5, 10, or 100 on top of the Font Awesome symbol (fa-envelope)? I am looking for something like this: However, I am struggling to figure out how to place the badge on top of the symbol. You can see my attempt ...

Here's a guide on how to retrieve the element type or tag type in Selenium using C#

Let's say we have a tag like this: <a class = "fp-anchor fp-forgot-password pull-right" href = "/Account/ForgotPassword">Forgot Password?</a> == $0 In order to determine the type of element, we need to identify if it is a hyperlink. For ...

Is there a way to consistently monitor the visible image's height?

I am facing an issue with a slider of images where I need the height of the slider to always match the height of the currently visible image within the slider. I have tried implementing code that automatically detects the height of the image within the sl ...