Embedding previous and next button onto image-CodePudding

I am trying to embed a previous and next button onto the image such that both buttons resize and stay on the image when resized. But the problem is the buttons don't stay on the image and resize in a way that isn't consistent with what I want. I also want my image to be on the right side of the screen and text on the left side instead of on the center.

buttons when the window is fullscreen

buttons after resizing the window to ~45%

I thought if I had put the button in a div that is the child of the div my photos were in, the buttons would automatically be embedded onto the photo but that didn't work. I also set my parent container to relative and child container to absolute thinking that would work.

let slideIndex = 1;
showSlides(slideIndex);

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

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

function showSlides(n) {
  let i;
  let slides = document.getElementsByClassName("mySlides");
  if (n > slides.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = slides.length
  }
  for (i = 0; i < slides.length; i  ) {
    slides[i].style.display = "none";
  }

  slides[slideIndex - 1].style.display = "block";
  dots[slideIndex - 1].className  = " active";
}

* {
  box-sizing: border-box
}

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

.mySlides {
  display: none
}

img {
  vertical-align: middle;
}


/* Slideshow container */

.photos {
  max-width: 1000px;
  position: relative;
  margin: auto;
}


/* Next & previous buttons */

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -200px;
  color: aqua;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}


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

.next {
  position: absolute;
  color: aqua;
  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);
}

.btn-responsive {
  /* matches 'btn-md' */
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
  border-radius: 6px;
}

@media (max-width:760px) {
  /* matches 'btn-xs' */
  .btn-responsive {
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
  }
}

.active,
.dot:hover {
  background-color: #717171;
}


/* Fading animation */

.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {
    opacity: .4
  }
  to {
    opacity: 1
  }
}


/* On smaller screens, decrease text size */

@media only screen and (max-width: 300px) {
  .prev,
  .next,
  .text {
    font-size: 11px
  }
}

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Page</title>
  <link rel="stylesheet" href="./styles/test.css">
</head>

<body>
  <div >
    <div >
      <img  src="photos/quote1.jpg" style="width:95.7%" />
      <img  src="photos/quote2.jpg" style="width:95.7%" />
      <img  src="photos/quote3.jpg" style="width:95.7%" />
      <img  src="photos/quote4.jpg" style="width:95.7%" />
      <img  src="photos/quote5.jpg" style="width:95.7%" />
      <img  src="photos/quote6.jpg" style="width:95.7%" />
      <img  src="photos/photo8.png" style="width:95.7%" />


      <div >
        <a  onclick="plusSlides(-1)">❮</a>
        <a  onclick="plusSlides(1)">❯</a>
      </div>
    </div>
  </div>

  <script>
  </script>
</body>

</html>

CodePudding user response：

Set the <img>s to expand edge to edge of it's container .photos and keep aspect ratio as well by changing img ruleset:

img {
  object-fit: contain;
  width: 100%;
}

Also, remove margin-top: -200px from .next, .prev

I didn't see any text in OP code and didn't quite understand exactly what you wanted with text.

let slideIndex = 1;
showSlides(slideIndex);

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

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

function showSlides(n) {
  let i;
  let slides = document.querySelectorAll(".slides");
  if (n > slides.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = slides.length
  }
  for (i = 0; i < slides.length; i  ) {
    slides[i].style.display = "none";
  }

  slides[slideIndex - 1].style.display = "block";
}

* {
  box-sizing: border-box
}

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

.slides {
  display: none
}

img {
  object-fit: contain;
  width: 100%;
}

.photos {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  color: aqua;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  user-select: none;
}

.prev {
  left: 0;
  border-radius: 0 3px 3px 0;
}

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

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

.btn-responsive {
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
  border-radius: 6px;
}

@media (max-width:760px) {
  .btn-responsive {
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
  }
}

.active,
.dot:hover {
  background-color: #717171;
}

.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {
    opacity: .4
  }
  to {
    opacity: 1
  }
}

@media only screen and (max-width: 300px) {
  .prev,
  .next,
  .text {
    font-size: 11px
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Page</title>
  <link rel="stylesheet" href="./styles/test.css">
</head>

<body>
  <div >
    <div >
      <img  src="https://www.pcgamesn.com/wp-content/uploads/2022/05/v-rising-castle-heart-decay-900x506.jpg" />
      <img  src="https://www.pcgamesn.com/wp-content/uploads/2022/05/jurassic-world-evolution-2-dominion-dlc-900x506.jpg" />
      <img  src="https://cdn.akamai.steamstatic.com/steamcommunity/public/images/clans//41627993/0bc70a88bed9dad1ba5898beb33c72476c2ccc10.jpg" />
      <img  src="https://www.pcgamesn.com/wp-content/uploads/2022/05/lost-ark-character-creation-900x506.jpg" />
      <img  src="https://cdn.akamai.steamstatic.com/steamcommunity/public/images/clans//9164327/b4569cd9085bd5d186c30877bc1251f03fc6e06a.jpg" />
      <div >
        <a  onclick="plusSlides(-1)">❮</a>
        <a  onclick="plusSlides(1)">❯</a>
      </div>
    </div>
  </div>

  <script>
  </script>
</body>

</html>

CodePudding user response：

iceiscold! Welcome to Stack Overflow.

I don't know if you have a specific reason for your widths, but setting the images to 100% width and set object-fit: contain should solve your resizing issues. If you need them smaller, you can control that by setting the photo container size, or creating a custom container for the <img>.

As for the layout question, to have a text and an image side by side, I recommend you to use display: flex. Flex is a nice CSS property for handling layouts. Another option would be to use display: grid, which is another way to handle layouts. For your case, I think flex is a bit more straightforward.

Basically what you need:

.parent{
    display: flex;
}

.child1, child2{
    flex: 1;
}

.parent will create a column layout, and with flex:1 you are telling the flex property that both child1 and child2 should have the same width. You can play with that by setting flex: 0.25, etc. I used this on your code to create a description column and a photo column.

let slideIndex = 1;
showSlides(slideIndex);

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

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

function showSlides(n) {
  let i;
  let slides = document.getElementsByClassName("mySlides");
  if (n > slides.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = slides.length
  }
  for (i = 0; i < slides.length; i  ) {
    slides[i].style.display = "none";
  }

  slides[slideIndex - 1].style.display = "block";
}

.center {
  display: flex;
  border: 1px solid black;
}

.descriptions {
  flex: .75;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid red;
}

.mySlides {
  display: none
}

img {
  object-fit: contain;
  vertical-align: middle;
  width: 100%;
}

.photos {
  flex: 1;
  max-width: 1000px;
  position: relative;
  margin: auto;
  border: 1px solid blue;
}

.prev,
.next {
cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  color: aqua;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  user-select: none;
}

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

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

.active,
.dot:hover {
  background-color: #717171;
}

.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

<div >
  <div >
    <p>I am a test description</p>
  </div>
  <div >
    <img  src="https://pbs.twimg.com/profile_images/1498641868397191170/6qW2XkuI_400x400.png" />
    <img  src="https://upload.wikimedia.org/wikipedia/en/9/95/Test_image.jpg" />
    <img  src="https://pbs.twimg.com/profile_images/1498641868397191170/6qW2XkuI_400x400.png" />
    <div>
      <a  onClick="plusSlides(-1)">❮</a>
      <a  onClick="plusSlides(1)">❯</a>
    </div>
  </div>
</div>
Return to post