I have a slideshow set up with a simple fade effect and I want to make it full size responsive.
Even though I have the slideshow, fullscreen settings, and responsive code working properly, I am facing an issue where the image is not centered entirely when resizing it. To create the slideshow, I utilized a straightforward plugin that functions effectively.
I have experimented with numerous codes in an attempt to avoid using a pre-programmed slider.
In conclusion, I need my image to always be centered according to the window/screen size.
Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>xXxXx</title>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle2.min.js"></script>
<style type="text/css">
body {
font-family:sans-serif;
}
.cycle-slideshow {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
.cycle-slideshow img{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
</style>
</head>
<body>
<div class="cycle-slideshow">
<img src="slider/1.jpg" alt="slider 1">
<img src="slider/2.jpg" alt="slider 2">
<img src="slider/3.jpg" alt="slider 3">
</div>
</body>
</html>