CODEWITHSUNDEEP
javascripthtmljquerycss
Steven Jeffers
Steven Jeffers

Reputation: 79

Javascript Slideshow Image Container

So here is my code. I so far have the slide show worker with said given images.

I am having the problem with Containing and Stretching the images to fit inside of my container div.

Here is the code:

Thanks in advance for any help.

var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}
  slides[slideIndex-1].style.display = "block";
  setTimeout(showSlides, 2000); // Change image every 2 seconds
}
.imgContainer {
    padding-top: 80px;
    background-color: rgba(0, 0, 0, 0.603);
    width: 100%;
    height: 575px;
}

.img1 {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover; 
}
<div class="imgContainer" alt="imgContainer">
<img class="mySlides" src="https://fakeimg.pl/400x200/?text=Img 1&font=lobster" alt="imgj1">
<img class="mySlides" src="https://fakeimg.pl/400x200/?text=Img 2&font=lobster" alt="imgj1">
<img class="mySlides" src="https://fakeimg.pl/400x200/?text=Img 3&font=lobster" alt="imgj1">

</div>

Upvotes: 0

Views: 159

Answers (4)

Steven Jeffers
Steven Jeffers

Reputation: 79

The actual answer to this question was in the CSS properties & Javascript element Selector.

After more research the best way to do this is to change my outer containing div class to the "mySlides" tag shown in the javascript.

Additionally, add CSS rules to ".mySlides" instead of imgContainer.

The end result

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}
  slides[slideIndex-1].style.display = "block";
  setTimeout(showSlides, 4000); // Change image every 2 seconds
}
.mySlides {
    overflow: hidden;
    background-size:cover;
    background-position: center;
    width: 100%;
    height: 650px;
    
}
<div class="imgContainer" alt="imgContainer">
<img class="mySlides" src="someimage1.jpg" >
<img class="mySlides" src="someimage2.jpg" >
<img class="mySlides" src="someimage3.jpg" >
</div>

Thanks for the english grammar help earlier, I was tired.

Upvotes: 0

Khalil
Khalil

Reputation: 1515

In the css, you are selecting the elements by the alt attribute .imgj1, what you should do instead is, access them by their classes .mySlides. Furthermore, the snippet needs to have working images to work properly, as it is difficult to provide you with an answer.

Try wrapping the images in containing <div> element and adding width: 100% and height: 100% to both the images and the <div> element. If this does not work, then please fix the images so I can answer better.

So according to my understanding, you want the images to fill the entire parent container.

Try this:

<div class="imgContainer">
    <div class="mySlides">
        <img class="slideImage" src="{image_src}" alt="imgj1">
    </div>
    <div class="mySlides">
        <img class="slideImage" src="{image_src}" alt="imgj2">
    </div>
    <div class="mySlides">
        <img class="slideImage" src="{image_src}" alt="imgj3">
    </div>
</div>

.imgContainer {
    padding-top: 80px;
    background-color: rgba(0, 0, 0, 0.603);
    width: 100%;
    height: 575px;
}

.mySlides {
    width: 100%;
    height: 100%;
}

.slideImage {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Upvotes: 1

Steven Jeffers
Steven Jeffers

Reputation: 79

.imgContainer {
    padding-top: 80px;
    background-color: rgba(0, 0, 0, 0.603);
    width: 100%;
    height: 575px;
}

vvv**************Actually Works to an extent**************vvv
.mySlides {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    
}

^^^**************Actually Works to an extent**************^^^

So doing this does contain the image within the div.

However, using width 100%, and height 100% only gives me 100% of the size of the image that is sitting in the div. it does not stretch it across the 100% width of the screen, as the div does.

I'm looking to take any image, and completely fill the containing div with it. I know this is possible via javascript. There is just not a lot it out there that I can find.

Upvotes: 0

SKJ
SKJ

Reputation: 2326

You need css rule with img to 100% of your imgContainer container

var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}
  slides[slideIndex-1].style.display = "block";
  setTimeout(showSlides, 2000); // Change image every 2 seconds
}
.imgContainer {
    padding-top: 80px;
    background-color: rgba(0, 0, 0, 0.603);
    width: 100%;
    height: 575px;
}
.imgContainer img {
    width:100%
}
.img1 {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover; 
}
<div class="imgContainer" alt="imgContainer">
<img class="mySlides" src="https://fakeimg.pl/400x200/?text=Img 1&font=lobster" alt="imgj1">
<img class="mySlides" src="https://fakeimg.pl/400x200/?text=Img 2&font=lobster" alt="imgj1">
<img class="mySlides" src="https://fakeimg.pl/400x200/?text=Img 3&font=lobster" alt="imgj1">

</div>

Upvotes: 1

Related Questions