I wanted to make it so that you could add new brands and upload videos through cms without entering the layout itself. To do this, I created 2 collections and combined them with a code, that is, videos that have the brand name in the settings are immediately pulled into the appropriate group. But: they do not pull up the lightbox - this is what makes it possible to open the video view limited to one brand.
To merge the two collections, I used this code:
<style>
.tr-item {display: inline-block;}
.tr-contain{display:block !important;}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
outline: none;
}
.slick-slide, .slick-slide *{ outline: none !important; }
</style>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script>
// when document is fully loaded
$( document ).ready(function() {
$('.tr-contain').slick({
dots: false,
speed: 1000,
infinite: false,
slidesToShow: 6,
slidesToScroll: 1,
arrows: false,
touchThreshold:300,
responsive: [
{
// tablet
breakpoint: 991,
settings: {
slidesToShow: 2
}
},
{
// mobile portrait
breakpoint: 479,
settings: {
slidesToShow: 1
}
}
]
});
$('.slider-prev').click(function(){
$(this).closest('.swiper').find(".tr-contain").slick('slickPrev');
});
$('.slider-next').click(function(){
$(this).closest('.swiper').find(".tr-contain").slick('slickNext');
});
});
</script>
Can someone help me either update this code or give me some advice on how to make the videos group into lightbox groups by category?
P.S. I used the embedded code to display the video, because I need the video to play on the hover.
Thank you in advance!
Here is my site:
http:// Social Media Content