Показать сообщение отдельно
  #1 (permalink)  
Старый 29.09.2020, 09:35
Новичок на форуме
Отправить личное сообщение для Jackson92 Посмотреть профиль Найти все сообщения от Jackson92
 
Регистрация: 29.09.2020
Сообщений: 7

Доработка слай
Подскажите как сделать резиновую верстку


$(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;
}
Ответить с цитированием