TRI-283: edit chatterbox

templates/pages/p_mover_landing_page.html

@@ -264,6 +264,8 @@
         </div>
       {% endfor %}
     </div>
+    <div class="chatterbox__mbtns show__md"></div>
+
     <script type="text/javascript">
       $(document).ready(function () {
         function handlerVideos() {
@@ -271,12 +273,15 @@
           if (!vtns.length) return;
           vtns.off('click.load-lazy').on('click.load-lazy', (e) => {
             const vtn = e.target;
+            console.log('!!!!!!!', vtn,)
             vtn.nextElementSibling.querySelector('video');
+            vtn.closest('.slick-slide').classList.contains('slick-current') &&
             LazyLoad.load($(vtn).siblings().find('video')[0], {
               callback_loaded: (e) => callbackLoaded(e, vtn),
             });
           });
           const callbackLoaded = function (elm, vtn) {
+            {#vtn.closest('.slick-slide').classList.contains('slick-current')#}
             vtn.classList.add('hide');
             const imgWrap = elm.closest('.chatterbox__slide');
             imgWrap?.classList.add('loaded');
@@ -292,10 +297,26 @@
             slidesToShow: 3,
             infinite: false,
             initialSlide: 1,
+            responsive: [
+
+              {
+                breakpoint: 768,
+                settings: {
+                  {#slidesToShow: 1,#}
+                  {#slidesToScroll: 1,#}
+                  draggable: true,
+                  appendArrows: $('.chatterbox__mbtns'),
+                },
+              },
+            ],
           })
             .on('beforeChange', function (event, slick, currentSlide, nextSlide) {
+              console.log([slick.$slides[currentSlide].querySelector('video')])
               slick.$slides[currentSlide]?.querySelector('video')?.pause();
-              console.log('edge was hit', slick.$slides[currentSlide]);
+              slick.$slides[nextSlide]?.querySelector('video')?.pause();
+
+
+              console.log('edge was hit', nextSlide, currentSlide, slick.$slides[currentSlide]);
             });
         }