Issues with navigating sliders

I've encountered a problem with my slider arrows while following a YouTube tutorial. They are supposed to appear next to the picture and testimonial, but instead, they are showing up at the top. This issue wasn't present initially, but after encountering an error with glider.js, I had to rewrite the code which caused this flaw to manifest.

HTML Code

    <section class="testimonials-section">
      <div class="wrapper">
        <h2>Testimonials</h2>

        <div class="testimonials container">
          <div class="testimonials">
            <div class="testimonial">
              <div class="slide-container">
                <div class="content">
                  <p>
                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
                    Fuga, dolorem? Soluta aperiam maxime nam ducimus ab fuga. 
                    Libero, consequatur placeat! Explicabo aut labore enim? Tenetur, esse a. 
                    Quidem, deleniti provident.
                  </p>
                  <div class="name">
                    <strong>Darlene Richards,</strong> Amazon
                  </div>
                </div>

                <img src="images/testimonial1.png" alt="">
              </div>
            </div>

            <div class="testimonial">
              <div class="slide-container">
                <div class="content">
                  <p>
                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
                    Fuga, dolorem? Soluta aperiam maxime nam ducimus ab fuga. 
                    Libero, consequatur placeat! Explicabo aut labore enim? Tenetur, esse a. 
                    Quidem, deleniti provident.
                  </p>
                  <div class="name">
                    <strong>Peter Williams,</strong> Louis Vuitton
                  </div>
                </div>

                <img src="images/testimonial3.png" alt="">
              </div>
            </div>

            <div class="testimonial">
              <div class="slide-container">
                <div class="content">
                  <p>
                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
                    Fuga, dolorem? Soluta aperiam maxime nam ducimus ab fuga. 
                    Libero, consequatur placeat! Explicabo aut labore enim? Tenetur, esse a. 
                    Quidem, deleniti provident.
                  </p>
                  <div class="name">
                    <strong>Tara Green,</strong> Ferrari
                  </div>
                </div>

                <img src="images/testimonial2.png" alt="">
              </div>
            </div>
          </div>

          <span class="slider-prev">
            <img src="images/left-arrow.svg" alt="">
          </span>

          <span class="slider-next">
            <img src="images/right-arrow.svg" alt="">
          </span>
        </div>
      </div>
    </section>

CSS Code

.slider-prev,
.slider-next {
    position: absolute;
    top: 68px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.06);
    border-radius: 50%;
    cursor: pointer;
}

.slider-next {
    right: 0;
}

https://i.sstatic.net/zTs6Y.png https://i.sstatic.net/MPcLD.png

javascripthtmlcsssliderfrontend

Answer №1

The reason for this phenomenon is due to the specific functionality of the css position property learn more

To potentially resolve this issue, consider adding the following line:

update utilize the .testimonials.container selector instead of .testimonials

.testimonials.container  {
  position: relative;
}

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

Learn the secrets of displaying a pop-up alert message seamlessly without interrupting the page's rendering process. Additionally, discover how to effortlessly refresh a chart every

I need to display a pop-up if the value is less than 3. I have tried using the alert function, but it causes the page to not render. How can I show the pop-up without blocking the page and refresh the chart every 30 seconds? <script> ...

javascriptangularjsjsonajaxfusioncharts

Dynamically insert ID into a div element

Hi there, I have an ID "network" in the div class "parent". Inside this parent div, there is a for loop that generates multiple IPs. Whenever I click on a specific parent IP, it should call its child div. How can I dynamically generate IDs so that I can pl ...

jqueryhtmljquery-ui

Choose the text that appears in the input or textbox field when tapping or clicking on it

Desperately Seeking a Clickable Textbox The Quest: In search of a cross-browser textbox/input field that can select its content on click or tap. An elusive challenge haunting developers for years. The Dilemma: Using a touch device triggers the tap e ...

javascriptjqueryiosselecthtml-input

Identifying and detecting Label IDs when clicked using the for tag

I am facing an issue with labels and input fields in my code. I have multiple labels that trigger the same input field, but I want to know which specific label triggered the input field. <label id="label1" for="input1">Document1</label> <la ...

javascriptjqueryhtml

Utilizing JSON format, handling special characters, and storing data in a database

My friend approached me with a question and although I wanted to offer immediate help, I realized that seeking advice from others may provide better solutions. Situation: Imagine there is a Form that includes a RichText feature: DHTMLX RichText (). This R ...

javascripthtmljsonajax

What safety measures should be implemented when granting users permission to modify HTML and CSS on your site?

I'm really impressed by the customization options on Tumblr. Users can edit the HTML and CSS of their profiles, which is something I'd love to incorporate into my own site. However, I'm concerned about the security implications of allowing t ...

htmlcsscustomizationsecurity

No Access-Control-Allow-Origin or Parsing Error with jQuery

I am attempting to use ajax from a different server to request data from my own server as a web service. The response is a valid json generated by json_encode. {"reference":"","mobile":"","document":"","appointment":""} To avoid the 'Access Control ...

javascriptphpjqueryajaxjson

Is it necessary to utilize process.env in node.js?

In my project, there is a .env file containing the following: ABC='abc' While in my app.js I can access the value abc using process.env.ABC, how can I require it to be used in my models' files? Attempting to use process.env.ABC in my model ...

javascriptnode.jsexpress

Display additional images with "Show More" view

I'm looking to create a view similar to the one shown in this image: https://i.stack.imgur.com/AZf61.png Within my FlatList, all the data is being populated including these thumbnails. These thumbnails are stored in an array of objects where I retri ...

javascriptiosreactjsreact-native

Convert a string in JavaScript by replacing spaces with '+' and use it as a link for a Google Search

I need to create a link to search Google with a specific text. To do this, I have to replace the spaces in the text with '+' and include it in the href attribute. Here is how it can be done in HTML: <a href="#" id="afd_gsearch">Search Goo ...

javascriptreplace

Passing a variable between functions in JavaScript: Tips and tricks

let chart; let data = new Array(); function handleClick() { data = document.getElementById('graph:hi').value; alert(data); } let chartData = new Array(66, 15, 2.5, 21.9, 25.2, 23.0, 22.6, 21.2, 19.3, 16.6, 14.8); alert(chartData); jQuery ...

javascript

What is the best way to dynamically add getJSON's data to a div whenever the loadmore button is clicked?

When a page loads, my getJSON function displays its output in a div called myDiv. Now, I am looking to add a button at the bottom of the page. When the user clicks this button, I want to trigger another call to getJSON. Each time the button is clicked, I ...

javascriptjqueryhtmlajaxgetjson

Expanding functions consist of numerous components

How can I modify this script to work on multiple elements? For example, if a user clicks on a specific link (see demo) labeled "I'd like to expand the article linked here", only that particular link should expand an element, not all like it currently ...

javascriptjquery

Using AngularJS to create interactive popups within leaflet maps

My map uses leafletjs to create markers such as ev124, ev125, and so on. In addition, there are links with a key attribute like <a ng-click="popup(evsi)" key="124">link</a> Using angular, I extract the key value this way: $scope.popup= funct ...

javascriptjqueryangularjsleaflet

Guide to retrieving information from an API and incorporating it into a fresh JSON structure

I am currently working on fetching data from an existing API endpoint and using a part of that data to create a new endpoint in Node.js with Express. Specifically, I am trying to retrieve the userId from https://jsonplaceholder.typicode.com/posts/1 and int ...

javascriptnode.jsapirestexpress

Every time I attempt to make a "post" request to the SailsJS server, I encounter a 403 CSRF Mismatch error

Having an issue with my sailsJS server. I am attempting to send a post request from a client on a different domain. I am sending _csrf from /csrfToken, but encountering a 403 csrf mismatch repeatedly. The client-side code appears as follows: $.ajax( ...

javascriptajaxcross-domainsails.jscsrf

Tips on incorporating a repeating gradient instead of a linear gradient

I have the following code for a linear-gradient. Click here to view the code Is there a way to modify it to use a repeating gradient instead? The goal is to maintain the same image but with a repeating gradient effect. background-image: repeating-linear ...

cssgradientlinear-gradientsrepeating-linear-gradient

Create a function that replaces items with alphabets

My goal is to create a straightforward hangman game. When a category is chosen and the "New Word" button is clicked, a random word from the selected list will be displayed as underscores. As letters are guessed and matched with those in the word, they will ...

htmlrandomhtml5-canvasdraw

Importing data from an external file into an array using AngularJS

Hey there, I'm new here on Stack and hoping someone can lend a hand because I've hit a roadblock! I'm working with an AngularJS script that generates multiple icons using data from a simple array. Each icon is linked to a YouTube video. Th ...

javascriptarraysangularjsjson

Using Vue.js to submit a form in Laravel and redirecting with a flash message

I am facing an issue where I have two components named Index and Create, loaded from separate blade files. The challenge is passing a flash message as a prop between these components due to their file separation. How can I redirect after submitting a form ...

javascriptlaravelvue.js