Swimming Left and Right Arrows

I am struggling to create a layout where images are stacked horizontally, with small arrows centered vertically on the left and right sides for scrolling.

However, the arrows are currently centered relative to the page, rather than to the center image.

I'm aiming for a design similar to what can be seen on this website:

Ideally, I would prefer to position the arrows using only CSS/HTML.

Here is my current progress: https://github.com/thorkia/cssPositioningIssue

Any assistance on this matter would be greatly appreciated.

Note:

While I am able to achieve the scrolling functionality by adjusting the left margin using JavaScript, I have omitted that from the sample. My main focus is to correctly position the arrows.

htmlcssbootstrap-4

Answer №1

.imagesContainer {
  width: 100%;
  height: 500px;
  position: relative;
  background: red;
}

.imageScrollers .imageScrollBack img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  height: 20px;
}

.imageScrollers .imageScrollNext img {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  height: 20px;
}
<div class="imagesContainer">

  <div class="imageScrollers">
    <span class="imageScrollBack"><img src="dawdaw" alt=""></span>
    <span class="imageScrollNext"><img src="dawdaw" alt=""></span>
  </div>
</div>

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

Sections stacked with Bootstrap cards are located beneath a different section

Objective The primary aim is to ensure that all sections display correctly on the mobile version of the website. Challenge An obstacle I am currently facing is: Full width (Looking good) https://i.sstatic.net/EDm3N.jpg Mobile version (Issue) There i ...

htmlcssbootstrap-4

"Enhance Your Website with jQuery Mobile's Multi-Page Setup and Panel

I am currently facing the challenge of managing multiple pages within a single document and I would like to utilize jQM 1.3's Panel widget to control navigation between these pages. However, the issue arises from the requirement that Panels must be co ...

javascriptjqueryhtmljquery-mobilenavigation

I'm looking for a way to implement an interactive auto slideshow in JavaScript that allows users to manually

Having spent a lot of time studying auto slideshows, I'm facing an issue where clicking on the bullet to show the next image results in the image disappearing suddenly. Initially, I thought the problem was with using addEventListener events, so I swi ...

javascripthtmlcss

Tips for shifting nested div containers to the left as the content expands

I have a div containing a dropdown menu, label, and button as shown below: <div class="container "> <div id="User"> <div id="BtnUser"> <div id="dropMe"> <div class="dropdown"> <a onclick="User ...

jqueryhtmlcss

What advantages does KnockoutJS offer over AngularJS?

Can KnockoutJS offer a unique feature that rivals or exceeds those of AngularJS? ...

javascriptjqueryhtmlangularjsknockout.js

How to control the audio currentTime using Angular 2 component

Here is the HTML code snippet that creates an HTML5 audio element: <audio id ="audio2" controls="controls" autoplay="false" (canplay)="CanPlay($event)"> <source src="http://localhost:51657/Audio/1" type="audio/mp3"> </audio> In the ...

htmlangularhtml5-audioangular2-template

Button placement that feels out of place

I'm looking to style an input-group with a form input and submit button using Bootstrap 5. Here's my current code: .card { margin: auto; width: 50%; padding: 10px; opacity: 0.9!important; top: 250px; } <div class="card-header"> ...

htmlcssbootstrap-5

Tips for sending multiple values to the next page using AngularJS

Hey there, I'm new to AngularJS and currently using Onsen UI in my demo application. I have two pages in my app and I'm trying to pass two values to the next page. I managed to pass one value successfully, but when I attempt to send the second on ...

htmlangularjsonsen-ui

Tips for retrieving data from an Excel spreadsheet on an HTML/CSS webpage

I have a single HTML template at this location: . The current page is tailored for the state of Arkansas in the US, but I now need to replicate the design for all 50 states. Each state page will have the same layout, but different content specific to that ...

javascriptphphtmlcssasp.net

Extract content from an HTML element and transfer it to PHP

Alright, listen up. I've got a task at hand where I need to fetch some information from my database by calling a PHP page through a link (<a href='name.php'>). Let's just say the code is speaking louder than my words: <?php ...

phphtmlmysql

svg icon hover effect not displaying color properly

Seeking expertise in incorporating social media icons with a hover effect to turn purple. Encountering an issue where the entire circle of the icon is mistakenly being painted on hover. Refer to the screenshot of the current outcome and desired result. Wo ...

javascriptcssreactjssvgtailwind-css

Trouble with DevExpress ASPxButton: Some Properties Fail to Update

It's been a while and I'm facing a tough challenge. I need to change the image source of an ASPxButton from the code behind, but it seems like the height, width, and border style are getting lost in the process (resulting in an image with its own ...

csswinformsdevexpressaspxgridview

Accordion is having trouble expanding fully

My accordion is causing some trouble. When I try to open one section, both sections end up opening. I want it to toggle, so that only one section opens at a time based on my click. Switching the display from flex to column fixes the issue, but I don' ...

javascripthtmljquerycss

The <span> tag creating a surprise gap following a word

Using Angular4, I've come across an odd issue where one of my span elements is adding an extra space to the end of words like this: https://i.stack.imgur.com/H4TD7.png The only CSS properties that are set include font-family, -webkit-font-smoothing, ...

htmlcss

Tips for transferring a jQuery array to PHP

I am encountering an issue when trying to send a jQuery array to PHP. Initially, I have one form in HTML and upon clicking 'add', I end up with two forms. Afterwards, I input data into the form which is then stored in a jQuery array. However, I a ...

javascriptphpjqueryhtmlajax

Tips for displaying multiple XML datasets on an HTML webpage

I came across an example on W3schools that I'm trying to replicate: http://www.w3schools.com/xml/tryit.asp?filename=tryxml_app_first However, the example only displays one CD. My goal is to showcase all the data (in this case CDs) in the XML file. H ...

javascripthtmlxml

Is there a way for me to include the input into the link within the action of a search bar?

As I work on my HTML script to create a search bar, I've run into an issue. Currently, the page redirects to instead of the input in the search box. For example, if the input in the search box is "icecreamshop", I want it to redirect to <form a ...

htmldjango

Top button disappears in Chromium browser after fade-in effect

I've encountered a very peculiar issue. Whenever I use the page down or fragmented identifier to jump to a specific div, my "go to top" image disappears. Here is the code snippet: HTML: <a title="Go to top" href="#" class="back-to-top"></ ...

javascriptjqueryhtmlcss

Is there a method to prompt the browser to retain form data when using the back button?

Having a puzzling problem. I've developed a sophisticated quote form for our company that utilizes ajax to display prices for products based on user input. There are 6 hidden fields set up as follows: productname1 productname2 productname3 and the ...

phpajaxhtmlforms

Simple Steps for Dynamically Adjusting Table Cells without Disturbing Existing Data

Is there a way to make a table automatically arrange cells in rows of two, adjusting as necessary when adding or removing cells (with one cell in the last row if there is an odd number of total cells)? For example: <table> <tr> <td>o ...

csshtmlhtml-tablecell