Add Carousel

How to Add an Image Carousel (Reference rittest.com)

1. Edit the Child Theme
2. Open header.php and enter the following code after the closing head tag

 <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.0/slick/slick.css"/>
<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.0/slick/slick-theme.css"/>

3. Open (create file if not in child theme) footer.php and enter the following code above the closing body tag:

<script type="text/javascript" src="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.0/slick/slick.min.js"></script>
<script>
    jQuery(document).ready( function($) {
        jQuery('.rit-partners').slick();
    });
</script>

4. Add the following CSS code to custom CSS

.rit-partners{
    width:100%;
}
.slick-slide{
    padding:15px 50px 15px 50px;
}
.slick-slide img{
    max-width:250px;
}

5. Add the following code to the page editor where you want to display the carousel (replace each ” with & quot; without spaces between the & and q):

<div class="rit-partners" data-slick="{"slidesToShow": 1, "slidesToScroll": 1, "centerMode": true, "mobileFirst": true, "autoplay":true, "variableWidth":true}">
<div><img src=""></div>
<div><img src=""></div>
<div><img src=""></div>
</div>

How To Change the Color of the Arrows

1. Add the following CSS code

.slick-prev:before {
  color: #3f618e!important;
}
.slick-next:before {
  color: #3f618e!important;
}

How To Adjust the Speed of the Carousel

1. Add the following code and adjust the numbers to speed up/slow down (replace each ” with & quot; without spaces between the & and q)

"autoplaySpeed":100,"speed":1500