How to position the next/prev buttons of my slideshow relative to the column they're in rather than the page? (Bonus: Make them circles?) - Photoshop

MOz
March 31, 2021
250 views
0 votes
2 Answers

Okay, so. I have a slideshow on a page of my website. It’s supposed to be in one column of my website. The images conform to the column just fine, but the buttons for "next" and "previous" do not. I want them to be on the left and right sides of the column they slideshow is in, and preferably centered vertically as well.

Bonus: Is there any way to make the next and prev buttons circles?

Here is a mock-up of what I’m envisioning for this page.

And here’s my code:

var slideIndex = 1;
showSlides(slideIndex);

// Next/previous controls
function plusSlides(n) {
  showSlides(slideIndex += n);
}

// Thumbnail image controls
function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  var captionText = document.getElementById("caption");
  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";
  captionText.innerHTML = dots[slideIndex-1].alt;
}

<!DOCTYPE html>
   <head>
      <meta charset="UTF-8">
      <title>Mozart Armstrong Portfolio Homepage</title>
         <style>

            @font-face {
              font-family: Klik;
              src: url(klik-light-webfont.woff);
            }

            @font-face {
              font-family: theBoldFont;
              src: url(theboldfont.ttf);
            }

            .main {
              margin-left: 200px;
              padding: 0px 10px;
              font-size: 16px;
              font-family: Klik;
              display: flex;
            }

            .main p {
              font-size: 14px;
              font-family: Klik;
              color: #000000;
            }

            .main h1 {
              font-size: 24px;
              font-family: theBoldFont;
              color: #000000;
            }

            .main a {
              font-size: 12px;
              font-family: Klik;
              color: #808080;
            }
            
            .sidebar {
              height: 100%;
              width: 200px;
              position: fixed;
              z-index: 1;
              top: 0;
              left: 0;
              background-color: #000000;
              overflow-x: hidden;
              padding-top: 20px;
            }

            .sidebar a {
              padding: 6px 8px 6px 16px;
              text-decoration: none;
              font-size: 16px;
              font-family: Klik;
              color: #ffffff;
              display: block;
            }

            .sidebar a:hover {
              color: #808080;
            }

            .sidebar b {
              padding: 6px 8px 6px 16px;
              text-decoration: none;
              font-size: 28px;
              font-family: theBoldFont;
              color: #ffffff;
              display: block;
            }

            .sidebar c {
              padding: 6px 8px 6px 16px;
              text-decoration: none;
              font-size: 13px;
              font-family: Klik;
              color: #ffffff;
              display: block;
            }

            .return {
              padding: 5px 0px 5px 5px;
              right: 0;
              margin-left: 200px;
              top: 0;
              z-index: 2;
              overflow-x: hidden;
              background-color: #808080;
            }

            .return a {
              width: 100%;
              height: 0px;
              text-decoration: none;
              font-size: 12px;
              font-family: Klik;
              color: #000000;
              display: inline-block;
            }

            .row {
              display: -webkit-flex;
              display: flex;
            }


            .column1 {
              -webkit-flex: 1;
              -ms-flex: 1;
              flex: 1;
              padding: 10px;
              margin-left: 200px;
            }

            .column2 {
              -webkit-flex: 1;
              -ms-flex: 1;
              flex: 1;
              padding: 10px;
            }

            .column2 h1 {
            font-family: theBoldFont;
            font-size: 28px;
            }

            .column2 h {
              font-family: theBoldFont;
            }

            .column2 p {
              font-family: Klik;
            }

/* Style the footer */
            .footer {
              background-color: #f1f1f1;
              padding: 10px;
              text-align: center;
              margin-left: 200px;
              font-family: Klik;
            }

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
  .row {
    -webkit-flex-direction: column;
    flex-direction: column;
  }
}

.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 42%;
  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);
}


            
         </style>
   </head>
   <body>
      <div class="return">
         <a href="#"><< Back</a>
      </div>

      <div class="sidebar">
         <b>Mozart</b>
         <b>Armstrong</b>
         <c>design • marketing • branding</c>
         <b></b>
         <b></b>
         <b></b>
         <a href="#">Graphic Design</a>
         <a href="#">Illustration</a>
         <a href="#">Animations</a>
         <a href="#">Photography</a>
         <a href="#">Writing</a>
         <a href="#">Fashion Design</a>
         <b></b>
         <b></b>
         <a href="#">About</a>
      </div>
<div class="row">
  <div class="column1" style="background-color:#aaa;">
<div class="mySlides">
      <center><img src="Block.png" style="width:75%"></center>
  </div>

  <div class="mySlides">
      <center><img src="Block2.png" style="width:75%"></center>
  </div>

  <div class="mySlides">
      <center><img src="Block3.png" style="width:75%"></center>
  </div>

  <div class="mySlides">
      <center><img src="Block4.png" style="width:75%"></center>
  </div>

  <div class="mySlides">
      <center><img src="Block5.png" style="width:75%"></center>
  </div>

  <div class="mySlides">
      <center><img src="Block3.png" style="width:75%"></center>
  </div>

  <!-- Next and previous buttons -->
  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>

</div>
  <div class="column2" style="background-color:#bbb;">
<h1>This is the title of the design</h1>
<h>Date of Origin: </h><p>(e.g. Summer 2020)</p>
<h>Purpose: </h><p>(e.g. Freelance Commission)</p>
<h>Medium: </h><p>(e.g. Digital PDF)</p>
<h>Program(s) Utilized: </h><p>(e.g. Adobe Photoshop, Adobe InDesign)</p>
<h>Relevant to Positions: </h><p>(e.g. Freelance Graphic Designer)</p>
<h></h>
</div>
</div>

<div class="footer">
  <p>Description of process and intention behind the work. Ique nulparunt, consed et ullacep tatur? Hilluptat esti ut velest, simus, nos et dionseq uidigenducia sequis aut aut vellabor a consequat venim eum res nos vendam si sus.
Menihil estias illest ipsae de doluptis apit fugiandae. Nonsequist, simus.
Fic tem re volupid mos es et et, exeris eata doles dollati busdam quati unt.
Ugitiosapis aborpore ea nonsed que velique milicii ssitiatem. Nequia seque as sinvella qui in poresti niment plique mod maio eossecatur? Uriatus.
Endunt res velest, officideliam doluptaspel ipis in cone secto ipsum quas mos autempos</p>
</div>
<script src="move.js"></script>
   </body>
</html>

Answers

I don’t clearly understand what you mean by making them round. Is this what you wanted to achieve?

var slideIndex = 1;
showSlides(slideIndex);

// Next/previous controls
function plusSlides(n) {
  showSlides(slideIndex += n);
}

// Thumbnail image controls
function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  var captionText = document.getElementById("caption");
  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";
  captionText.innerHTML = dots[slideIndex-1].alt;
}

<!DOCTYPE html>
   <head>
      <meta charset="UTF-8">
      <title>Mozart Armstrong Portfolio Homepage</title>
         <style>

            @font-face {
              font-family: Klik;
              src: url(klik-light-webfont.woff);
            }

            @font-face {
              font-family: theBoldFont;
              src: url(theboldfont.ttf);
            }

            .main {
              margin-left: 200px;
              padding: 0px 10px;
              font-size: 16px;
              font-family: Klik;
              display: flex;
            }

            .main p {
              font-size: 14px;
              font-family: Klik;
              color: #000000;
            }

            .main h1 {
              font-size: 24px;
              font-family: theBoldFont;
              color: #000000;
            }

            .main a {
              font-size: 12px;
              font-family: Klik;
              color: #808080;
            }
            
            .sidebar {
              height: 100%;
              width: 200px;
              position: fixed;
              z-index: 1;
              top: 0;
              left: 0;
              background-color: #000000;
              overflow-x: hidden;
              padding-top: 20px;
            }

            .sidebar a {
              padding: 6px 8px 6px 16px;
              text-decoration: none;
              font-size: 16px;
              font-family: Klik;
              color: #ffffff;
              display: block;
            }

            .sidebar a:hover {
              color: #808080;
            }

            .sidebar b {
              padding: 6px 8px 6px 16px;
              text-decoration: none;
              font-size: 28px;
              font-family: theBoldFont;
              color: #ffffff;
              display: block;
            }

            .sidebar c {
              padding: 6px 8px 6px 16px;
              text-decoration: none;
              font-size: 13px;
              font-family: Klik;
              color: #ffffff;
              display: block;
            }

            .return {
              padding: 5px 0px 5px 5px;
              right: 0;
              margin-left: 200px;
              top: 0;
              z-index: 2;
              overflow-x: hidden;
              background-color: #808080;
            }

            .return a {
              width: 100%;
              height: 0px;
              text-decoration: none;
              font-size: 12px;
              font-family: Klik;
              color: #000000;
              display: inline-block;
            }

            .row {
              display: -webkit-flex;
              display: flex;
            }


            .column1 {
              -webkit-flex: 1;
              position: relative;
              -ms-flex: 1;
              flex: 1;
              padding: 10px;
              margin-left: 200px;
            }

            .column2 {
              -webkit-flex: 1;
              -ms-flex: 1;
              flex: 1;
              padding: 10px;
            }

            .column2 h1 {
            font-family: theBoldFont;
            font-size: 28px;
            }

            .column2 h {
              font-family: theBoldFont;
            }

            .column2 p {
              font-family: Klik;
            }

/* Style the footer */
            .footer {
              background-color: #f1f1f1;
              padding: 10px;
              text-align: center;
              margin-left: 200px;
              font-family: Klik;
            }

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
  .row {
    -webkit-flex-direction: column;
    flex-direction: column;
  }
}

.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  box-sizing: border-box;
  border-radius: 50%;
  padding: 16px 22px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  -webkit-user-select: none;
  box-sizing: border-box;
}

/* Position the "next button" to the right */
.next {
  right: 0;
}
.prev {
  left: 0;
}

/* 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);
}


            
         </style>
   </head>
   <body>
      <div class="return">
         <a href="#"><< Back</a>
      </div>

      <div class="sidebar">
         <b>Mozart</b>
         <b>Armstrong</b>
         <c>design • marketing • branding</c>
         <b></b>
         <b></b>
         <b></b>
         <a href="#">Graphic Design</a>
         <a href="#">Illustration</a>
         <a href="#">Animations</a>
         <a href="#">Photography</a>
         <a href="#">Writing</a>
         <a href="#">Fashion Design</a>
         <b></b>
         <b></b>
         <a href="#">About</a>
      </div>
<div class="row">
  <div class="column1" style="background-color:#aaa;">
<div class="mySlides">
      <center><img src="Block.png" style="width:75%"></center>
  </div>

  <div class="mySlides">
      <center><img src="Block2.png" style="width:75%"></center>
  </div>

  <div class="mySlides">
      <center><img src="Block3.png" style="width:75%"></center>
  </div>

  <div class="mySlides">
      <center><img src="Block4.png" style="width:75%"></center>
  </div>

  <div class="mySlides">
      <center><img src="Block5.png" style="width:75%"></center>
  </div>

  <div class="mySlides">
      <center><img src="Block3.png" style="width:75%"></center>
  </div>

  <!-- Next and previous buttons -->
  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>

</div>
  <div class="column2" style="background-color:#bbb;">
<h1>This is the title of the design</h1>
<h>Date of Origin: </h><p>(e.g. Summer 2020)</p>
<h>Purpose: </h><p>(e.g. Freelance Commission)</p>
<h>Medium: </h><p>(e.g. Digital PDF)</p>
<h>Program(s) Utilized: </h><p>(e.g. Adobe Photoshop, Adobe InDesign)</p>
<h>Relevant to Positions: </h><p>(e.g. Freelance Graphic Designer)</p>
<h></h>
</div>
</div>

<div class="footer">
  <p>Description of process and intention behind the work. Ique nulparunt, consed et ullacep tatur? Hilluptat esti ut velest, simus, nos et dionseq uidigenducia sequis aut aut vellabor a consequat venim eum res nos vendam si sus.
Menihil estias illest ipsae de doluptis apit fugiandae. Nonsequist, simus.
Fic tem re volupid mos es et et, exeris eata doles dollati busdam quati unt.
Ugitiosapis aborpore ea nonsed que velique milicii ssitiatem. Nequia seque as sinvella qui in poresti niment plique mod maio eossecatur? Uriatus.
Endunt res velest, officideliam doluptaspel ipis in cone secto ipsum quas mos autempos</p>
</div>
<script src="move.js"></script>
   </body>
</html>

CSS:

column1 class has now property positon: relative;

prev and next both get property border-radius: 50%;

next class has now property right: 0%;

        @font-face {
          font-family: Klik;
          src: url(klik-light-webfont.woff);
        }

        @font-face {
          font-family: theBoldFont;
          src: url(theboldfont.ttf);
        }

        .main {
          margin-left: 200px;
          padding: 0px 10px;
          font-size: 16px;
          font-family: Klik;
          display: flex;
        }

        .main p {
          font-size: 14px;
          font-family: Klik;
          color: #000000;
        }

        .main h1 {
          font-size: 24px;
          font-family: theBoldFont;
          color: #000000;
        }

        .main a {
          font-size: 12px;
          font-family: Klik;
          color: #808080;
        }
        
        .sidebar {
          height: 100%;
          width: 200px;
          position: fixed;
          z-index: 1;
          top: 0;
          left: 0;
          background-color: #000000;
          overflow-x: hidden;
          padding-top: 20px;
        }

        .sidebar a {
          padding: 6px 8px 6px 16px;
          text-decoration: none;
          font-size: 16px;
          font-family: Klik;
          color: #ffffff;
          display: block;
        }

        .sidebar a:hover {
          color: #808080;
        }

        .sidebar b {
          padding: 6px 8px 6px 16px;
          text-decoration: none;
          font-size: 28px;
          font-family: theBoldFont;
          color: #ffffff;
          display: block;
        }

        .sidebar c {
          padding: 6px 8px 6px 16px;
          text-decoration: none;
          font-size: 13px;
          font-family: Klik;
          color: #ffffff;
          display: block;
        }

        .return {
          padding: 5px 0px 5px 5px;
          right: 0;
          margin-left: 200px;
          top: 0;
          z-index: 2;
          overflow-x: hidden;
          background-color: #808080;
        }

        .return a {
          width: 100%;
          height: 0px;
          text-decoration: none;
          font-size: 12px;
          font-family: Klik;
          color: #000000;
          display: inline-block;
        }

        .row {
          display: -webkit-flex;
          display: flex;
        }


        .column1 {
          -webkit-flex: 1;
          -ms-flex: 1;
          flex: 1;
          padding: 10px;
          margin-left: 200px;
          position:relative;
        }

        .column2 {
          -webkit-flex: 1;
          -ms-flex: 1;
          flex: 1;
          padding: 10px;
        }

        .column2 h1 {
        font-family: theBoldFont;
        font-size: 28px;
        }

        .column2 h {
          font-family: theBoldFont;
        }

        .column2 p {
          font-family: Klik;
        }

         /* Style the footer */
        .footer {
          background-color: #f1f1f1;
          padding: 10px;
          text-align: center;
          margin-left: 200px;
          font-family: Klik;
        }

        /* Responsive layout - makes the three columns stack on top of each other                                                 instead of next to each other */
   @media (max-width: 600px) {
   .row {
         -webkit-flex-direction: column;
         flex-direction: column;
    }
 }

  .mySlides {
       display: none;
  }

  /* Next & previous buttons */
 .prev,
 .next {
     cursor: pointer;
     position: absolute;
     top: 40%;
     width: auto;
     padding: 16px;
     margin-top: -50px;
     color: white;
     font-weight: bold;
     font-size: 20px;
     border-radius: 50%;
     user-select: none;
     -webkit-user-select: none;
  }

  /* Position the "next button" to the right */
  .next {
    right: 0%;

   }

   /* 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);
    }

Please signup or login to give your own answer.

Click here to cancel reply.

How to position the next/prev buttons of my slideshow relative to the column they're in rather than the page? (Bonus: Make them circles?) – Photoshop

Answers