The Courses and Testimonials sliders in Emerson use the Slick Slider jQuery Library.


You can adjust the slider speed and whether the sliders autoplay, within the Slider Options in the Theme Customiser Settings.

To adjust any further settings, such as the number of slides displayed, and how many slides the slider moves by etc., you can edit the following file: wp-content/themes/emerson-by-divisoup/assets/js/custom-script.js


The Tesimonials Slider can be edited in this section of code:



//Testimonial Slider
jQuery(document).ready(function ($) {
    var $autoPlayEnabledTestimonials = ('true' == options_data.testimonials_slider_auto);
    // Check that these elements exist to avoid error
    if ($('.ds-testimonial-slider').length) {
        $('.ds-testimonial-slider').slick({
            slidesToShow: 1
            , slidesToScroll: 1
            , arrows: false
            , fade: true
            , asNavFor: '.ds-testimonial-nav'
        });
    }
    if ($('.ds-testimonial-nav').length) {
        $('.ds-testimonial-nav').slick({
            slidesToShow: 5
            , slidesToScroll: 1
            , asNavFor: '.ds-testimonial-slider'
            , dots: false
            , centerMode: true
            , centerPadding: 0
            , focusOnSelect: true
            , autoplay: $autoPlayEnabledTestimonials //Load in autoplay from theme options  
                
            , autoplaySpeed: options_data.testimonials_slider_timer //Load in slider timer from theme options
                
            , prevArrow: '<button type="button" class="ds-testimonial-nav-prev"></button>'
            , nextArrow: '<button type="button" class="ds-testimonial-nav-next"></button>'
            , responsive: [{
                breakpoint: 768
                , settings: {
                    slidesToShow: 3
                    , slidesToScroll: 1
                }
          }]
        });
    }
});



The Courses Slider can be edited in this section of code:



//Courses slider
jQuery(document).ready(function ($) {
    var $autoPlayEnabledCourses = ('true' == options_data.courses_slider_auto);
    // Check that these elements exist to avoid error
    if ($('.ds-courses-slider').length) {
        $('.ds-courses-slider').slick({
            infinite: true
            , speed: 700
            , slidesToShow: 3
            , slidesToScroll: 3
            , autoplay: $autoPlayEnabledCourses
            , autoplaySpeed: options_data.courses_slider_timer // Load in slider timer from theme options              
                
            , prevArrow: '<button type="button" class="ds-courses-nav-prev"></button>'
            , nextArrow: '<button type="button" class="ds-courses-nav-next"></button>'
            , responsive: [{
                    breakpoint: 980
                    , settings: {
                        slidesToShow: 2
                        , slidesToScroll: 2
                    }
              }
              , {
                    breakpoint: 700
                    , settings: {
                        slidesToShow: 1
                        , slidesToScroll: 1
                    }
              }
          ]
        });
    }
});



The Members Recent Content Slider can be edited in this section of code: 



//Member content slider
jQuery(document).ready(function ($) {
    var $autoPlayEnabledRecent = ('true' == options_data.recent_slider_auto);
    // Check that these elements exist to avoid error
    if ($('.ds-recent-content').length) {
        $('.ds-recent-content').slick({
            infinite: true
            , speed: 700
            , slidesToShow: 3
            , slidesToScroll: 1
            , autoplay: $autoPlayEnabledRecent
            , autoplaySpeed: options_data.recent_slider_timer // Load in slider timer from theme options              
                
            , prevArrow: '<button type="button" class="ds-courses-nav-prev"></button>'
            , nextArrow: '<button type="button" class="ds-courses-nav-next"></button>'
            , responsive: [{
                    breakpoint: 980
                    , settings: {
                        slidesToShow: 2
                        , slidesToScroll: 1
                    }
              }
              , {
                    breakpoint: 700
                    , settings: {
                        slidesToShow: 1
                        , slidesToScroll: 1
                    }
              }
          ]
        });
    }
});



For instructions on these settings, and how to add extra settings, please visit the Slick Slider Documentation Page.


Next Article - Shortcodes >>