Javascript.RU

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

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


$(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;
}
Ответить с цитированием
  #2 (permalink)  
Старый 29.09.2020, 14:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,115

слайдер для планшета
Jackson92,
<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
<style type="text/css">
div.slide {
width: 70%;
margin: 0 auto;
overflow-x: hidden;
position: relative;
}
.slide ul{
margin: 0;
padding: 0;
list-style: none;
display: flex;
transition-duration: 1200ms;
transition-timing-function: cubic-bezier(.3,.58,0,1.12);
}
.slide ul li{
width: 100%;
}
.slide ul li img{
width: 100%; height:  auto;
}
  </style>
  <script>
document.addEventListener( "DOMContentLoaded" , function() {
   var div = document.querySelector(".slide");
   var ul = div.querySelector("ul");
   var items = ul.querySelectorAll("li");
   var length = items.length;
   var star_touch = 0;
   var distance = 0;
   var stop_touch = 0;
   var index = 0;
   ul.style.width = `${length * 100}%`;
   div.addEventListener("touchstart", function(e) {
     star_touch = e.touches[0].clientX;
     ul.style.transition = '0ms';
   });
   div.addEventListener('touchmove', function(e) {
     distance = stop_touch + star_touch - e.touches[0].clientX
     ul.style.transform = 'translateX(' + (-distance) + 'px)';
   });
   window.addEventListener('touchend', function(e) {
     fluentslide_recommend();
     stop_touch = distance;
   });
   var fluentslide_recommend = function() {
     var width = items[0].offsetWidth;
     index += distance > stop_touch ? 1 : distance < stop_touch ? -1 : 0;
     index = Math.max(0, Math.min(index, length - 1));
     distance = index * width;
     ul.style.transition = '';
     ul.style.transform = 'translateX(' + (-distance) + 'px)';
   }
 });
  </script>
</head>
<body>
<div class="slide">
  <ul>
      <li><img src="https://picsum.photos/700/400?1" alt=""/></li>
      <li><img src="https://picsum.photos/700/400?2" alt=""/></li>
      <li><img src="https://picsum.photos/700/400?3" alt=""/></li>
      <li><img src="https://picsum.photos/700/400?4" alt=""/></li>
      <li><img src="https://picsum.photos/700/400?5" alt=""/></li>
      <li><img src="https://picsum.photos/700/400?6" alt=""/></li>
      <li><img src="https://picsum.photos/700/400?7" alt=""/></li>
  </ul>
</div>
</body>
</html>

Последний раз редактировалось рони, 29.09.2020 в 15:12.
Ответить с цитированием
  #3 (permalink)  
Старый 29.09.2020, 15:40
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 636

Мне кажется неразумным писать отдельно для таучей и для мыши.
Есть же универсальные pointerEvent.
Для одного касания работает даже в ИЕ11

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
<style type="text/css">
div.slide {
width: 70%;
margin: 0 auto;
overflow-x: hidden;
position: relative;
touch-action: none;
}
.slide ul{
margin: 0;
padding: 0;
list-style: none;
display: flex;
transition-duration: 1200ms;
transition-timing-function: cubic-bezier(.3,.58,0,1.12);
}
.slide ul li{
width: 100%;
}
.slide ul li img{
width: 100%; height:  auto;
}
  </style>
  <script>
document.addEventListener( "DOMContentLoaded" , function() {
   var div = document.querySelector(".slide");
   var ul = div.querySelector("ul");
   var items = ul.querySelectorAll("li");
   var length = items.length;
   var star_touch = 0;
   var distance = 0;
   var stop_touch = 0;
   var index = 0;
   var pid = -1
   var down = false
   ul.style.width = `${length * 100}%`;
   div.addEventListener("pointerdown", function(e) {
	pid = e.pointerId
	down = true
	e.preventDefault()
     star_touch = e.clientX;
     ul.style.transition = '0ms';
   });
   div.addEventListener('pointermove', function(e) {
	if (down && pid == e.pointerId) {
     distance = stop_touch + star_touch - e.clientX
     ul.style.transform = 'translateX(' + (-distance) + 'px)';
    }
   });
   window.addEventListener('pointerup', function(e) {
	if (pid == e.pointerId) {
     fluentslide_recommend();
     stop_touch = distance;
     down = false
     }
   });
   var fluentslide_recommend = function() {
     var width = items[0].offsetWidth;
//     index += distance > stop_touch ? 1 : -1;
     index += distance > stop_touch ? 1 : distance < stop_touch ? -1 : 0;
     index = Math.max(0, Math.min(index, length - 1));
     distance = index * width;
     ul.style.transition = '';
     ul.style.transform = 'translateX(' + (-distance) + 'px)';
   }
 });
  </script>
</head>
<body>
<div class="slide">
  <ul>
      <li><img src="https://picsum.photos/700/400?1" alt=""/></li>
      <li><img src="https://picsum.photos/700/400?2" alt=""/></li>
      <li><img src="https://picsum.photos/700/400?3" alt=""/></li>
      <li><img src="https://picsum.photos/700/400?4" alt=""/></li>
      <li><img src="https://picsum.photos/700/400?5" alt=""/></li>
      <li><img src="https://picsum.photos/700/400?6" alt=""/></li>
      <li><img src="https://picsum.photos/700/400?7" alt=""/></li>
  </ul>
</div>
</body>
</html>

Последний раз редактировалось voraa, 29.09.2020 в 15:55.
Ответить с цитированием
  #4 (permalink)  
Старый 29.09.2020, 15:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,115

voraa,
пост #3 строка 64 исправлена, смотреть пост #2 строка 53.
Ответить с цитированием
  #5 (permalink)  
Старый 29.09.2020, 15:59
Новичок на форуме
Отправить личное сообщение для Jackson92 Посмотреть профиль Найти все сообщения от Jackson92
 
Регистрация: 29.09.2020
Сообщений: 4

Спасибо большое!!!
Ответить с цитированием
  #6 (permalink)  
Старый 29.09.2020, 19:09
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,115


<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
<style type="text/css">
div.slide {
width: 70%;
margin: 0 auto;
overflow-x: hidden;
position: relative;
}
.slide ul{
margin: 0;
padding: 0;
list-style: none;
display: flex;
transition-duration: 1200ms;
transition-timing-function: cubic-bezier(.3,.58,0,1.12);
}
.slide ul li{
width: 100%;
}
.slide ul li img{
width: 100%; height:  auto;
}
  </style>
  <script>
document.addEventListener( "DOMContentLoaded" , function() {
   var div = document.querySelector(".slide");
   var ul = div.querySelector("ul");
   var items = ul.querySelectorAll("li");
   var length = items.length;
   var star_touch = 0;
   var distance = 0;
   var stop_touch = 0;
   var index = 0;
   ul.style.width = `${length * 100}%`;
   div.addEventListener('pointerdown', function(e) {
     e.preventDefault();
     star_touch = e.clientX;
     ul.style.transition = '0ms';
   });
   div.addEventListener('pointermove', function(e) {
     if(!star_touch) return;
     distance = stop_touch + star_touch - e.clientX
     ul.style.transform = `translateX(${-distance}px)`;
   });
   window.addEventListener('pointerup', function(e) {
     if(!star_touch) return;
     star_touch = 0;
     fluentslide_recommend();
     stop_touch = distance;
   });
   var fluentslide_recommend = function() {
     var width = items[0].offsetWidth;
     index += distance > stop_touch ? 1 : distance < stop_touch ? -1 : 0;
     index = Math.max(0, Math.min(index, length - 1));
     distance = index * width;
     ul.style.transition = '';
     ul.style.transform = `translateX(${-distance}px)`;
   }
 });
  </script>
</head>
<body>
<div class="slide">
  <ul>
      <li><img src="https://picsum.photos/700/400?1" alt=""/></li>
      <li><img src="https://picsum.photos/700/400?2" alt=""/></li>
      <li><img src="https://picsum.photos/700/400?3" alt=""/></li>
      <li><img src="https://picsum.photos/700/400?4" alt=""/></li>
      <li><img src="https://picsum.photos/700/400?5" alt=""/></li>
      <li><img src="https://picsum.photos/700/400?6" alt=""/></li>
      <li><img src="https://picsum.photos/700/400?7" alt=""/></li>
  </ul>
</div>
</body>
</html>
Ответить с цитированием
  #7 (permalink)  
Старый 29.09.2020, 21:14
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 636

рони,
Не работает с тоучем.
Забыли
touch-action: none; (пост 3 стр 12)

Ну и при касании двумя (и больше) пальцами возникают всякие неоднозначные эффекты. (Пост 3 тоже этим немного грешит)
Так, что лучше проверять pointerId
(Хотя без down вполне можно обойтись)

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
<style type="text/css">
div.slide {
width: 70%;
margin: 0 auto;
overflow-x: hidden;
position: relative;
touch-action: none;
}
.slide ul{
margin: 0;
padding: 0;
list-style: none;
display: flex;
transition-duration: 1200ms;
transition-timing-function: cubic-bezier(.3,.58,0,1.12);
}
.slide ul li{
width: 100%;
}
.slide ul li img{
width: 100%; height:  auto;
}
  </style>
  <script>
document.addEventListener( "DOMContentLoaded" , function() {
   var div = document.querySelector(".slide");
   var ul = div.querySelector("ul");
   var items = ul.querySelectorAll("li");
   var length = items.length;
   var star_touch = 0;
   var distance = 0;
   var stop_touch = 0;
   var index = 0;
   var pid;  
   ul.style.width = `${length * 100}%`;
   div.addEventListener("pointerdown", function(e) {
	if (pid === undefined) pid = e.pointerId
	down = true
	e.preventDefault()
     star_touch = e.clientX;
     ul.style.transition = '0ms';
   });
   div.addEventListener('pointermove', function(e) {
	if (pid == e.pointerId) {
     distance = stop_touch + star_touch - e.clientX
     ul.style.transform = 'translateX(' + (-distance) + 'px)';
    }
   });
   window.addEventListener('pointerup', function(e) {
	if (pid == e.pointerId) {
     fluentslide_recommend();
     stop_touch = distance;
     pid = undefined
     }
   });
   var fluentslide_recommend = function() {
     var width = items[0].offsetWidth;
     index += distance > stop_touch ? 1 : -1;
     index = Math.max(0, Math.min(index, length - 1));
     distance = index * width;
     ul.style.transition = '';
     ul.style.transform = 'translateX(' + (-distance) + 'px)';
   }
 });
  </script>
</head>
<body>
<div class="slide">
  <ul>
      <li><img src="https://picsum.photos/700/400?1" alt=""/></li>
      <li><img src="https://picsum.photos/700/400?2" alt=""/></li>
      <li><img src="https://picsum.photos/700/400?3" alt=""/></li>
      <li><img src="https://picsum.photos/700/400?4" alt=""/></li>
      <li><img src="https://picsum.photos/700/400?5" alt=""/></li>
      <li><img src="https://picsum.photos/700/400?6" alt=""/></li>
      <li><img src="https://picsum.photos/700/400?7" alt=""/></li>
  </ul>
</div>
</body>
</html>

Последний раз редактировалось voraa, 30.09.2020 в 15:05.
Ответить с цитированием
  #8 (permalink)  
Старый 29.09.2020, 21:57
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,115

voraa,
height=700 добавьте после run через пробел
Ответить с цитированием
  #9 (permalink)  
Старый 29.09.2020, 22:10
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,115

Malleys Touch Slider

https://javascript.ru/forum/jquery/7...tml#post508603
Ответить с цитированием
  #10 (permalink)  
Старый 03.10.2020, 13:07
Новичок на форуме
Отправить личное сообщение для Jackson92 Посмотреть профиль Найти все сообщения от Jackson92
 
Регистрация: 29.09.2020
Сообщений: 4

а как еще вывести кол-во фотографии в галере? и на какой остановился чтобы номер отображался
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Доработка и сотрудничество !! SurferDude Работа 0 18.06.2015 23:04
Доработка скрипта Alexsher Работа 2 16.08.2014 00:26
Доработка скрипта за плату sali007 jQuery 5 05.04.2013 08:27
Доработка скрипта formus Работа 2 06.07.2011 09:08
Доработка Mootools Slideshow Jumong Работа 1 23.05.2010 01:03