Css - Invisible forward and back buttons for image slideshow + slideshow splacement

ThomasDunlay
May 1, 2023
133 views
0 votes
2 Answers

I am trying to create forward and back buttons for my slideshow that are invisible and span past the image to the edge of the page (see [

I was able to get the slideshow to work on its own, but now that I have plugged it in to the rest of my code It is not spaced evenly and the forward and back buttons do not function.There may be some interaction with the navbar js I am not aware of

I currently have the slides set up so you can only go forward but need to be able to go backword as well and be able to expand forward and back buttons as they are in the photo

Here is my code currently

const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]

toggleButton.addEventListener('click', () => {
  navbarLinks.classList.toggle('active')
})

/* Button code */
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var contentbox = this.nextElementSibling;
    if (contentbox.style.display === "block") {
      contentbox.style.display = "none";
    } else {
      contentbox.style.display = "block";
    }
  });
}
/*slide code */

var slideIndex = 1;
showSlides(slideIndex);

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

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

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("slides");
  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";
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

.navbar {
  float: left;
  position: fixed;
  margin: 25px 20px;
  padding: 10px;
}

.brand-title {
  font-size: 28px;
  margin: 15px;
  font-family: Arial, Helvetica, sans-serif;
}

.navbar-links {
  margin-top: 40px;
  height: 100%;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 15px;
}

.navbar-links ul {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

.navbar-links li {
  list-style: none;
}

.underline {
  text-decoration: underline;
}

.navbar-links li a {
  display: block;
  text-decoration: none;
  color: black;
  margin-left: 15px;
  margin-bottom: 15px;
}

.navbar-links li:hover {
  text-decoration: none;
}

.bottom-nav {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  margin-top: 20px;
}

.bottom-nav li a {
  margin-bottom: 10px;
}

.toggle-button {
  position: absolute;
  top: .75rem;
  right: 1rem;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 50px;
  height: 40px;
}

.toggle-button .bar {
  height: 8px;
  width: 100%;
  background-color: black;
  border-radius: 10px;
}

.desktop {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.description {
  background-color: red;
  display: flex;
  justify-content: center;
}

.slideshow-container {
  max-height: 80%;
  max-width: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  cursor: e-resize;
}

.Paragraphbox {
  max-width: 700px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.slides {
  max-height: 100%;
  max-width: 100%;
  text-align: left;
  padding-bottom: 10px;
  font-family: Arial, sans-serif;
  font-size: 12px !important;
}

.slides img {
  max-height: 100%;
  max-width: 100%;
  text-align: center;
}

.mobile {
  display: none;
}

@media screen and (max-width: 700px) {
  .brand-title {
    font-size: 3.5em;
    margin-right: 200px;
    margin-left: 50px;
  }
  .navbar {
    flex-direction: column;
    align-items: flex-start;
    width: 90%;
  }
  .toggle-button {
    display: flex;
    margin-top: 30px;
  }
  .navbar-links {
    display: none;
    width: 100%;
    background-color: white;
    padding-top: 40px;
    padding-bottom: 30px
  }
  .navbar-links ul {
    width: 100%;
    flex-direction: column;
    font-size: 3em;
  }
  .navbar-links ul .bottom-nav {
    font-size: 30px;
  }
  .navbar-links ul li {
    text-align: center;
  }
  .navbar-links ul li a {
    padding: .5rem 1rem;
  }
  .navbar-links.active {
    display: flex;
  }
  .Paragraphbox {
    max-width: 400px;
    padding-top: 400px;
  }
  .Paragraphbox a {
    color: blue !important;
  }
}

a {
  text-decoration: none;
  color: black;
}

.navbar-links a:hover {
  color: blue !important;
}

.slides {
  font-size: 30px;
}

@media (pointer:none),
(pointer:coarse) {
  .brand-title {
    font-size: 3.5em;
    margin-right: 200px;
    margin-left: 50px;
  }
  .navbar {
    flex-direction: column;
    align-items: flex-start;
    width: 90%;
  }
  .toggle-button {
    display: flex;
    margin-top: 30px;
  }
  .navbar-links {
    display: none;
    width: 100%;
    background-color: white;
    padding-top: 40px;
    padding-bottom: 30px;
  }
  .navbar-links ul {
    width: 100%;
    flex-direction: column;
    font-size: 3em;
  }
  .navbar-links ul .bottom-nav {
    font-size: 30px;
  }
  .navbar-links ul li {
    text-align: center;
  }
  .navbar-links ul li a {
    padding: .5rem 1rem;
  }
  .navbar-links.active {
    display: flex;
  }
  .Paragraphbox {
    max-width: 400px;
    padding-top: 400px;
  }
  .Paragraphbox a {
    color: blue !important;
  }
  .slides {
    font-size: 30px;
  }
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="background_styles.css">
  <link rel="stylesheet" href="styles.css">
  <script src="script.js" defer></script>
  <title>The American Southwest Archive Pt.1</title>
</head>

<body>
  <nav class="navbar">
    <div class="brand-title"><strong><a href='/'>Justin Guthrie</a></strong></div>
    <a href="#" class="toggle-button">
      <span class="bar"></span>
      <span class="bar"></span>
      <span class="bar"></span>
    </a>
    <div class="navbar-links">
      <ul>
        <li><a href="/">Selected Photos</a></li>
        <li><a href="/newworldrites">New World Rites</a></li>
        <li><a href="/shadowboxscultpures">Shadow Box Scultptures</a></li>
        <li class="underline"><a href="/americansouthwest">The American Southwest <br>Archive Pt.1</br></a></a>
        </li>
        <li><a href="/lariverobjects">L.A. River Objects</a></li>
        <li><a href="/Godisalive">God is Alive</a></li>
        <div class="bottom-nav"><strong>
              <li><a href="/about">About / CV</a></li>
              <li><a href="https://shop.justin-guthrie.com/">Shop</a></li>
            </strong>
        </div>
      </ul>
    </div>
  </nav>

  <div class='desktop'>
    <div class="slideshow-container">
      <!-- Full-width images with number and caption text -->
      <div class="slides">
        <img src="img4/1 ACWA Cover.jpg" onclick="pslide(1)">
        <br><strong>The American Southwest Archive Pt.1</strong>
        <br>2023
        <br>Published by B12 Books
        <br><a href="https://shop.justin-guthrie.com/">Store</a>
      </div>
      <div class="slides">
        <img src="img4/2 ACWA pages.jpg" onclick="pslide(1)">
      </div>
      <div class="slides">
        <img src="img4/3 ACWA pages.jpg" onclick="pslide(1)">
      </div>
    </div>


  </div>
</body>

</html>

Answers

- IHAB
- May 1, 2023 at 10:14 pm
- 0 votes
0
please don’t take my world personally but there is a lot of error in your code per example:
```
.toggle-button {
 position: absolute;
 top: .75rem;
 right: 1rem;
 display: none;
 flex-direction: column;
 justify-content: space-between;
 width: 50px;
 height: 40px;
}
```
This line won’t never justify the items cause the display is not flex …
I can help, but you’ll need to make a reproducible code in CodePen.
Login or Signup to reply.

So to make it invisible, I have set background-color: transparent.
Full code below:

const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]

toggleButton.addEventListener('click', () => {
  navbarLinks.classList.toggle('active')
})

/* Button code */
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var contentbox = this.nextElementSibling;
    if (contentbox.style.display === "block") {
      contentbox.style.display = "none";
    } else {
      contentbox.style.display = "block";
    }
  });
}
/*slide code */

var slideIndex = 1;
showSlides(slideIndex);

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

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

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("slides");
  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";
  try{dots[slideIndex - 1].className += " active";}
  catch (e){}
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

.navbar {
  float: left;
  position: fixed;
  margin: 25px 20px;
  padding: 10px;
}

.brand-title {
  font-size: 28px;
  margin: 15px;
  font-family: Arial, Helvetica, sans-serif;
}

.navbar-links {
  margin-top: 40px;
  height: 100%;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 15px;
}

.navbar-links ul {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

.navbar-links li {
  list-style: none;
}

.underline {
  text-decoration: underline;
}

.navbar-links li a {
  display: block;
  text-decoration: none;
  color: black;
  margin-left: 15px;
  margin-bottom: 15px;
}

.navbar-links li:hover {
  text-decoration: none;
}

.bottom-nav {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  margin-top: 20px;
}

.bottom-nav li a {
  margin-bottom: 10px;
}

.toggle-button {
  position: absolute;
  top: .75rem;
  right: 1rem;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 50px;
  height: 40px;
}

.toggle-button .bar {
  height: 8px;
  width: 100%;
  background-color: black;
  border-radius: 10px;
}

.desktop {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

.description {
  background-color: red;
  display: flex;
  justify-content: center;
}

.slideshow-container {
  max-height: 80%;
  max-width: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  cursor: e-resize;
}

.Paragraphbox {
  max-width: 700px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.slides {
  max-height: 100%;
  max-width: 100%;
  text-align: left;
  padding-bottom: 10px;
  font-family: Arial, sans-serif;
  font-size: 12px !important;
}

.slides img {
  max-height: 100%;
  max-width: 100%;
  text-align: center;
}

.mobile {
  display: none;
}

@media screen and (max-width: 700px) {
  .brand-title {
font-size: 3.5em;
margin-right: 200px;
margin-left: 50px;
  }
  .navbar {
flex-direction: column;
align-items: flex-start;
width: 90%;
  }
  .toggle-button {
display: flex;
margin-top: 30px;
  }
  .navbar-links {
display: none;
width: 100%;
background-color: white;
padding-top: 40px;
padding-bottom: 30px
  }
  .navbar-links ul {
width: 100%;
flex-direction: column;
font-size: 3em;
  }
  .navbar-links ul .bottom-nav {
font-size: 30px;
  }
  .navbar-links ul li {
text-align: center;
  }
  .navbar-links ul li a {
padding: .5rem 1rem;
  }
  .navbar-links.active {
display: flex;
  }
  .Paragraphbox {
max-width: 400px;
padding-top: 400px;
  }
  .Paragraphbox a {
color: blue !important;
  }
}

a {
  text-decoration: none;
  color: black;
}

.navbar-links a:hover {
  color: blue !important;
}

.slides {
  font-size: 30px;
}
leftBox{float: left;}
#rightBox{float: right;}
#leftBox, #rightBox{
width: 40%;
height: 100%;
background-color: transparent;
z-index: 10;
position: relative;
flex-direction: row;
}
@media (pointer:none),
(pointer:coarse) {
  .brand-title {
font-size: 3.5em;
margin-right: 200px;
margin-left: 50px;
  }
  .navbar {
flex-direction: column;
align-items: flex-start;
width: 90%;
  }
  .toggle-button {
display: flex;
margin-top: 30px;
  }
  .navbar-links {
display: none;
width: 100%;
background-color: white;
padding-top: 40px;
padding-bottom: 30px;
  }
  .navbar-links ul {
width: 100%;
flex-direction: column;
font-size: 3em;
  }
  .navbar-links ul .bottom-nav {
font-size: 30px;
  }
  .navbar-links ul li {
text-align: center;
  }
  .navbar-links ul li a {
padding: .5rem 1rem;
  }
  .navbar-links.active {
display: flex;
  }
  .Paragraphbox {
max-width: 400px;
padding-top: 400px;
  }
  .Paragraphbox a {
color: blue !important;
  }
  .slides {
font-size: 30px;
  }
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="background_styles.css">
  <link rel="stylesheet" href="styles.css">
  <script src="script.js" defer></script>
  <title>The American Southwest Archive Pt.1</title>
</head>

<body>
  <nav class="navbar">
<div class="brand-title"><strong><a href='/'>Justin Guthrie</a></strong></div>
<a href="#" class="toggle-button">
  <span class="bar"></span>
  <span class="bar"></span>
  <span class="bar"></span>
</a>
<div class="navbar-links">
  <ul>
    <li><a href="/">Selected Photos</a></li>
    <li><a href="/newworldrites">New World Rites</a></li>
    <li><a href="/shadowboxscultpures">Shadow Box Scultptures</a></li>
    <li class="underline"><a href="/americansouthwest">The American Southwest <br>Archive Pt.1</br></a></a>
    </li>
    <li><a href="/lariverobjects">L.A. River Objects</a></li>
    <li><a href="/Godisalive">God is Alive</a></li>
    <div class="bottom-nav"><strong>
          <li><a href="/about">About / CV</a></li>
          <li><a href="https://shop.justin-guthrie.com/">Shop</a></li>
        </strong>
    </div>
  </ul>
</div>
  </nav>

  <div class='desktop'>
<span  id="leftBox" onclick="pslide(-1)"></span>
<div class="slideshow-container">
  <!-- Full-width images with number and caption text -->
  <div class="slides">
    <img src="img4/1 ACWA Cover.jpg" onclick="pslide(1)">
    <br><strong>The American Southwest Archive Pt.1</strong>
    <br>2023
    <br>Published by B12 Books
    <br><a href="https://shop.justin-guthrie.com/">Store</a>
  </div>
  <div class="slides">
    <img src="img4/2 ACWA pages.jpg" onclick="pslide(1)">
  </div>
  <div class="slides">
    <img src="img4/3 ACWA pages.jpg" onclick="pslide(1)">
  </div>
  
</div>
  <span id="rightBox" onclick="pslide(1)"></span>

  </div>
</body>

</html>

Please signup or login to give your own answer.

Click here to cancel reply.

Css – Invisible forward and back buttons for image slideshow + slideshow splacement

Answers