Доработка слай
Подскажите как сделать резиновую верстку
$(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; } |
слайдер для планшета
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>
|
Мне кажется неразумным писать отдельно для таучей и для мыши.
Есть же универсальные 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,
пост #3 строка 64 исправлена, смотреть пост #2 строка 53. |
Спасибо большое!!!
|
:) :write:
<!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)`;
}
window.addEventListener('resize', fluentslide_recommend)
});
</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>
|
рони,
Не работает с тоучем. Забыли 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)';
}
window.addEventListener('resize', function() {
var width = items[0].offsetWidth;
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,
height=700 добавьте после run через пробел |
|
а как еще вывести кол-во фотографии в галере? и на какой остановился чтобы номер отображался
|
| Часовой пояс GMT +3, время: 13:24. |