We Keep Coding

How to make an image fit into a simple auto-playing slideshow?

My question is regarding sizing of images into a section, which I think is called a container. Does anybody happen to know how to do this.
I've included the code of the aspects involved.
HTML
<div id="slideshow">
<div>
<img src="Img1.jpg">
</div>
<div>
<img src="Img2.jpg">
</div>
<div>
<img src="Img3.jpg">
</div>
</div>
CSS
img {
width: 100%;
height: auto;
display: block;
}
#slideshow {
margin: 80px auto;
position: absolute;
top: 20%;
left: 22%;
width: 350px;
height: 350px;
padding: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}
.slideshow {
height: 300px;
width: 300px;
}
#slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
JS
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);
});
</script>

First of all, I love your energy man, amazing. :)
You are only couple of lines from the result you want.
One of the errors was that you didnt actually target the slideshow div in your css, you were targeting it as .slideshow, and that is wrong because slideshow is an ID, so you should say #slideshow in your css.
And the last thing that you gotta do is make your images always fully fit your container, you can do this by using width : 100%; height: 100%; object-fit: cover;
Just replace your current css with this one, and it should work :)
img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
#slideshow {
margin: 80px auto;
position: absolute;
top: 20%;
left: 22%;
width: 350px;
height: 350px;
padding: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}
#slideshow {
height: 300px;
width: 300px;
}
#slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}

Javascript slideshow with delay between images

I have the following code to display a slideshow. It works fine, but what I would like to have happen is have the 1st image fade out, there be a delay of a second or 2, and then have the next image fade in. I have this with 2 images right now, but will have multiple images when I finish. Just did 2 for testing right now.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(5000)
.next()
.fadeIn(5000)
.end()
.appendTo('#slideshow');
}, 8000);
</script>
<style>
#slideshow {
margin: 50px auto;
position: relative;
width: 240px;
height: 240px;
padding: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
#slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
.myslides{
display: none
}
</style>
<div id="slideshow">
<div>
<img src="images/IMG_5434.JPG" width="240" height="240">
</div>
<div class="myslides">
<img src="images/IMG_5435.JPG" width="240" height="240">
</div>
</div>
Any thoughts or ideas are appreciated.
Thanks

Use .delay(7000) in the chain. It sets a timer to delay execution of subsequent items in the queue.
Here 7000ms will give you a delay of 2 seconds as your image is fading out in 5000ms.
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(5000)
.next()
.delay(10000)
.fadeIn(5000)
.end()
.appendTo('#slideshow');
}, 8000);
#slideshow {
margin: 50px auto;
position: relative;
width: 240px;
height: 240px;
padding: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}
#slideshow>div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
.myslides {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slideshow">
<div>
<img src="https://imagejournal.org/wp-content/uploads/bb-plugin/cache/23466317216_b99485ba14_o-panorama.jpg" width="240" height="240">
</div>
<div class="myslides">
<img src="https://www.w3schools.com/howto/img_fjords.jpg" width="240" height="240">
</div>
</div>

make the whole section responsive

i was trying to make a section of website, responsive by giving heights and widths in % instead of pixels, but it is not working so please help to make it responsive.
while changing resolution it is not working, i want the ending border with it also while it goes to different resolution..
HTML
<section class="banner ik">
<div class="img_box">
<div class="fadein">
<img src="banner/b1_03.jpg">
<img src="banner/ban2_03.jpg">
<img src="banner/ban3_03.jpg">
</div>
</div>
</section>
JS
<script type="text/javascript">
$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){
$('.fadein :first-child').fadeOut()
.next('img').fadeIn()
.end().appendTo('.fadein');},
3000);
});
</script>
CSS
.banner{
width: 100%;
height: auto;
border-bottom: solid 1px black;
margin: 0 auto;
}
.ik {
z-index: -1;
position: absolute;
height: 405px;
}
.img_box{
width: 100%;
overflow: hidden;
}
.fadein {
position: relative;
width: 100%;
height: 420px;
}
.fadein img { position:absolute; left:0; top:0; width: 100%; }

Jquery slider not working properly?

I have a jquery slider , when i load the page all div coming together and after sometime it working perfectly .pls try my code....please
This is the html code i have
is there any way to make this slider as a slide in left type slider instead of fadeout?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);
</script>
</head>
<body>
<style>
#slider_one_img{
float: left;
background-image: url('one.jpg');
width: 84px;
height: 86px;
}
#slider_two_img{
float: left;
background-image: url('two.png');
width: 84px;
height: 86px;
}
#slider_three_img{
float: left;
background-image: url('three.jpg');
width: 84px;
height: 86px;
}
#slider_one_text{
width:70%;
text-align: left;
margin-top: 3%;
float: left;
}
#slideshow {
margin: 68px auto;
position: relative;
width: 68%;
height: 120px;
padding: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
margin-left: 2%;
}
#slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
</style>
<div id="slideshow">
<div>
<div id="slider_one_text">My first text</div>
<div id="slider_one_img"></div>
</div>
<div>
<div id="slider_one_text">My second text...erewrew.r.ewr.eqwr.ewrweqrqewrqwerwerwer
</div>
<div id="slider_two_img"></div>
</div>
<div>
<div id="slider_one_text">My third text skjsndgnsdkjgndnskgnksngk</div>
<div id="slider_three_img"></div>
</div>
</div>
</body>
</html>
please help

Wrap your code inside $(document).ready(function(){}). Your code works fine.
Refer jQuery Slide Effect for sliding left or right.
Example:
$(document).ready(function () {
$("#slideshow > div:gt(0)").hide();
setInterval(function () {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);
});
Demo: http://jsfiddle.net/lotusgodkk/y5C4G/7/

Jquery slider modification?

HI i have a sample code for jquery slider and it contains 3 div slides..
It working perfectly ,but i need 3 donts(small circles) also in same slider.
Can any one help me ,how to add those.
What i have now is
what i want is same slider but i also want 3 dots representing each slider and it should open corresponding slider when we click on dots.
my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);
</script>
</head>
<body>
<style>
#slider_one_img{
float: left;
background-image: url('one.jpg');
width: 84px;
height: 86px;
}
#slider_two_img{
float: left;
background-image: url('two.png');
width: 84px;
height: 86px;
}
#slider_three_img{
float: left;
background-image: url('three.jpg');
width: 84px;
height: 86px;
}
#slider_one_text{
width:70%;
text-align: left;
margin-top: 3%;
float: left;
}
#slideshow {
margin: 68px auto;
position: relative;
width: 68%;
height: 120px;
padding: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
margin-left: 2%;
}
#slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
</style>
<div id="slideshow">
<div>
<div id="slider_one_text">My first text</div>
<div id="slider_one_img"></div>
</div>
<div>
<div id="slider_one_text">My second text...erewrew.r.ewr.eqwr.ewrweqrqewrqwerwerwer
</div>
<div id="slider_two_img"></div>
</div>
<div>
<div id="slider_one_text">My third text skjsndgnsdkjgndnskgnksngk</div>
<div id="slider_three_img"></div>
</div>
</div>
</body>
</html>

You could do something like this as an example
http://jsfiddle.net/danhayman/yxnet/
jQuery:
$("#dot-wrapper div").click(function(){
var index = $(this).index();
$("#dot-wrapper div").removeClass("current").eq(index).addClass("current");
$("#image-wrapper div").removeClass("current").eq(index).addClass("current");
})
CSS:
#image-wrapper div{
width: 10em;
height: 10em;
display: none;
}
#image-wrapper .current{
display: block;
}
#image-wrapper div:nth-child(1){
background-color:red;
}
#image-wrapper div:nth-child(2){
background-color:green;
}
#image-wrapper div:nth-child(3){
background-color:blue;
}
#dot-wrapper div{
width: 1em;
height: 1em;
border-radius: .5em;
background-color: gray;
display: inline-block;
cursor: pointer;
margin: .5em;
}
#dot-wrapper .current{
background-color: black;
}
HTML:
<div id="image-wrapper">
<div class="current"></div>
<div></div>
<div></div>
</div>
<div id="dot-wrapper">
<div class="current"></div>
<div></div>
<div></div>
</div>