Custom Code in Rise – Early Access Group!

The best thing about Custom Code block is being able to leverage existing javascript libraries. This is a carousel script that I use frequently and glad that it can be easily added in the Custom Code block. Note: I don't recommend creating external dependencies (links to other internet files) in a Rise course, but if you want to get started using Slick.js quickly here is the code I'm using:

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
				
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
				
<style>
  body {text-align:center}
  .logos {padding:10px; margin:0px auto;}
  .logos > * {padding:20px}
  .slick-slide img {display:block; 
  margin:0px auto}
  
  .slick-track {
        display: flex !important;  
        align-items: center;   
    }

  .slick-slide {
        display: flex !important;  
        height: inherit !important;  
        align-items: center; 
        justify-content: center; }
</style>
				
<div class="logos">
  
<div>
<img  src="https://theme-360.com/wp-content/uploads/2025/09/theme360-logo-2025.png" width="250"/>
</div>
  
<div>
<img width="180" src="https://upload.wikimedia.org/wikipedia/commons/e/e2/ElevenLabs_logo_%282022-2024%29.png" />
</div>
  
<div>
<img width="130" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/500px-HTML5_logo_and_wordmark.svg.png" />
</div>
  
<div>
<img width="220" src="https://www.articulate.com/wp-content/uploads/2023/06/articulate-logo.svg">
</div>
  
<div>
  <img width="250" src="https://images.icon-icons.com/2699/PNG/512/reactjs_logo_icon_170805.png">
</div>
  
</div>
<script>
$(document).ready(function(){
  $('.logos').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  arrows: false,
  fade: false,
  autoplay: true,
  dots:false,
  autoplaySpeed: 2000,
  infinite: true,
  responsive: [
    {
      breakpoint: 900,
      settings: {
        slidesToShow: 1
      }
    }]
});
});
</script>