I have been developing a personal practice website and have successfully integrated a jQuery slide show for showcasing photographs. However, I am facing a challenge in making these slides responsive when the screen size changes. I have gone through numerous resources but haven't been able to identify the root cause of the issue. Below is the snippet of the code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<link href='http://fonts.googleapis.com/css?family=Alegreya+Sans+SC:400,400italic,500italic' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0" />
<meta charset="UTF-8"/>
<link rel="sitemap" type="application/xml" title="Sitemap" href="sitemap.xml" />
<style>
/* Prevents slides from flashing */
#slides {
display:none;
}
</style>
<!-- jQuery -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
var slideWidth = 700;
var slideHeight = 393;
if(window.innerWidth <= 400) {
slideWidth = window.innerWidth;
}
$("#slides").slidesjs({
play: {
active: true,
// [boolean] Generate the play and stop buttons.
// You cannot use your own buttons. Sorry.
effect: "fade",
// [string] Can be either "slide" or "fade".
interval: 3000,
// [number] Time spent on each slide in milliseconds.
auto: true,
// [boolean] Start playing the slideshow on load.
swap: true,
// [boolean] show/hide stop and play buttons
pauseOnHover: false,
// [boolean] pause a playing slideshow on hover
restartDelay: 2500
// [number] restart delay on inactive slideshow
},
width: slideWidth,
height: slideHeight
});
});
</script>
... (The rest of the code) ...
</div>
</div>
</p>
<p><div>
<div>
<pre><code>img {
position: relative;
padding-top: 4%;
}
body {
font-family: 'Alegreya Sans SC', sans-serif;
font-weight: lighter;
}
.slides {
display: block;
max-width: 50%;
max-height: 100%;
position: relative;
margin-left: 20%;
margin-top: 2%
}
.slidesjs-container {
overflow: hidden;
margin: 0;
width: 100%;
background-color: red;
}// Generated by CoffeeScript 1.6.1
... (The rest of the CoffeeScript code) ...
}).call(this);