Why is there extra space alongside my carousel images?

February 1, 2022

I am not a coder by trade, but am working on hacking together an image carousel for our website. I’ve gotten everything to work except for this last weird problem I am having with spacing. In the attached image, you’ll see there is too much spacing between the screenshot and the next-image button to the right of it.

Here is the code (apologies in advance, it is truly terrible):

// Declaring variable array of images. You can put as many as you want.
const myimages = ["https://www.agathos.io/hs-fs/hubfs/text%20v2%20gimp.png?width=534&height=1136&name=text%20v2%20gimp.png", "https://i.imgur.com/uoAHQ17.jpeg", "https://i.imgur.com/rk3KK2p.jpeg", "https://i.imgur.com/rk3KK2p.jpeg", "https://i.imgur.com/rk3KK2p.jpeg"];
const mycaptions = ["Once a week, physicians receive a text letting them know specific information about how they are handling a particular practice area. Curious to learn more, they follow the link for a deeper look. What is nice about this approach is that it is easy and can be accessed at a time convenient to physician.", "Test caption 2", "Test caption 3", "Test caption 4", "Test caption 5"]; 

const prevBtn = document.getElementById("p-10-s-i-s-prev-btn");  // assigning variable for previous button
const nextBtn = document.getElementById("p-10-s-i-s-next-btn");  // assigning variable for next button
const imageContainer = document.getElementById("p-10-s-i-s-image-container"); // assigning variable for image container div
const captionContainer = document.getElementById("p-11-s-i-s-caption-place-holder");
var myimage = myimages[0]; // Assigning initial value for the varibale to show on page loading and showing first image.
var mycaption = mycaptions[0]; // Assigning and showing the first caption of the first image.

imageContainer.innerHTML = '<img src="'+myimage+'" />';
captionContainer.innerHTML = mycaption;


var counter = 0;
prevBtn.addEventListener("click", function(){
    if (counter > 0 && counter < myimages.length){
            counter--;
            myimage = myimages[counter];
            mycaption = mycaptions[counter];
            imageContainer.innerHTML = '<img src="'+myimage+'" />';
            captionContainer.innerHTML = mycaption;
        }
    });

nextBtn.addEventListener("click", function(){
    if (counter < myimages.length-1){
        counter++;
        myimage = myimages[counter];
        mycaption = mycaptions[counter];
        imageContainer.innerHTML = '<img src="'+myimage+'" />';
        captionContainer.innerHTML = mycaption;
    }
});

.p-10-s-i-s-page-background{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.p-10-simple-image-slider-wrapper{
    max-width: 45%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

#p-10-s-i-s-image-container{
    max-width: 70%;
    height: auto;
    display: flex;
    justify-content: space-between;
}

#p-10-s-i-s-image-container img{
    max-width: 70%;
    height: auto;
    display: flex;
    align-items: center;
    animation: p-10-image-animation 1s;
    
}

#p-10-s-i-s-prev-btn, #p-10-s-i-s-next-btn{
    width: 50px;
    font-family: 'Open Sans', sans-serif;
    font-size: 50px;
    display: flex;
    flex: 1;
    align-items: center;
    cursor: pointer;
    color: orange;
}

#p-10-s-i-s-prev-btn:hover, #p-10-s-i-s-next-btn:hover{
    
    transition: all 1s;
    
}

.p-10-s-i-s-page-background h1{
    color: rgb(243, 236, 176);
}

@keyframes p-10-image-animation{
    0%{
        opacity: 0.5;
    }
    100%{
        opacity: 1;
    }
}

#p-11-s-i-s-caption-place-holder{
    padding: 5px 150px 5px 150px;
    font-family: 'Open Sans', sans-serif;
    color: #565555;
    text-align: left;
    font-size: 18px;
    line-height: 150%;
    margin-bottom: 20px;
}

.yvanaplaceholder{
  display: flex;
  text-align: center;
  justify-content: center;
}

.yvana{
  color: darkgreen;
  text-decoration: none;
 }

.name{
  color: crimson;
}

<div class="p-10-s-i-s-page-background">
    <div id="p-11-s-i-s-caption-place-holder">
    </div>
  
  <div class="p-10-simple-image-slider-wrapper">
        <div id="p-10-s-i-s-prev-btn">&#60;</div>
        <div id="p-10-s-i-s-image-container" ></div>
        <div id="p-10-s-i-s-next-btn">&#62;</div>
    </div>
</div>

>Solution :

Replacing justify-content: space-between with justify-content: center in #p-10-s-i-s-image-container will fix that.

// Declaring variable array of images. You can put as many as you want.
const myimages = ["https://www.agathos.io/hs-fs/hubfs/text%20v2%20gimp.png?width=534&height=1136&name=text%20v2%20gimp.png", "https://i.imgur.com/uoAHQ17.jpeg", "https://i.imgur.com/rk3KK2p.jpeg", "https://i.imgur.com/rk3KK2p.jpeg", "https://i.imgur.com/rk3KK2p.jpeg"];
const mycaptions = ["Once a week, physicians receive a text letting them know specific information about how they are handling a particular practice area. Curious to learn more, they follow the link for a deeper look. What is nice about this approach is that it is easy and can be accessed at a time convenient to physician.", "Test caption 2", "Test caption 3", "Test caption 4", "Test caption 5"];

const prevBtn = document.getElementById("p-10-s-i-s-prev-btn"); // assigning variable for previous button
const nextBtn = document.getElementById("p-10-s-i-s-next-btn"); // assigning variable for next button
const imageContainer = document.getElementById("p-10-s-i-s-image-container"); // assigning variable for image container div
const captionContainer = document.getElementById("p-11-s-i-s-caption-place-holder");
var myimage = myimages[0]; // Assigning initial value for the varibale to show on page loading and showing first image.
var mycaption = mycaptions[0]; // Assigning and showing the first caption of the first image.

imageContainer.innerHTML = '<img src="' + myimage + '" />';
captionContainer.innerHTML = mycaption;


var counter = 0;
prevBtn.addEventListener("click", function() {
  if (counter > 0 && counter < myimages.length) {
    counter--;
    myimage = myimages[counter];
    mycaption = mycaptions[counter];
    imageContainer.innerHTML = '<img src="' + myimage + '" />';
    captionContainer.innerHTML = mycaption;
  }
});

nextBtn.addEventListener("click", function() {
  if (counter < myimages.length - 1) {
    counter++;
    myimage = myimages[counter];
    mycaption = mycaptions[counter];
    imageContainer.innerHTML = '<img src="' + myimage + '" />';
    captionContainer.innerHTML = mycaption;
  }
});

.p-10-s-i-s-page-background {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.p-10-simple-image-slider-wrapper {
  max-width: 45%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

#p-10-s-i-s-image-container {
  max-width: 70%;
  height: auto;
  display: flex;
  justify-content: center;
}

#p-10-s-i-s-image-container img {
  max-width: 70%;
  height: auto;
  display: flex;
  align-items: center;
  /* changed */
  animation: p-10-image-animation 1s;
}

#p-10-s-i-s-prev-btn,
#p-10-s-i-s-next-btn {
  width: 50px;
  font-family: 'Open Sans', sans-serif;
  font-size: 50px;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: orange;
}

#p-10-s-i-s-prev-btn:hover,
#p-10-s-i-s-next-btn:hover {
  transition: all 1s;
}

.p-10-s-i-s-page-background h1 {
  color: rgb(243, 236, 176);
}

@keyframes p-10-image-animation {
  0% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

#p-11-s-i-s-caption-place-holder {
  padding: 5px 150px 5px 150px;
  font-family: 'Open Sans', sans-serif;
  color: #565555;
  text-align: left;
  font-size: 18px;
  line-height: 150%;
  margin-bottom: 20px;
}

.yvanaplaceholder {
  display: flex;
  text-align: center;
  justify-content: center;
}

.yvana {
  color: darkgreen;
  text-decoration: none;
}

.name {
  color: crimson;
}

<div class="p-10-s-i-s-page-background">
  <div id="p-11-s-i-s-caption-place-holder">
  </div>

  <div class="p-10-simple-image-slider-wrapper">
    <div id="p-10-s-i-s-prev-btn">&#60;</div>
    <div id="p-10-s-i-s-image-container"></div>
    <div id="p-10-s-i-s-next-btn">&#62;</div>
  </div>
</div>