Is there a way to dynamically set the browser's width as a variable?
I am familiar with @media queries, but I need to calculate the browser's width for a specific purpose.
I attempted using jQuery to achieve this, and it works well with a fixed browser width. However, it fails to update when I resize the browser window.
Here is what I aim to accomplish:
html
<section id="slider">
<div class="slides">
<div class="slide">
<h1>silde 1</h1>
<p>Lorem ipsum dolor</p>
</div>
<div class="slide">
<h1>silde 2</h1>
<p>Lorem ipsum dolor</p>
</div>
</div> </section>
SCSS
$browser-width: (BROWSER WIDTH HERE) * .75 ;
#slider {
overflow: hidden;
position: relative;
margin: auto;
width: $browser-width;
.slides {
display: block;
margin: 0;
padding: 0;
width: 6000px;
}
.slide {
width: $browser-width;
display: inline-block;
float: left;
text-align: center;
}
}
As a temporary solution, I implemented the following jQuery code:
$(document).ready(function(){
var width = $(window).width() * .75;
var $slider = $('#slider');
var $slideContainer = $slider.find('.slides');
var $slides = $slideContainer.find('.slide');
$slider.css("width", width);
$slides.css("width", width);
/* function to make the slider here */
});
Setting 'width = 75%' or 'width = 75vw' did not yield the desired result.