Positioning the navigation buttons along the edges

I'm struggling with creating a custom slider and am having trouble placing the navigation buttons on the sides. You can view the current layout on JSfiddle: http://jsfiddle.net/zfxrxzLg/1/

Currently, the navigation buttons are located underneath the slider which is not the desired placement. When attempting to move them to the sides, I either end up disrupting the slider or one button ends up on top while the other is at the bottom.

HTML

 <div class="gallery-wrap">
  <div class="gallery clearfix">
    <div class="gallery__item">
      <img src="http://gallery.photo.net/photo/8439353-md.jpg" class="gallery__img" alt="" />
    </div>
    <div class="gallery__item">
      <img src="http://gallery.photo.net/photo/8439353-md.jpg" class="gallery__img" alt="" />
    </div>

    <div class="gallery__item">
      <img src="http://gallery.photo.net/photo/8439353-md.jpg" class="gallery__img" alt="" />
    </div>

    <div class="gallery__item">
      <img src="http://gallery.photo.net/photo/8439353-md.jpg" class="gallery__img" alt="" />
    </div>

    <div class="gallery__item">
       <img src="http://gallery.photo.net/photo/8439353-md.jpg" class="gallery__img" alt="" />
    </div>
   </div>
  <div class="gallery__controls clearfix">
     *THE CODE FOR CONTROLS COMES HERE SOVERFLOW DIDN"T ALLOW ME TO POST IT FOR SOME REASON, BUT IT IS IN THE FIDDLE*
   </div>
 </div>

CSS

.gallery-wrap { 

margin: 0 auto;
overflow: hidden;
width: 432px;
}
.gallery { 
position: relative;
left: 0; 
top: 0; 
}
.gallery__item { 
float: left; 
list-style: none;
margin-right: 20px;
}
.gallery__img { 
    display: block;
    border: 4px solid #40331b;
    height: 80px; 
    width: 80px; }

.gallery__controls { margin-top: 10px; }
.gallery__controls-prev { cursor: pointer; float: left; }
.gallery__controls-next { cursor: pointer; float: right; }

.clearfix:after{
    content: '.';
    clear: both;
    display:block;
    height: 0;
    visibility: hidden;
}

jQuery

var totalWidth = 0;

$(".gallery__item").each(function(){
    totalWidth = totalWidth + $(this).outerWidth(true);
});

console.log(totalWidth);
var maxScrollPosition = totalWidth - $(".gallery-wrap").outerWidth();

function toGalleryItem($targetItem){
    if($targetItem.length){
        var newPosition = $targetItem.position().left;
        if(newPosition <= maxScrollPosition){


            $targetItem.addClass("gallery__item--active");


            $targetItem.siblings().removeClass("gallery__item--active");
          $(".gallery").animate({
                left : - newPosition
            });
        } else {

            $(".gallery").animate({
                left : - maxScrollPosition
            });
        };
    };
};

   $(".gallery").width(totalWidth);
$(".gallery__item:first").addClass("gallery__item--active");


$(".gallery__controls-prev").click(function(){
    var $targetItem = $(".gallery__item--active").prev();
    toGalleryItem($targetItem);
});


$(".gallery__controls-next").click(function(){
    var $targetItem = $(".gallery__item--active").next();
    toGalleryItem($targetItem);
});

Answer №1

Make your gallery stand out with this custom CSS:

.gallery__controls {
    margin-top: -50px;
    position: absolute;
    margin-left: -20px;
    width: 453px;
}

If you want to take it a step further, consider adding these styles to enhance the gallery:

.gallery-wrap {
    margin: 0 auto;
    overflow: hidden;
    width: 413px;
}

Check out the demo here

Keep in mind, this solution is fixed but feel free to experiment with adjusting the width and margins using percentage (%) for a responsive design!

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

Unraveling the mystery behind table cells failing to wrap their content when set to 100% height

Original inquiry (REVISED) CSS: Why does a table-cell sibling with a height of 100% exceed the body of the table-row? Experimenting with CSS tables, I am striving to achieve an evenly spaced column layout. I aim to have an "aside" on the left side th ...

Tips on making the form validation script operational

After developing a form alongside a form validation script to ensure that all fields are completed, the name and city sections only contain letters, while the age and phone sections solely include numbers, issues have arisen. It seems that despite the cons ...

Creating a foundational design with Bootstrap 5, featuring a sidebar that scrolls seamlessly and a stunning fixed

I'm having some trouble figuring out the layout for a webapp I want to develop. LAYOUT IMAGE What I envision is a sidebar menu on the "S" section that can be scrolled independently, and a large image on the "I" section that changes based on th ...

How to incorporate an image within a div element without reliance on the <img> tag

I am dealing with HTML content <div> <img src="xyz.jpg"> </div> The challenge I am facing is fetching an image in hex format from a web service, converting it to JPEG, and displaying it inside a div. However, the <img src=""> ta ...

I have a task of enclosing a table row within a div element

How can I enclose a table row in a div element? $('table tr').each(function(){ $(this).wrap('<div></div>'); }) It seems like my current solution is not working. Can someone help me fix it? UPDATE Fiddle: http://jsfiddl ...

What is the reason behind the jQuery only functioning properly on Internet Explorer 8 on this particular page and no other browsers?

I recently created a webpage utilizing jQuery: The functionality on the page should change music images to represent different key signatures when switching from 'Higher Key' to 'Lower Key' in the combo box. While this works perfectly ...

Ensuring consistent width for two divs using CSS

https://i.stack.imgur.com/3n8La.png I am currently working on creating a responsive CSS layout for two div elements. The first div will contain the summary, while the second div will hold the detailed description. My challenge is to make sure that the seco ...

The input range in ChromeVox is behaving incorrectly by skipping to the maximum value instead of following the correct step value

Attempting to get an input type="range" element to function correctly with ChromeVox has presented me with a challenge. Here's what I'm facing: When I press the right arrow key to move forward, it instantly jumps to the maximum value of 100 in ...

Incorporating AJAX functionality into anchor interactions while preserving href links for search engine optimization benefits

Is it possible to create a link/button that triggers an AJAX/jQuery function to load new content, while still providing a link to the same content on a separate page? I am particularly concerned about SEO and how search engine crawlers will index my sitem ...

What is the best way to display JQuery mobile tap event information in real-time?

I am experiencing an issue in my code where the tap event is being triggered, but the array[i] value is printed as null. Whenever I click on any index, it always prints an empty string (" "). Why does it display null instead of the clicked value? I am see ...

Attempting to retrieve the value of a disabled input within a form will prove unsuccessful

Below is the format of the form in use: <form action="sendmail.php" method="get"> <input type="text" name="phone" id="phone" data-clear-btn="true"> <input type="text" name="name" id="name" data-clear-btn="true"> <input dis ...

Tips for organizing components in jQuery Mobile

Displaying a survey creation form: <!-- HTML structure --> <div data-role="page" data-theme="b"> <div data-role="header"> <h1> Create Survey </h1> </div> <div id="main" data ...

Keep the division visible once the form has been successfully submitted

Initially, I have created 3 divs that are controlled using input type buttons. These buttons serve the purpose of displaying and hiding the hidden divs. Within these divs, there are forms to store data. Currently, my goal is to ensure that the div that was ...

I have a `null` input value. Is there a way to compute this value in relation to a date

When the input is null, what can be done to calculate the value with date? https://i.stack.imgur.com/DmFsJ.png /* // ======================================================== * * * * * How To Calculate Input Value With Date When Input Is Null * * */ // ...

Enhancing this testimonial slider with captivating animations

I have designed a testimonial slider with CSS3 and now I am looking to enhance it by adding some animation using Jquery. However, I am not sure how to integrate Jquery with this slider or which plugins would work best for this purpose. Can anyone provide g ...

The functionality of alpine.js x-for update is not functioning as intended

I have implemented a basic x-for loop on data from the Alpine Store (need it to be global). My objective is to modify a specific row after the table has been rendered by the x-for. Codepen: https://codepen.io/roniwashere/pen/oNMgGyy <div x-data> ...

Complete guide on modifying CSS with Selenium (Includes downloadable Source Code)

I am looking to switch the css styling of a website using Python and Selenium. My initial step was to retrieve the current CSS value. Now, I aim to alter this css value. The Python code output is as follows: 0px 0px 0px 270px How can I change it from 0 ...

When clicking on the Bootstrap navbar after implementing the onclick functionality, the color changes to

I was having no issues with my navbar until I introduced an onclick function to it. Here is the code for my onclick function: $('.nav li a').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/ ...

The Everyday Explanation of Same Origin Policy

Could anyone simplify the concept of the Same Origin Policy for me? I've come across various explanations but I'm in search of one that a child can easily understand. I found this link to be quite helpful. Is there anyone who can provide further ...

What is the best way to retrieve the current value of an *ngFor loop upon button click?

I have been attempting to retrieve the data.login value of the data item that the user has clicked on the avatar image. Despite my efforts, I have not been able to successfully achieve this through various methods found online. How can I access the current ...