Есть простой html слайдер как его подогнать под все размеры экрана?
<center>
<div class="container-fluid mt-5 p-3 white">
<div class="sl_ctr">
<div class="sldr">
<img src="https://www.uapoker.info/sites/default/files/tinyimages2/5ee1f8baa74bb_ggpokerok-best-pokerroom.gif" width="944px" height="200px" alt="">
<img src="https://www.uapoker.info/sites/default/files/tinyimages2/5ed1234f8523a_pokermatch-2.gif" width="944px" height="200px" alt="">
<img src="https://www.uapoker.info/sites/default/files/tinyimages2/5ed1234f8523a_pokermatch-2.gif" width="944px" height="200px" alt="">
<img src="https://www.uapoker.info/sites/default/files/tinyimages2/5ed1234f8523a_pokermatch-2.gif" width="944px" height="200px" alt="">
</div>
<div class="prv_b"></div>
<div class="nxt_b"></div>
</div>
</div>
</center>
css
<style>
.sl_ctr{
position:relative;
width:944px;
height:200px;
overflow:hidden;
}
.sldr{
position:relative;
width:10000px;
height:200px;
}
.sldr img{
float:left;
}
.prv_b, .nxt_b{
position:absolute;
top:135px;
display:block;
width:35px;
height:35px;
cursor:pointer;
}
.prv_b:hover, .nxt_b:hover{opacity:.6;}
.prv_b{
left:10px;
background:url(images/prv.png) no-repeat;
}
.nxt_b{
right:10px;
background:url(images/nxt.png) no-repeat;
}
</style>
js
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(function() {
var sldr = $('.sldr'),
sldrContent = sldr.html(),
slideWidth = $('.sl_ctr').outerWidth(),
slideCount = $('.sldr img').length,
prv_b = $('.prv_b'),
nxt_b = $('.nxt_b'),
sldrInterval = 3300,
animateTime = 1000,
course = 1,
margin = - slideWidth;
$('.sldr img:last').clone().prependTo('.sldr');$('.sldr img').eq(1).clone().appendTo('.sldr');$('.sldr').css('margin-left',-slideWidth);function nxt_bSlide(){interval=window.setInterval(animate,sldrInterval)}function animate(){if(margin==-slideCount*slideWidth-slideWidth){sldr.css({'marginLeft':-slideWidth});margin=-slideWidth*2}else if(margin==0&&course==-1){sldr.css({'marginLeft':-slideWidth*slideCount});margin=-slideWidth*slideCount+slideWidth}else{margin=margin-slideWidth*(course)}sldr.animate({'marginLeft':margin},animateTime)}function sldrStop(){window.clearInterval(interval)}prv_b.click(function(){if(sldr.is(':animated')){return false}var course2=course;course=-1;animate();course=course2});nxt_b.click(function(){if(sldr.is(':animated')){return false}var course2=course;course=1;animate();course=course2});sldr.add(nxt_b).add(prv_b).hover(function(){sldrStop()},nxt_bSlide);nxt_bSlide()});
</script>
Простой
