Is it possible to adapt Owl Carousel Liquid to function with percentages?

After successfully installing the owl carousel plugin, I noticed that it does not scale with the viewport size. This has been bothering me as I want the carousel to resize along with the items when the viewport becomes smaller. I attempted to set responsive: "false" and then defined a custom percentage width for the .owl-item class using !important. While this did work for the items themselves, they did not scale as I had hoped because the sliding stage or .owl-wrapper is fixed in PX.

I even tried overriding the .owl-wrapper width to 400% but encountered a new issue - I was unable to slide to the last item. I have prepared a clean JSfiddle for reference.

Visit the JSfiddle link here.

.owl-carousel .owl-item{
    float: left;
    width: 4% !important;
}

.owl-carousel .owl-wrapper{
    width: 400% !important;
}

If anyone could provide insight into what I might be doing wrong, I would greatly appreciate it. Is it simply not possible to achieve a fully liquid design with the owl carousel? Perhaps this issue only arises when attempting to create a liquid image slider?

jquerycssowl-carousel

Answer №1

Understanding your goal may be a bit challenging, but if you're aiming to replicate the responsive feature of the Owl Carousel Page, keep in mind that the responsive property isn't just a true/false value. It actually consists of breakpoints and their corresponding behavior settings.

Check out this Demo Fiddle for reference

responsive:{
    0:{
        items:1,
        nav:true
    },
    600:{
        items:3,
        nav:false
    },
    1000:{
        items:5,
        nav:true,
        loop:false
    }
}

To customize the carousel appearance at different breakpoints along with individual items, make sure to include responsiveClass:true, as mentioned in the API documentation:

responsiveClass:

Optional helper class. Add 'owl-reponsive-' + 'breakpoint' class to main element.

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

Using Phonegap to connect to MySQL Database

I am exploring the use of PhoneGap (Cordova3) and my goal is to create a screen that instantly pulls data from MySQL when it loads, allowing users to click on the results to navigate to another page with more details. Do I need to implement jQuery for thi ...

mysqljqueryjquery-mobilecordova

The sequence in which the Jquery .click() script executes

I have multiple radio buttons that, when clicked, should display the corresponding image with a fade-in effect. However, the functionality only works in the order in which the functions are written. Once the fourth function is executed, the previous ones s ...

jqueryhtmlfunction

Instead of using onload, activate function upon click instead

Upon page load, I have a function that executes: function loadData(page){ showLoading(); $.ajax({ type: "GET", url: "load_data.php", data: "page="+page, success: function(msg) { ...

javascriptjqueryajax

Stop options from being hidden in a select dropdown using HTML

Can I keep the options visible when a user selects an item in the 'select' dropdown? I want to add more options to the 'select' when the user clicks on the 'op2' item, without closing the list of options. <select> <o ...

javascriptjqueryhtmlselect

The significance of Z-index in Embedded Email Subscription Code

I am encountering an issue with a pop-up window I have created for visitors to sign up for our mailing list. The problem is that the CSS menu appears on top of the pop-up, despite setting the menu's z-index to 9999. How can I adjust the z-index in the ...

cssdrop-down-menuz-index

The slider feature is malfunctioning on Internet Explorer version 8

Hello everyone, I am facing an issue with my website located at: http://210.48.94.218/~printabl/ When viewed in IE 8, the slider is not functioning properly (it is showing collapsed between the menu and product images section) The theme used for my site ...

jquerycsswordpressinternet-explorerinternet-explorer-8

The error message "Uncaught TypeError: Unable to retrieve the 'lat' property of an undefined object when serializing leaflet data using $.param()" is displayed

Being a complete novice in JavaScript, I am experimenting with posting user location and map bounds using Leaflet and an AJAX call. While my event handler stateUpdater.onLocationFound successfully logs the user coordinates and map bounds, I encounter an is ...

javascriptjqueryajaxleaflet

Enter the UL element and modify the LI class if it contains the .has_children class

Seeking assistance in navigating through a UL element to modify the LI and nested UL classes when .has_children is detected. Take a look at this example: <ul class="nav navbar-nav"> <li class="first current parent">Link1</li> < ...

javascriptjqueryhtml

Creating a customized conditional overflow style in _document.js for Next.js

Is there a way to dynamically change the overflow style for the html and body elements based on the page being viewed? For instance, on the about page, I want to hide overflow for html but not for body, whereas on the contact page, I want to hide overflow ...

javascriptcssreactjsnext.js

Is it possible to use Jquery to select only every second option in a select

Currently delving into the world of Javascript and jQuery, I've encountered a puzzling issue in the code snippet provided below. My intention was to create a script that would synchronize the selection in the second dropdown menu with the one in the f ...

javascriptjquery

Utilizing AngularJS to extract data from a query string

After making significant progress on my previous project, I found myself in need of some final assistance that has proven to be elusive. I successfully built my entire angular controller and populated all the necessary data for the page. However, I am str ...

javascriptjqueryangularjs

Displaying multiple div elements when a button is clickedLet multiple divs be

ISSUE Hello there! I'm facing a challenge where I need to display a div when a button is clicked. The issue arises from having multiple divs with the same class, making it difficult for me to target each individual div... Image1 Image2 Desired Outco ...

javascriptjqueryhtmlcss

Select multiple items from a list in HTML using the power of jQuery with a Multi Select

I'm facing an issue with the multi-select box. I attempted to choose multiple values using jQuery, but only the last one seems to be selected. Can someone assist me, please? Below is my code: <script> $(function(){ <?php foreach ($selectd ...

phpjqueryhtml

Response from AJAX call displaying 'object object'

I have been searching high and low for the solution to this issue. Even though I have the script below, it keeps returning object object as the output: var states = (function () { var states = null; $.ajax({ type: &apos ...

javascriptjqueryjsonajax

What is the best way to loop through JSON properties and then assign their values to elements within an array?

After searching for solutions similar to my goal, I have yet to find one that fits exactly what I need. JSON is still new to me, so any guidance is welcome. In my ASP.NET MVC 5 application, the Web API controller returns the following JSON: { "id": ...

javascriptjqueryjsonajaxasp.net-mvc-5

My presentations are not functioning as expected, could there be a problem with my HTML, CSS, or JavaScript coding?

My website utilizes a Slideshow feature to display images for blog posts. Recently, I attempted to include multiple slideshows within an article, which unfortunately caused all of the slideshows to malfunction. As it stands now, when the code is executed, ...

javascripthtmljquerycss

Content moves as you scroll, not within a lightbox

I have implemented lightbox style overlays for my 'Read More' content on my website. However, I am facing an issue where the content within the lightbox does not scroll; instead, the background page scrolls. Any assistance with resolving this p ...

javascriptjqueryhtmlcsslightbox

Determine the identifier of the subsequent element located within the adjacent <div> using jQuery

I have a form with multiple input elements. While looping through some elements, I need to locate the id of the next element in the following div. You can find the complete code on jsfiddle $(":text[name^=sedan]").each(function(i){ var curTxtBox = $(thi ...

javascriptjquery

Colorful background visuals without any text

Can you achieve a background color effect using Stylus without any text? span { width: 5px; height: 5px; } span.red { background-color: #f00; } <span class="red"></span> ...

htmlcss

problem with the video pathway in the javascript document

I'm currently in the process of putting together a Video gallery playlist using HTML, CSS, and JavaScript. So far, I've set up the html and css files along with two js files. The first js file contains all the video information as shown here: ...

javascripthtmlcss