The alignment of text is being randomized within Owl-Carousel containers using HTML

I'm facing an issue with the display of my text, and I suspect it might be related to Owl-Carousel. Here is how it's appearing: https://i.sstatic.net/C03TL.jpg

Below is the HTML Code:

<div class="panel panel-casestudy" data-equalizer-watch="" style="height: 258px;">
<h4><strong>200% wzrost sprzedaży</strong></h4>
<p>W ciągu 2 lat współpracy sprzedaż wzrosła dwukrotnie, czyli z 40 tysięcy złotych miesięcznie na ponad 80 tysięcy złotych miesięcznie. </p>
<p><a href="/artykul/25,case-study.html">Czytaj więcej...</a></p>

In the HTML code, "200%" should appear as the first word. Additionally, the dots are positioned on the left side instead of at the end of the text.

I am utilizing Zurb Foundation Framework, Owl-Carousel-2, and data-equalizer from Foundation to ensure uniform sizing.

Your assistance in resolving this matter would be greatly appreciated.

htmlcsszurb-foundationowl-carousel

Answer №1

When initializing a new carousel instance, remember to set the rightToLeft property to true.

Update your JQuery code as follows:

$(".successstories").owlCarousel({
    loop:true,
    autoplay:true,
    stagePadding: 50,
    rightToLeft:false,
    autoplayTimeout:3000,
    margin:0,
    smartSpeed:800,
    nav: false,
    dots: false,
    responsiveClass:true,
    responsive:{
        0:{
            items:1
        }
    }
});

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

Pattern to locate a CSS class identifier

I've been working on creating a regex to match valid CSS class name structures. Currently, my progress looks like this: $pattern = "([A-Za-z]*\.[A-Za-z]+\s*{)"; $regex = preg_match_all($pattern, $html, $matches); However, there are certai ...

phpcssregex

Click to Resize Window with the Same Dimensions

I have a link on my website that opens a floating window containing more links when clicked. <a href='javascript:void(0);' onclick='window.open("http://mylink.html","ZenPad","width=150, height=900");' target='ZenPad'>&l ...

javascripthtmlcss

How can I prevent the CSS dropdown menu from causing the navigation bar to stretch in height?

I'm currently working on integrating a CSS dropdown menu into my navigation bar that will only appear when a user hovers over the settings icon. However, I've encountered an issue where hovering over the settings icon causes the dropdown menu to ...

jqueryhtmlcssruby-on-rails-4

Adjust jQuery UI's resize functionality to maintain the current total width

I arranged two containers horizontally using the position: absolute property. I am attempting to create a "resize bar" in the center that, when dragged, will expand one container while shrinking the other (thus maintaining the overall width). <div clas ...

jqueryhtmlcssjquery-uiresize

What is the best way to create a straightforward menu for my HTML game?

I have been working on a basic HTML game and it seems to be functioning more or less. I'm wondering if it's possible to create a simple menu with an image in the background and a "click to start" button within the same file. Any suggestions or ti ...

javascripthtmlmenu

What is the technique for transmitting a child element in VueJS?

Is there a way to include HTML code in a VueJS component and have it render properly within the component? <my-vue-component> <div> ect... </div> </my-vue-component> ...

javascripthtmlvue.js

Empty HTML fieldset

For a blog article I'm working on, I'd like to include a "Note" box that resembles a <fieldset> with a <legend> <fieldset> <legend>Note</legend> Please take note of this. </fieldset> (check out http:/ ...

html

Error: Incorrect syntax for server tag when using ImageButton in a datagrid row

Currently, I am facing an issue with the server tag in this ASP.NET C# code snippet. <asp:TemplateColumn HeaderText="Options"> <ItemTemplate> <asp:ImageButton ID="imgbuttEditVendor" runat="serve ...

c#htmlasp.netdatagridimagebutton

ReactJS presents an issue where buttons on the navigation bar are not properly aligned

I am currently utilizing the navbar component from Bootstrap 5, and I've encountered a UI problem. What is my current setup? This is the existing structure of my navbar: https://i.sstatic.net/eETzd.png What is my desired outcome? I aim to have the n ...

javascripthtmlcssreactjsbootstrap-4

html5 - Safari browser: Hover effects for rounded images

Encountering an issue on my website with a video link here. The problem is specific to Safari. Below is the HTML code: <div class="item"> <div class="img-wrapper"> <img class='img'> </div> </div> An ...

htmlcsssafari

What can I do to adjust the Navigation Item and Dropdown placement?

I've been working with Bootstrap dropdowns, but they're not aligning correctly for some reason. I've tried multiple solutions like updating my Bootstrap versions, but none of them seem to be working. Here is the code: <script src=" ...

htmlcssnavigationbootstrap-5

Safari experiencing a problem with the CSS mix-blend-mode: difference

I have been experimenting with a mouseover effect using mix-blend-mode. The effect is functioning as desired in Chrome and Firefox. .btn-anim { position: relative; display: inline-block; overflow: hidden; padding: 1.25rem; color: #fff; --x: 6 ...

cssmix-blend-mode

Tips on adjusting the width of a border

I'm facing a challenge with my select box setup: <select class="selectpicker" multiple data-live-search="true" name="color[]" title="Nothing selected yet"> <option class="" style="border-bottom:2px solid; border-color:red" value="">Red&l ...

htmlcss

A continuous loop of text is displayed in a slideshow format, with different image files used for the navigation buttons "back", "stop", and "forward"

I am in need of a unique slide show that displays text exclusively attached to CSS, with image files for the navigation buttons. I have been searching for days without success, as most options available are for image slideshows and not suitable for my text ...

javascriptjquerycsstextslideshow

Dealing with problem of highlighting links in Android WebView

I am currently using an html app that is being loaded in a WebView. My goal is to prevent a specific link from loading when clicked by using shouldOverrideUrlLoading, where I return true to stop the URL from loading. While this method works well, the link ...

androidcsshyperlinkwebviewhighlight

Selecting options from a pop-up menu

I've created a dropdown menu with what seems to be correct code. However, there are no errors showing up, but the selected item from the menu is not alerting as expected. Here is the jsfiddle link $(document).ready(function () { // This function ...

javascriptjqueryhtml

Tips for customizing the appearance of the react-stripe-checkout form

Could someone please provide guidance on applying custom styles to the react-stripe-checkout form component, such as changing the background color? Visit this link for more information ...

javascriptcssreactjsformsstripe-payments

Issues have been reported with the SVG filter URL functionality in Angular 4

Hey there! I'm currently working on drawing a line using SVG in Angular and incorporating some filters for glow effects. However, I've run into an issue where the filter URL is not functioning properly in the browser - nothing is being displayed ...

htmlcssangularsvg

The jQuery tooltip fails to function properly after the AJAX content is loaded

I have been using a tooltip script that can be found at: This is the script I am using, with a few modifications: $(document).ready(function() { $("body").on("mouseover", ".tip_trigger", function(){ tip = $(this).find('.tip&apos ...

phpjquerycsstooltip

Adjust the color of the open icon (up chevron) on the Bootstrap 5 accordion button

After finding a helpful answer on Stack Overflow, I successfully changed the fill color of Bootstrap 5's down-chevron svg using CSS. Now, I am attempting to locate the URL for the up-chevron (open icon) so I can modify its fill color as well, but it i ...

cssbootstrap-5