Подскажите как сделать резиновую верстку
$(function() {
var width_container_touch_slide_recommend = 380;
var div_touch_slide_recommend = $("#touch_slide_recommend");
var items_touch_slide_recommend = $("#ul_touch_slide_recommend > li");
var length_touch_slide_recommend = items_touch_slide_recommend.length;
var star_touch_slide_recommend = 0;
var distance_touch_slide_recommend = 0;
var stop_touch_slide_recommend = 0;
var max_distance_recommend = ((items_touch_slide_recommend.length) * width_container_touch_slide_recommend) - width_container_touch_slide_recommend;
div_touch_slide_recommend.css("width", width_container_touch_slide_recommend + "px");
window.touch_slide_recommend.addEventListener("touchstart", function(e) {
star_touch_slide_recommend = e.touches[0].clientX;
window.ul_touch_slide_recommend.style.transition = '0ms';
});
window.touch_slide_recommend.addEventListener('touchmove', function(e) {
distance_touch_slide_recommend = stop_touch_slide_recommend + star_touch_slide_recommend - e.touches[0].clientX
window.ul_touch_slide_recommend.style.transform = 'translateX(' + (-distance_touch_slide_recommend) + 'px)';
});
window.touch_slide_recommend.addEventListener('touchend', function(e) {
fluentslide_recommend();
stop_touch_slide_recommend = distance_touch_slide_recommend;
});
var fluentslide_recommend = function() {
index = Math.round(distance_touch_slide_recommend / width_container_touch_slide_recommend);
if (distance_touch_slide_recommend % width_container_touch_slide_recommend !== 0) {
distance_touch_slide_recommend = index * width_container_touch_slide_recommend;
}
if (distance_touch_slide_recommend < 0) {
distance_touch_slide_recommend = 0;
}
if (distance_touch_slide_recommend > max_distance_recommend) {
distance_touch_slide_recommend = max_distance_recommend;
}
window.ul_touch_slide_recommend.style.transition = '200ms';
window.ul_touch_slide_recommend.style.transform = 'translateX(' + (-distance_touch_slide_recommend) + 'px)';
}
});
<div id="touch_slide_recommend">
<ul id="ul_touch_slide_recommend">
<li><img src="img/1.jpg" alt=""/></li>
<li><img src="img/2.jpg" alt=""/></li>
<li><img src="img/3.jpg" alt=""/></li>
<li><img src="img/4.jpg" alt=""/></li>
<li><img src="img/5.jpg" alt=""/></li>
<li><img src="img/6.jpg" alt=""/></li>
<li><img src="img/7.jpg" alt=""/></li>
</ul>
</div>
[id^="touch_slide_"] {
width: 380px;
margin-left: auto;
margin-right: auto;
overflow-x: hidden;
position: relative;
}
[id^="ul_touch_slide_"] {
float: left;
margin: 0;
padding: 0;
list-style: none;
display: flex;
}
#ul_touch_slide_recommend img{
width: 380px; height: 285px;
}