TRI-283: добавил и настроил видео
This commit is contained in:
@@ -1,13 +1,10 @@
|
||||
.chatterbox {
|
||||
|
||||
}
|
||||
.chatterbox {}
|
||||
|
||||
.chatterbox .title {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.chatterbox__slider {
|
||||
/*max-width: 977px;*/
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
@@ -16,70 +13,6 @@
|
||||
/*padding: 50px;*/
|
||||
}
|
||||
|
||||
|
||||
.chatterbox__slide {
|
||||
width: 335px;
|
||||
height: 615px;
|
||||
background: url("/static/img/webp/phone-border.webp") center no-repeat;
|
||||
transition: scale 0.2s ease-in-out;
|
||||
margin: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.slick-slide:not(.slick-center) .chatterbox__slide {
|
||||
scale: 0.72;
|
||||
}
|
||||
|
||||
.slick-center .chatterbox__vicon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
.chatterbox__vicon {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.chatterbox__vicon::before {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--color-primary);
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
transition: opacity 100ms linear;
|
||||
|
||||
}
|
||||
|
||||
.chatterbox__vicon::before {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.chatterbox__vicon::before, .chatterbox__vicon::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.chatterbox__vicon::after {
|
||||
border-color: transparent transparent transparent #ffffff;
|
||||
border-style: solid;
|
||||
border-width: 15px 0 15px 25px;
|
||||
display: inline-block;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.chatterbox .slick-next {
|
||||
right: -40px;
|
||||
}
|
||||
@@ -88,3 +21,97 @@
|
||||
left: -40px;
|
||||
}
|
||||
|
||||
.chatterbox__slide {
|
||||
width: 335px;
|
||||
height: 615px;
|
||||
background: url("/static/img/webp/phone-border.webp") center no-repeat;
|
||||
transition: scale 0.2s ease-in-out;
|
||||
margin: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.chatterbox__wrap {
|
||||
position: absolute;
|
||||
/* z-index: -1; */
|
||||
left: 8px;
|
||||
right: 8px;
|
||||
top: 8px;
|
||||
bottom: 8px;
|
||||
border-radius: 25px;
|
||||
background-color: grey;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.slick-slide:not(.slick-center) .chatterbox__slide {
|
||||
scale: 0.72;
|
||||
}
|
||||
|
||||
.slick-center .chatterbox__vbtn {
|
||||
opacity: 1;
|
||||
pointer-events: initial;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.chatterbox__vbtn {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.loaded .chatterbox__vbtn {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.chatterbox__vbtn::before {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--color-primary);
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
transition: opacity 100ms linear;
|
||||
}
|
||||
|
||||
.chatterbox__vbtn::before {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.chatterbox__vbtn::before, .chatterbox__vbtn::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.chatterbox__vbtn::after {
|
||||
border-color: transparent transparent transparent #ffffff;
|
||||
border-style: solid;
|
||||
border-width: 15px 0 15px 25px;
|
||||
display: inline-block;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.chatterbox__vbox {
|
||||
position: relative;
|
||||
/*z-index: -1;*/
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: calc(100% - 16px);
|
||||
}
|
||||
|
||||
.chatterbox video {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
|
||||
@@ -100,3 +100,7 @@ p {
|
||||
.subtitle {
|
||||
margin-bottom: 81px;
|
||||
}
|
||||
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
1
static/js/lazyload.min.js
vendored
Normal file
1
static/js/lazyload.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
static/js/push/lazyload.min.js
vendored
Normal file
1
static/js/push/lazyload.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@@ -7,6 +7,7 @@
|
||||
<link rel="stylesheet" href="{% static "css/slick.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,64 +133,97 @@
|
||||
<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({
|
||||
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,
|
||||
@@ -210,7 +244,12 @@
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
.on('beforeChange', function (event, slick, currentSlide, nextSlide) {
|
||||
slick.$slides[currentSlide]?.querySelector('video')?.pause();
|
||||
console.log('edge was hit', slick.$slides[currentSlide]);
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user