What is the best way to center the navigation buttons on a responsive slider that spans the entire width of

Issue

I am facing a challenge in responsively aligning the previous and next navigation buttons using Owl Carousel v2. I need these buttons to fit within the offset column of the centered container and maintain their overlay position down to 767px, instead of being positioned at the edge of the screen.

There is an included example fiddle below showcasing a full-width background image that remains for the first two slides only, with the center text changing and then the background changing on the third slide along with the text.

Code

HTML

<div class="background-full background-one">
    <div class="carousel">
        <div class="item">
            <div class="container carousel-container">
                <div class="row">
                    <div class="col-sm-5 hidden-xs col-sm-offset-1 carousel-text">
                         <h1>Section Title</h1>

                        <p class="hidden-xs">Lorem ipsum dolor sit amet, 
                        consectetur adipisicing elit, sed do eiusmod tempor 
                        incididunt ut labore et dolore magna aliqua. Ut enim 
                        ad minim veniam, quis nostrud exercitation ullamco 
                        laboris nisi ut aliquip ex ea commodo consequat.</p>
                        <p class="hidden-xs">Lorem ipsum dolor sit amet, 
                        consectetur adipisicing elit, sed do eiusmod tempor 
                        incididunt ut labore et dolore magna aliqua. Ut enim 
                        ad minim veniam, quis nostrud exercitation ullamco 
                        laboris nisi ut aliquip ex ea commodo consequat.</p>
                        <button>Link</button>
                    </div>
                    <div class="col-sm-5 col-xs-12 carousel-image">
                        <img alt="" class="img-responsive" src="http://www.placehold.it/458x376" />
                    </div>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="container carousel-container">
                <div class="row">
                    <div class="col-sm-5 hidden-xs col-md-offset-1 carousel-text">
                        <h1>Section Title 2</h1>

                        <p class="hidden-xs">Lorem ipsum dolor sit amet, 
                        consectetur adipisicing elit, sed do eiusmod tempor 
                        incididunt ut labore et dolore magna aliqua. Ut enim 
                        ad minim veniam, quis nostrud exercitation ullamco 
                        laboris nisi ut aliquip ex ea commodo consequat.</p>
                        <p class="hidden-xs">Lorem ipsum dolor sit amet, 
                        consectetur adipisicing elit, sed do eiusmod tempor 
                        incididunt ut labore et dolore magna aliqua. Ut enim 
                        ad minim veniam, quis nostrud exercitation ullamco 
                        laboris nisi ut aliquip ex ea commodo consequat.</p>
                        <button>Link</button>
                    </div>
                    <div class="col-sm-5 col-xs-12 carousel-image">
                        <img alt="" class="img-responsive" src="http://www.placehold.it/458x376" />
                    </div>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="background-full background-two">
                <div class="container carousel-container">
                    <div class="row">
                        <div class="col-sm-5 hidden-xs col-sm-offset-1 carousel-text">
                            <h1>Section Title 3</h1>

                            <p class="hidden-xs">Lorem ipsum dolor sit amet, 
                            consectetur adipisicing elit, sed do eiusmod tempor 
                            incididunt ut labore et dolore magna aliqua. Ut enim 
                            ad minim veniam, quis nostrud exercitation ullamco 
                            laboris nisi ut aliquip ex ea commodo consequat.</p>
                            <p class="hidden-xs">Lorem ipsum dolor sit amet, 
                            consectetur adipisicing elit, sed do bijective tempor 
                            incididunt ut azimuth angle et dolore magna aliqua. Ut enim 
                            ad minim veniam, deemed nostrud nature ullamco contention 
                            lab orphan tutti au ipsum equation intestate neer times aostrut nulloscent thermostatic suppressor tritium distance ekstru compositum ortusat comfortlessquez.</p>
                            <button>Link</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

/*owl-nav*/
.owl-prev {
    position: absolute;
    top: 40%;
    left: 0;
}
.owl-next {
    position: absolute;
    top: 40%;
    right: 0;
}
.fa {
    font-size: 80px;
    color: #fff;
}
@media (max-width:767px) {
    .owl-nav {
        display: none;
    }
}
/*owl-dots*/
.owl-dots {
    position: absolute;
    bottom: 15px;
    left: 50%;
    margin-left: -27px;
}
.owl-dot {
    background: #fff;
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 4px;
    text-indent: -999em;
    border-radius: 6px;
    cursor: pointer;
    -webkit-transition: background .5s, opacity .5s;
    -moz-transition: background .5s, opacity .5s;
    transition: background .5s, opacity .5s;
}
.owl-dot.active {
    background: #333;
}
/*generic-carousel*/
.carousel-text, .carousel-image {
    margin-top: 20px;
    margin-bottom: 20px;
}
.background-full {
    background-position: 50% 50%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    display: block;
    width: 100%;
    position: relative;
    overflow: hidden;
    height: 410px;
}
.background-one {
    background-image: url(http://www.placehold.it/2560x410/ff6600);
}
.background-two {
    background-image: url(http://www.placehold.it/2560x410/ff0066);
}
/*bootstap-resets*/
@media (min-width: 1200px) {
    .carousel-container {
        width: 970px;
    }
}

Additional Comments:

  • This project utilizes the Bootstrap framework.
  • The spacing must remain consistent from 768px upwards.
  • The current percentage positioning does not provide the desired alignment consistency.
  • Avoidance of multiple media queries for positioning is preferred.
  • Inclusion of a JavaScript solution is acceptable.
  • All content within the central container should remain functional and clickable.
  • Please disregard any layout issues present in the examples provided, as they serve as code snippets.
  • Any further questions or clarifications can be addressed for better assistance.

Examples

Related Fiddle

Full Screen Example

We appreciate your time and support!

javascripthtmlcss

Answer №1

I have discovered a workaround that, while not flawless, serves its purpose well for me. My approach involves using JavaScript to append a responsive Bootstrap container to the parent element. Subsequently, I ensure that the child div matches the width of its parent when the page is loaded or resized.

$(window).on("resize load", function () {
    $('.owl-controls').addClass('container');
    $('.owl-nav').width($('.owl-nav').parent('.container').width());
});

Check out the demo here.

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

Circular loading bar in React with no duplicate animations

I am trying to figure out a way to make the loader for React Circular Progressbar load only once without repeating the sequence. After reviewing all the documentation, I could not find any information on how to achieve this. Additionally, other components ...

javascriptcssreactjsnpmreact-hooks

Erase every class within one second using only Pure Javascript

After trying to remove all classes after a second with no success, I attempted the code below: function copyLink() { var text = document.getElementsByClassName("text"), len = text.length; for(i = 0; i < len; i++) { text[i].classList.ad ...

javascript

Tips for sending form data as JSON to a servlet with AJAX:

I am struggling to send login information in JSON format to a servlet using AJAX. The issue I'm facing is that the servlet is receiving null values. Interestingly, my servlet functions properly when I transmit the data without utilizing AJAX. However, ...

javascriptjavajqueryajaxservlets

Conceal a button using an AJAX POST request

I'm encountering an issue with my Ajax post where I am trying to disable the button used to submit data. I've reviewed my code and it seems accurate, but the button is not getting disabled. I attempted using $("#refreshButton").attr("disabled", t ...

javascriptajaxjquery

The fonts appear differently when working on a Mac but show up as Times New Roman when displayed on Windows in development

Currently, I am utilizing react combined with nextjs for server-side rendering and bootstrap. Within my component, I have integrated bootstrap via a CDN: <Head> <title>{title}</title> <meta charSet="utf-8" /> < ...

cssreactjsfontsbootstrap-4next.js

Combining two THREE.js scenes without erasing the first one

I'm facing an issue where I am attempting to overlay two scenes in my rendering process, but the second scene is completely removing the content of the first scene. Here is how my renderer is set up: this.renderer = new THREE.WebGLRenderer({ antia ...

javascriptthree.js

Electron Web Workers do not have compatibility with NodeJS modules

I'm currently working on a desktop application using Electron paired with ReactJS. From the initial renderer process, I create a hidden BrowserWindow to launch another renderer process. Within this new renderer process, I set up a web worker that wil ...

javascriptnode.jselectronweb-worker

Keep only the selected properties in the object and eliminate all others

I am faced with a challenge where I need to eliminate array members that do not have a certain property. Take for example this scenario: const idToKeep = 1; const objList = [{ id: 1, name: 'aaa', }, { ...

javascripttypescript

Modify a unique custom binding handler in such a way that it is designated using an Immediately Invoked Function Expression

I am currently working on improving a custom binding handler by converting it into an Immediately Invoked Function Expression (IIFE). Despite researching IIFE online, I am still unsure of how to make the necessary changes to my custom handler. Can someon ...

javascriptjqueryiife

The AJAX email submission form is not functioning properly

Recently, I have upgraded my email sign-up form on the website to include validation. However, after adding the validation, the form no longer sends and an error message is not displayed. Upon inspecting, I found the following error: TypeError: null is ...

javascriptphpajaxformsvalidation

Load suggestions from Material UI AutoComplete dynamically based on user input

I am facing a challenge with an Autocomplete component that needs to handle a large data list, up to 6000 elements, and display suggestions based on user input. Due to the sheer number of options, when a user types on a slower computer, there is a noticeab ...

javascriptreactjsinputautocompletematerial-ui

Regular intervals and asynchronous JavaScript and XML (AJAX) requests are

There is a simple chat tool in place to ensure the chat room stays updated: setInterval (loadLog, 2500); function loadLog(){ //Scroll height prior to the request var oldScrollHeight = document.getElementById("chatMessages").scrollHeight - 20; ...

javascriptjqueryajax

A guide on transferring a file from an HTML selector to CPanel storage using VueJS

I am attempting to store a file from an html file input into my cloudPanel storage, with the intention of being able to retrieve it later using html. Despite searching for solutions, none have seemed to work as expected - although no errors are shown in th ...

javascripthtmlvue.jsvuejs3

Angle in degrees of the current perspective camera in three.js

Working on a project where I am utilizing a PerspectiveCamera that is being rotated using vrcontrols from version 69. There comes a point where I need to determine the current viewing angle degrees (both horizontally and vertically) at which direction th ...

javascriptthree.jsperspectivecamera

What is the best way to automatically assign a class attribute to all form widgets in Django?

Whenever I create a form using Django, I want the input tag to automatically include a specific CSS class (form-control). Currently, I have to manually add lines of code in my forms.py file for each field like this: class InsertItem(forms.ModelForm): ...

pythoncssdjangoforms

selector-aware tooltip plugin

Is there a way to incorporate the tooltip plugin with jQuery selectors? I tried this: <span class="tooltip" title="You can use letters"> But I would like to implement it using selectors. Here's what I attempted: <script> $(' ...

javascriptjquery

Troubleshooting problem with JQuery window printing capability

After creating a paper with dimensions of 21.0 cm width and 29.7cm height, I encountered an issue where the printer output three papers instead of just two. I am not sure where I went wrong in my setup. You can find the source code here. window.print(); ...

jquerycssgoogle-chromeprintingwindow

Adjusting Iframe to Fit Entire Screen Using CSS

I've been working on making an iframe adjust to fit the screen size, regardless of the user's resolution. However, no matter what I do, I can't seem to get it just right. It always ends up either too small or with a double scroll bar issue ( ...

htmlcssiframe

What causes the input field to lose focus in React after typing a character?

Currently utilizing React Mui for components and encountering no errors in either the Chrome inspector or terminal. How can this be resolved? No error notifications are being displayed by eslint or Chrome Inspector. The form submission functions correctl ...

javascriptreactjsmaterial-ui

Customize Selectpicker Background Color in Bootstrap 5

In our environment, we follow the standard of setting every input field to have a background color of lightgoldenyellow. I am encountering an issue with setting the background-color of the selectpicker in Bootstrap 5. Below is the code I am using: Additi ...

cssbootstrap-5bootstrap-selectpicker