Presentation: Positioning Next Buttons Beside Slide Images While Maintaining Responsiveness

I am facing a challenge with my slideshow project. The slideshow consists of images and text on each slide, along with previous and next buttons that are aligned within the parent container. I am trying to align these buttons at the midpoint of each image in the slides while ensuring responsiveness. Here is the code snippet:

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {
    slideIndex = 1;
  }
  if (n < 1) {
    slideIndex = slides.length;
  }
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex - 1].style.display = "block";
  dots[slideIndex - 1].className += " active";
}
@import url("https://use.typekit.net/yoj6eqg.css");
* {
  box-sizing: border-box
}

body {
  font-family: Assistant, sans-serif;
  margin: 0
}


/* Slideshow container */

.slideshow-container {
  position: relative;
  background: #f1f1f1f1;
  width: 100%;
  margin: auto;
}


/* Slides */

.mySlides {
  display: none;
  padding: 30px 30px 30px 30px;
  text-align: center;
  width: 62.5%;
  margin: auto;
}


/* Next & previous buttons */

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -30px;
  padding: 30px;
  color: #888;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
}


/* Position the "next button" to the right */

.next {
  position: absolute;
  right: 0;
  border-radius: 3px 0 0 3px;
}


/* On hover, add a black background color with a little bit see-through */

.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
}

.image {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 60vh;
}


/* The dot/bullet/indicator container */

.dot-container {
  text-align: center;
  padding: 20px;
  background: #ddd;
}


/* The dots/bullets/indicators */

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}


/* Add a background color to the active dot/circle */

.dot:hover {
  background-color: #90bd49;
}

.active {
  background-color: #90bd49;
}


/* text color */

.text {
  color: black;
  text-align: left;
}

.heading {
  text-align: center;
  color: #7bd934;
  font-size: 30px;
  font-family: Assistant, sans-serif;
  padding: 10px;
}

@media screen and (max-width:767px) {
  .heading {
    font-size: 20px;
  }
  .text {
    font-size: 12px;
  }
  .prev,
  .next {
    font-size: 15px;
    border-radius: 0 3px 3px 0;
    padding: 10px;
  }
  .mySlides {
    display: none;
    padding: 30px 50px 30px 50px;
  }
}
<div class="slideshow-container">
  <div class="mySlides">
    <div style="background-image: url('https://wallpaperset.com/w/full/a/c/7/185665.jpg');" class="image"> </div>
    <p class="heading">Lorem ipsum</p>
    <p class="text">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
      Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
  </div>
  <div class="mySlides">
    <div style="background-image: url('https://wallpaperset.com/w/full/a/c/7/185665.jpg');" class="image"> </div>
    <p class="heading">Lorem ipsum</p>
    <p class="text">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
      Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
  </div>
  <div class="mySlides">
    <div style="background-image: url('https://wallpaperset.com/w/full/a/c/7/185665.jpg');" class="image"> </div>
    <p class="heading">Lorem ipsum</p>
    <p class="text">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
      Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
  </div>
  <a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a></div>
<div class="dot-container">
  <div class="dot" onclick="currentSlide(1)"></div>
  <div class="dot" onclick="currentSlide(2)"></div>
  <div class="dot" onclick="currentSlide(3)"></div>
</div>

You can access the code here.

I have attempted to embed the button div into each slide div without success. I also tried placing it within each background picture div, which did not work either. Although adjusting the top percentage using media queries may seem like a solution, it only addresses the issue at specific breakpoints.

I believe there must be a responsive solution that has eluded me. Any help in achieving this goal would be greatly appreciated.

htmlcssresponsive-designslideshow

Answer №1

After experimenting with different approaches, I found a solution that worked for me. I added "buttons" to each slide within the image div and adjusted their positioning using CSS properties like top: 50% and transform: translateY(-50%) to keep them centered within the picture. To make the buttons appear outside of my container div on screens wider than 1300px, I applied left: -5.9% to the previous button and right: -5.9% to the next button. This setup required me to modify the button positions whenever I changed the width of the container.

While there may be more optimal solutions available, this method currently serves its purpose.

You can view the outcome here or below:

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1;}    
  if (n < 1) {slideIndex = slides.length;}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";  
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
}
...

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

Moving from one page to another

I am attempting to create a transition effect between sections within a single-page application. All the sections are contained on the same page, with only one section displayed at a time while the rest are set to display none. When a specific event is tri ...

javascripthtmlcsscss-transitions

Adding a popover to a cell in a table: A step-by-step guide

Currently, I am attempting to display data in a single cell when hovered over using a popover. The problem I'm facing is that adding the data-toggle inside the td tag has no effect. Each cell is structured like this: <td style="padding: 0px; back ...

jqueryhtmlbootstrap-4

Harnessing the power of lazysizes with WebP

I've been working on optimizing our site through the Google Lighthouse audit, and it's clear that images are a major focus. Right now, my main goal is to address the issue of 'Deter offscreen images' highlighted in the audit. To tackle ...

javascripthtmllazy-loadingwebplighthouse

Enhancing User Experience with Interactive React Hover Effects

Hello, I have tried various combinations but still cannot get the desired background color to display when hovering over my <p> element. I am looking for a CSS-only solution and not interested in using JavaScript hover events. I would appreciate it ...

cssreactjsstyled-components

Is it possible to create a CSS1 sprite animation triggered by a mouse hover

Is there a way to create sequential image loading on mouse hover for a CSS1 Sprite, similar to an animation? Please refrain from suggesting CSS3 solutions as not all browsers fully support CSS3 animations. Thank you. ...

cssanimationhovermousesprite

Ensure a button is automatically highlighted within an active class script

I have created a set of buttons that allow users to change the font family of the text. I would like the border and text color to update automatically when a specific option is selected. Currently, the JavaScript code works well, but when the page first l ...

javascriptcssonclick

Extracting unique text values from nested div elements within list items using Selenium with Python

Within the HTML code provided, I am looking to extract the text of three variables (descr_confezione, aic_farmaco, and stato_confezione) for each of the four list items: <ul id="ul_lista_confezioni"> <li style="display: list-item;"> &l ...

pythonhtmlselenium

Another option instead of using the .siblings() method would be

Is there an alternative to using the .siblings() method in jQuery for traversing through divs of a specific class in separate container divs? How can this be achieved with the following code: HTML: <div id="container1"> <div id="1"></di ...

jqueryhtml

Issue with $http.get in fetching information from PHP server

Dealing with duplicate keys error in AngularJS, PHP, and MySQL I have been working on a web-based system and encountered an issue with ng-repeat displaying duplicate keys. I am unsure how to resolve this issue. The select all brand functionality seems to ...

phphtmlangularjs

A specific image is loading after being clicked in a new page

Despite my efforts to search on various platforms, I have not been able to find a comprehensive solution to my query. Scenario: I currently have a webpage containing a div with multiple images. These images load without any issues and are set to open in ...

javascriptjqueryhtmlimage

Opting for css3 translate over using position: left for positioning elements

Why Using translate() for Element Movement is Superior to Pos: abs Top/left Read the full article Lisa Anderson I struggled with implementing a CSS3 translate animation, so I opted for a jQuery solution that achieves the same effect. Click on the X icon . ...

jquerycsscss-animationstranslate-animation

Extra brackets appear when retrieving JSON data

In my code, I am attempting to extract data from a JSON file. The JSON data does not have any brackets, just an array separated by commas. However, when I retrieve the data using $scope, an extra square bracket is added outside of my output. Here is a demo ...

javascriptjqueryhtmljsonionic-framework

Is there a way to identify the ID of a button using Javascript specifically in Internet Explorer and Safari browsers?

Within my code, there lies a directive that contains the attribute on-blur = blurFunc($event). Imagine this scenario: I interact with a button bearing the id "myButton" located outside of the directive. How can I determine which specific button was clicke ...

javascriptangularjshtmlinternet-explorersafari

Transforming the text to be "unreadable"

I find myself in a rather odd predicament where I must display my name and contact details on a webpage. Although I am comfortable with sharing this information, I would prefer that it remain unreadable to robots or other unauthorized sources. Essentially ...

javascripthtmlcssweb

What is preventing me from opening this local html page without an IIS Server?

Currently immersed in a passion project that can be found at https://github.com/loganhenson/jsrpg This project has been a collaborative effort with a friend, utilizing Visual Studio Professional for development and testing it on my local IIS server. Init ...

javascripthtmlasp.netgoogle-chromebrowser

What steps can be taken to ensure that a dropdown menu responds instantly to the JavaScript code provided?

Upon discovering this code snippet in a different answer (on jsfiddle), I noticed that it allows for the appearance of a text box when the user selects 'other' from the dropdown menu. However, when I include '<option value='0' s ...

javascripthtml

The issue of jQuery pop-up not functioning properly on a web page that has infinite scrolling

Currently, I am working on a website that showcases various products with images. When you hover over these images, a pop-up appears displaying details about the product along with a "buy now" button. Everything was functioning perfectly until the infinit ...

javascriptjqueryhtmlshopifyinfinite-scroll

Transform the features of a website into a sleek iOS application using Swift

Can I take an HTML website coded with JavaScript and integrate its functionality into my app using WebKit or another method? By using WebKit or WebViews, I can load an entire webpage into my app, automatically bringing along its functionality. However, i ...

javascripthtmliosswift

Angular is sending a parameter with a null value, which is not supposed to happen

My filtering system used to work well with a code that displayed items of specific status. However, I had to modify it to match a select input requirement. <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu" role="menu" aria-labelledby="button- ...

javascripthtmlangular

Easily toggle between various image source paths

In my current application, all HTML files have hardcoded relative image paths that point to a specific directory. For example: <img src="projectA/style/images/Preferences.png"/> Now, I am considering switching between two different project modes: & ...

javascriptjqueryhtmlangularjs