I’ve been working on a program for my side job that is supposed to have lots of slider like features between content with LOTS of content. My favorite slider libray, because it’s got SO much functionality for devs is jssor.
One thing I could not find a proper solution for was making a full screen slider that would work on any screen or device (with a modern browser). So, I thought and thought and came up with a solution.
So there’s no way to set jssor height by percentage or parent height and keep the width proportional. I tried everything I could but it absolutely must be pixels. There are some options that set it but the width is then off. Seriously, I tried everything.
So What If We Set It By Pixels?
I mean, it is a php site. So I came up with an interesting solution. It’s not bullet proof, especially if the user resizes the window, but it works.
My php starts with this:
session_start();
if( isset( $_REQUEST['wslides'] ) ) {
$_SESSION['wslides'] = $_REQUEST['wslides'];
$_SESSION['hslides'] = $_REQUEST['hslides'];
}
if( !isset( $_SESSION['wslides'] ) || isset( $_REQUEST['reset'] ) ) {
header( "Location: set-dimensions.php" );
}
Here we start a session, then, we see if there’s a query variable called ‘wslides.’ If there is, then we have ‘wheight’ too and we know what pixels to set for our slider. Bam!
So How Do We Get Those Pixel Dimensions?
Look at the next ‘if’ statement. If we don’t have a session set for width and height we forward to a page called ‘set-dimensions.php’. Here’s the full code of that page:
<html>
<head>
<title>Loading</title>
<script language="javascript" type="text/javascript">
window.location.href='index.php?wslides=' + window.innerWidth + '&hslides=' + window.innerHeight;
</script>
</head>
<body></body>
</html>
It’s just used to set dimensions of window very fast then send back with the query variables. Now we can build our slider to the window’s width!
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: <?php echo $_SESSION['wslides']; ?>px; height: <?php echo $_SESSION['hslides']; ?>px;"> <!-- Slides Container --> <div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: <?php echo $_SESSION['wslides']; ?>px; height: <?php echo $_SESSION['hslides']; ?>px;"> <div id="slide-welcome">hello</div> <div id="slide-goodbye">goodbye</div> </div> </div>