Moodle News Slider is a jquery news slider that integrates the slick carousel jquery slider with some customisation.  It has been designed to work well on large and small screen devices.  It displays site announcements, course announcements for the current user, or both of these.   These are ordered by date.

Currently this plugin works only with the Adaptable theme, version 1.4 onwards.

The video below shows the News Slider plugin in use alongside two other plugins (Course Discuss and Discussion Feed):

Configuration

Each slider instance can be configured to display only site announcements, course announcements or both. There are also options for max length of subject and excerpt strings.  Full configuration options available are shown below.  When used on a course page, only that specific course's unread announcements will display.

General configuration

• Configurable max length of excerpt
• Configurable max length of subject
• Use caching plus cache expiry time

Per instance configuration

• Option to display site news or course news or both
• Maximum number of site announcements to display
• Maximum period (in days) to show site announcements for
  
• Link to older news items
• Show bullet (dots) navigation on bottom of slider
• Adjust the height of the slider (in px)
• Support for RTL languages, such as Hebrew & Arabic

Compatibility

• Moodle 3.7, 3.8 (Older version that supports from 3.2 to 3.6 also available, but it won't have latest updates)
• Adaptable version 1.4 onwards

Guidelines for use

You may want to experiment with the general configuration settings. E.g. for wider displays, you could increase max lengths of excerpts and vice-versa. 

    .slider-banner-col {
        background-color: #FF0000; /* Change banner background colour */
    }
    /* This is the text displayed inside the left banner */
    .slider-banner-col span {
        color: #ffe968;   /* Change text colour */
        font-size: 26px;  /* Change font size */
    }
    /* !important is required in this case to override it correctly */
    .news-slider .slick-dots li button:before {
        font-size: 18px !important;
        color: red !important;
        opacity: 1;  /* To make it a solid colour */
    }

    <script type="text/javascript"> 
    if (typeof $('.responsive').slick === "function") {
        $("#coursetabcontainer :radio").on("change", function() {
            $('.responsive').slick('setPosition');
        });
    $("#dashboardtabcontainer :radio").on("change", function() {
            $('.responsive').slick('setPosition');
        });
    }
    </script>