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

Ways to prompt a specific text value to generate varied responses

Whenever I try to input the letter "h", I expect a specific value in return but for some reason, it's not working as intended. Despite my best efforts to troubleshoot the issue, I have been unsuccessful in finding a solution. It's frustrating bec ...

javascripthtmltextboxrespond-to

When attempting to print a Rectangle on my webpage using JavaScript and taking user input, I encountered an error stating that 'str' is not defined

I'm trying to implement a feature where clicking on the "try it" button will prompt the user for the number of lines and then print that many lines in the form of a rectangle. However, when I run my code, nothing appears on the DOM and there is an err ...

javascripthtmlnode.jsreactjstypescript

Image with text overlay

In my content, the setup includes the following: <p class="All-Book-Text">Maecenas iaculis, ipsum at tempor placerat, orci ligula aliquam enim, sit amet sagittis turpis enim sit amet lorem. Praesent dapibus pretium felis, et tempus nibh posuere a.&l ...

css

Requesting data asynchronously using AJAX and displaying the filtered results on a webpage using JSON

When I send a request to my node.js server for a .json file containing person information (first name, last name), I want the data to be filtered based on user input. For example: When I request the .json file from the server, it gives me a list of people ...

javascripthtmljsonnode.js

Manipulating the location where a dropdown menu intersects with a button

Is there a way to adjust the drop-down menu positioning so that it aligns with the button on the top right side of the menu pop-up, rather than the top left as it currently does? Below is the code I have borrowed from an example on W3Schools. .dropbtn ...

htmlcss

Hovering over the Laravel Breeze dropdown will activate a dropdown feature

Recently, I've been working on a project with Laravel Breeze and have been utilizing some default components. The dropdown component used in the navigation bar caught my attention. By default, it requires a click for the menu to drop down below. Howev ...

htmllaravelvue.jstailwind-csslaravel-breeze

Enable a button or class to dynamically alter its color

Hi there! I'm new to coding and just started learning HTML and CSS. My question is: How can I change the color of buttons once they are clicked? <div class="icon-bar"> <a href="#"><i class="fa fa-search" ...

javascripthtmlcss

Retrieving Dropdown Values based on Selection in Another Dropdown

On my website, there are two dropdown lists available: 1) One containing Book Names 2) The other containing Links to the Books. All data is stored in an XML file structured like this: <?xml version="1.0" encoding="UTF-8"?> <BookDetail> <boo ...

javascripthtmlajaxxmlxslt

Looking for straightforward tips on parsing CSS code

Seeking advice on how to extract rules and property/values from a .css file or <style></style>. I am not in need of an elaborate parser, as the validity of selector text, property name, or value is not important. My main focus is ensuring that ...

c#vb.netparsingcss

apostrophe cutting off a portion of the input field's value

I am facing an issue with a reloaded input box on a web page that is updated through an ajax call. Whenever the input contains a single quote, the rest of the value gets cut off. How can I resolve this problem? The value assigned to myVal dynamically from ...

javajavascriptjqueryhtml

Setting the line-height property in CSS to a value greater than the font-size property

Dealing with a frustrating issue where I want to align the top of an image with text, but the letters end up slightly below the line height. Check out this simple example featuring a classic movie: HTML: <img src="http://cf2.imgobject.com/t/p/w92/wcI ...

htmlstylescsstext-size

Avoiding memory leaks and performance hiccups in canvas applications

Currently, I am utilizing a canvas to present a grid made up of interconnected dots (a common feature in many codepens and experiments), and everything functions smoothly. In order to make the canvas responsive, I encapsulated all my code generation within ...

jqueryhtmlcanvasmemory-leaks

Responsive breakpoints in TailwindCSS seem to have an issue with applying padding and margin styles properly

Currently, I am tackling a project that involves creating a responsive design with Tailwind CSS on nuxtjs. Has anyone encountered the issue of py-8 applying to both breakpoints? If so, please share your insights! Here is how I have structured the compone ...

cssvue.jsnuxt.jstailwind-css

Error: Unable to access the 'version' property of null

Having trouble installing any software on my computer, I've attempted various solutions suggested here but none have been successful. $ npm install axios npm ERR! Cannot read property '**version**' of null npm ERR! A complete log of this ru ...

javascripthtmlnode.jsreactjsnpm

What is the best way to display Material UI cards in a horizontal layout?

I'm currently incorporating Material UI into my project, Within my list of cards, I aim for them to display one after the other horizontally and then continue in the same fashion on the next row. However, they are currently stacking vertically. I&ap ...

material-uiresponsive-design

Accumulation of style from various directives in AngularJS on a single element

Currently, I am working on developing a component framework and find myself in need of a method to apply styles from multiple directives to an element in a way that they can accumulate. The priority of the styles should be determined by the directive creat ...

cssangularjsangularjs-directive

Styling text on top of an image using CSS

I am attempting to overlay text on top of an image using the following code: .gallery-image { position: relative; } h2 { position: absolute; top: 200px; left: 0; width: 100%; } h2 span { color: white; font: bold 24px/45px Helvetica, Sans-S ...

htmlcss

What is the best way to retrieve the URL of a website using scrapy?

Currently, I am faced with the challenge of scraping the Amazon website using Scrapy. While I have successfully extracted items like product titles and prices, I am struggling to figure out how to extract the URL of a product (as shown in the image at the ...

pythoncssweb-scrapingurlscrapy

The layout of my website is perfect when my laptop's zoom is set to 90%, but at 100% it starts overflowing

Currently, I am in the process of building a website on my laptop while following an instructor's video tutorial. It has been important for me to set the same pixel measurements as the instructor in order to replicate the design they provided. However ...

css

Adjusting the appearance of Material-ui table within the row.getRowProps() function

I am currently working on a React application that utilizes Material-UI enhanced table, which is based on react-table. I have been trying to customize the styling of their rows. According to the documentation (https://material-ui.com/api/table-row/), it s ...

cssreactjsmaterial-uireact-tablereact-table-v7