sysadminix/tripwithbonus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/dev' into dev

Browse Source
This commit is contained in:
SDE
2024-11-15 13:55:04 +03:00
parent c23dd1ff4c 67d9528614
commit 43153a9fdf
5 changed files with 197 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

153
templates/pages/p_mover_landing_page.html
View File

@@ -5,8 +5,9 @@
{% block meta %}
<link rel="stylesheet" href="{% static "css/moover.css" %}">
<link rel="stylesheet" href="{% static "css/slick.css" %}">
{# <link rel="stylesheet" href="{% static "css/slick-theme.css" %}">#}
{# <link rel="stylesheet" href="{% static "css/slick-theme.css" %}">#}
<script src="{% static "js/slick.min.js" %}"></script>
<script src="{% static "js/push/lazyload.min.js" %}"></script>
{% endblock %}
{#{% block before_close %}#}
{# <script src="{% static "js/slick.min.js" %}"></script>#}
@@ -132,85 +133,123 @@
<section class="chatterbox">
<div class="title">{% translate "Что о нас говорят люди" %}</div>
<div class="chatterbox__slider slick-slider">
<div class="slick-slide">
<div class="chatterbox__slide">
<div class="chatterbox__vicon"></div>
<video src="https://example.com/hexlet.mp4"></video>
<div class="chatterbox__vbtn"></div>
<div class="chatterbox__wrap">
<div class="chatterbox__vbox">
<video controls data-src="/media/uploads/1.mp4" autoplay></video>
</div>
</div>
</div>
</div>
<div class="slick-slide">
<div class="chatterbox__slide">
<div class="chatterbox__vbtn"></div>
<div class="chatterbox__vbox">
<video controls data-src="/media/uploads/2.mp4" autoplay></video>
</div>
</div>
</div>
<div class="slick-slide">
<div class="chatterbox__slide">
<div class="chatterbox__vicon"></div>
<video src="https://example.com/hexlet.mp4"></video>
<div class="chatterbox__vbtn"></div>
<div class="chatterbox__wrap">
<div class="chatterbox__vbox">
<video controls data-src="/media/uploads/3.mp4" autoplay>
</video>
</div>
</div>
</div>
</div>
<div class="slick-slide">
<div class="chatterbox__slide">
<div class="chatterbox__vicon"></div>
<video src="https://example.com/hexlet.mp4"></video>
<div class="chatterbox__vbtn"></div>
<div class="chatterbox__wrap">
<div class="chatterbox__vbox">
<video controls data-src="/media/uploads/4.mp4" autoplay>
</video>
</div>
</div>
</div>
</div>
<div class="slick-slide">
<div class="chatterbox__slide">
<div class="chatterbox__vicon"></div>
<div class="chatterbox__vbtn"></div>
<div class="chatterbox__wrap">
<div class="chatterbox__vbox">
<video controls data-src="/media/uploads/5.mp4" autoplay>
</video>
</div>
</div>
</div>
</div>
<div class="slick-slide">
<div class="chatterbox__slide">
<div class="chatterbox__vicon"></div>
</div>
</div>
<div class="slick-slide">
<div class="chatterbox__slide">
<div class="chatterbox__vicon"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('.slick-slider').slick({
centerMode: true,
{#centerPadding: '160px',#}
slidesToShow: 3,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
console.log('run');
function handlerVideos() {
const vtns = $('.chatterbox__vbtn');
if (!vtns.length) return;
vtns.off('click.load-lazy').on('click.load-lazy', (e) => {
const vtn = e.target;
vtn.nextElementSibling.querySelector('video');
window.d = vtn;
console.log($(vtn).siblings().find('video')[0]);
console.log(vtn, e.target)
LazyLoad.load($(vtn).siblings().find('video')[0], {
callback_loaded: (e) => callbackLoaded(e, vtn),
});
});
const callbackLoaded = function (elm, vtn) {
vtn.classList.add('hide');
const imgWrap = elm.closest('.chatterbox__slide');
imgWrap?.classList.add('loaded');
};
}
handlerVideos();
$('.slick-slider')
.slick({
centerMode: true,
{#centerPadding: '160px',#}
slidesToShow: 3,
lazyLoad: 'ondemand',
{#lazyLoad: 'progressive',#}
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});
]
})
.on('beforeChange', function (event, slick, currentSlide, nextSlide) {
slick.$slides[currentSlide]?.querySelector('video')?.pause();
console.log('edge was hit', slick.$slides[currentSlide]);
});
});
</script>
</section>