Slick Slider with Video

A Base fiddle for use in the issue section of github https://github.com/kenwheeler/slick/issues

by _kdts

HTML

<script src="//vjs.zencdn.net/4.9.0/video.js"></script>
<link rel="stylesheet" href="//vjs.zencdn.net/4.9.0/video-js.css">
<script src="//pupunzi.com/mb.components/mb.YTPlayer/demo/inc/jquery.mb.YTPlayer.js"></script>
<script src="//cdn.jsdelivr.net/jquery.slick/1.4.1/slick.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.4.1/slick.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.4.1/slick-theme.css">
<div class="translate">
  <ul class="language">
     <li class="eng translate" id="en-gb">EN</li>
     <li class="pl translate" id="pl-pl">PL</li>
 </ul>
</div>

<div class="rss-feed">
   <p class="lang" key="valentine">Do Walentynek zostało już tylko
   </p>
   <span id="mybenfit-timer" class="lang" key="days">
   </span>
</div>





<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

CSS

.language{

  display: flex;
  justify-content: center;
  align-items: center;

}
.language li{
  
    border-width: 1px;
    border-color: rgb(241, 107, 108);
    border-style: solid;
    width: 433px;
    height: 58px;
    margin: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.rss-feed {
      display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12.5px;
    font-weight: bold;
    color: blue;
}

JavaScript

// translation

 // The default language is English
  var lang = "pl-pl";
  // Check for localStorage support
  if('localStorage' in window){
  
     var usrLang = localStorage.getItem('uiLang');
     if(usrLang) {
         lang = usrLang
     }
  
  }

        
  var arrLang = {
    "pl-pl": {
      "Valentine": "Do Walentynek zostało już tylko",
      },
         "en-gb": {
      "valentine": "Remaining days to Valentines!",
      }
    }
    
	console.log(lang)
        
       $(document).ready(function() {
            $(".lang").each(function(index, element) {
              $(this).text(arrLang[lang][$(this).attr("key")]);
            });
            
            $(".lang").each(function(index, element) {
              $(this).text(arrLang[lang][$(this).attr("key")]);
            });
        
          // get/set the selected language
          $(".translate").click(function() {
            var lang = $(this).attr("id");
  
            // update localStorage key
            if('localStorage' in window){
                 localStorage.setItem('uiLang', lang);
            }
  
            $(".lang").each(function(index, element) {
              $(this).text(arrLang[lang][$(this).attr("key")]);
            });
        });
      });