ปรับขนาดรูปยากถ้าไม่เท่ากัน

<style>
#container {
	width: 100%;
	margin: 10px auto;
	text-align: center;
}
header {
	margin-bottom: 20px;
}
#images {
	width: 100%;
	height: 300px;
	overflow: hidden;
	position: relative;
	margin: 20px auto;
}
#images img {
	width: 100%; /* 100% แสดงเต็มสัดส่วน ถ้า auto แสดงกว้างยาวจริงไม่เต็มรูป*/
	max-width:1366px; /*ไม่เกินกว้างจริงนี้*/
	height: auto;
	position: absolute;
	top: 0;
	left: -400px;
	z-index: 1;
	opacity: 0;
	transition: all linear 500ms;
	-o-transition: all linear 500ms;
	-moz-transition: all linear 500ms;
	-webkit-transition: all linear 500ms;
}
#images img:target {
	left: 0;
	z-index: 9;
	opacity: 1;
}
#images img:first-child {
	left: 0;
	opacity: 1;
}
#slider a {
	text-decoration: none;
	background: #E3F1FA;
	border: 1px solid #C6E4F2;
	padding: 4px 6px;
	color: #222;
}
#slider a:hover {
	background: #C6E4F2;
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function() {
    var currentImageIndex = 1;
    var totalImages = 5; // Update this if you add or remove images
    var autoSlideInterval = 1000; // Set the interval in milliseconds (e.g., 3000 for 3 seconds)

    function showNextImage() {
        currentImageIndex = (currentImageIndex % totalImages) + 1;
        location.href = "#image" + currentImageIndex;
    }

    var autoSlideTimer = setInterval(showNextImage, autoSlideInterval);

    // Stop auto slideshow on mouse enter
    document.getElementById("container").addEventListener("mouseenter", function() {
        clearInterval(autoSlideTimer);
    });

    // Resume auto slideshow on mouse leave
    document.getElementById("container").addEventListener("mouseleave", function() {
        autoSlideTimer = setInterval(showNextImage, autoSlideInterval);
    });
});
</script>
<div id="container">
	<section>
		<div id="images">
			<img id="image1" src="1.jpg" />
			<img id="image2" src="2.jpg" />
			<img id="image3" src="3.jpg" />
			<img id="image4" src="4.jpg" />
			<img id="image5" src="5.jpg" />
		</div>
		<div id="slider">
			<a href="#image1">1</a>
			<a href="#image2">2</a>
			<a href="#image3">3</a>
			<a href="#image4">4</a>
			<a href="#image5">5</a>
		</div>
	<section>
</div>

update

<style>
#container {
	width: 100%;
	margin: 10px auto;
	text-align: center;
}

#images {
	width: 100%;
	/*height: 300px;*/
	  max-height: 500px; /* Set a maximum height */
	overflow: hidden;
	position: relative;
	margin: 20px auto;
}
#images img {
	width: 100%; /* 100% แสดงเต็มสัดส่วน ถ้า auto แสดงกว้างยาวจริงไม่เต็มรูป*/
	max-width:1000px; /*ไม่เกินกว้างจริงนี้*/
	height: auto;
	top: 0;
	left: -400px;
	z-index: 1;
	opacity: 0;
	transition: all linear 500ms;
	-o-transition: all linear 500ms;
	-moz-transition: all linear 500ms;
	-webkit-transition: all linear 500ms;
}
#images img:target {
	left: 0;
	z-index: 9;
	opacity: 1;
}
#images img:first-child {
	left: 0;
	opacity: 1;
}
#slider a {
	text-decoration: none;
	background: #E3F1FA;
	border: 1px solid #C6E4F2;
	padding: 4px 6px;
	color: #222;
}
#slider a:hover {
	background: #C6E4F2;
}

/* Set height to 500px when width is more than 1000px */
/*@media (min-width: 1000px) {#images {height: 500px; }}
@media (max-width: 600px) {
    #container {max-width: 100%;}
    #images {max-width: 100%;}
    #images img {width: 100%;}
}*/
</style>

<script>
document.addEventListener("DOMContentLoaded", function() {
    var currentImageIndex = 1;
    var totalImages = 5; // Update this if you add or remove images
    var autoSlideInterval = 1000; // Set the interval in milliseconds (e.g., 3000 for 3 seconds)

    function showNextImage() {
        currentImageIndex = (currentImageIndex % totalImages) + 1;
        location.href = "#image" + currentImageIndex;
    }

    var autoSlideTimer = setInterval(showNextImage, autoSlideInterval);

    // Stop auto slideshow on mouse enter
    document.getElementById("container").addEventListener("mouseenter", function() {
        clearInterval(autoSlideTimer);
    });

    // Resume auto slideshow on mouse leave
    document.getElementById("container").addEventListener("mouseleave", function() {
        autoSlideTimer = setInterval(showNextImage, autoSlideInterval);
    });
});
</script>
<div id="container">
	<section>
		<div id="slider">
			<a href="#image1">1</a>
			<a href="#image2">2</a>
			<a href="#image3">3</a>
			<a href="#image4">4</a>
			<a href="#image5">5</a>
		</div>	
		<div id="images">
			<img id="image1" src="1.jpg" />
			<img id="image2" src="2.jpg" />
			<img id="image3" src="3.jpg" />
			<img id="image4" src="4.jpg" />
			<img id="image5" src="5.jpg" />
		</div>
	<section>
</div>