If you have numerous announcements that you want to display on the intranet, the Carousel - Strip template is a perfect option. Designed for text-only messages, the carousel - strip cycles, so announcements rotate on your page, allowing you to get the word out about important announcements. This is a great way to remind teams about deadlines, company events, volunteer opportunities, or any notice that needs attention.
Note: The Carousel - Strip template is not a built-in template and will need to be added with the following steps below.
<div class="axero-widget axero-widget-no-border"> {{#if ShowWidgetHeader}} <div class="axero-widget-header"> <h3>{{{WidgetTitle}}}</h3> </div> {{/if}} <div class="axero-widget-content axero-widget-content-padded axero-entity-formatted-content"> <div class="carousel-slider-strip" id="CarouselSliderStripContainer-{{WidgetID}}" style="height: 400px; min-height: 400px; pointer-events: auto;"> <div class="arrow-left" style="display: none; height: 212px; line-height: 202px;">‹</div> <div class="arrow-right" style="display: block; height: 212px; line-height: 202px;">›</div> <div class="carousel-slider" style="pointer-events: auto;"> {{#each Contents}} <div class="carousel-slider-item axero-widget"> <div class="axero-widget-content axero-widget-content-padded"> <ul class="x-post"> <li class="x-post-first clr"> <h3 class="x-post-first-title"> <a href="{{ContentURL}}" title="{{{Title}}}">{{{Title}}}</a> </h3> <div class="x-post-first-counts"> <ul class="inline"> <li><i class="{{EntityIconCssClass}}"></i>{{DateCreatedString}}</li> </ul> </div> <p class="desc">{{{Summary}}}</p> </li> </ul> </div> </div> {{/each}} </div> </div> </div> </div> <script> function set_frame_size() { var browser_width = $('#CarouselSliderStripContainer-{{WidgetID}}').width(); var calc_frame_width = 0; var calc_frame_height = 0; if (browser_width < 768) { calc_frame_width = ((browser_width - ((browser_width / 100) * 20)) / 2) - 17.5; calc_frame_height = (browser_width / 100) * 30; } else if (browser_width > 768 && browser_width < 1024) { calc_frame_width = ((browser_width - ((browser_width / 100) * 10)) / 3) - 18; calc_frame_height = (browser_width / 100) * 19; } else if (browser_width > 1024 && browser_width < 1440) { calc_frame_width = ((browser_width - ((browser_width / 100) * 10)) / 4) - 19; calc_frame_height = (browser_width / 100) * 15; } else if (browser_width > 1440) { calc_frame_width = ((browser_width - ((browser_width / 100) * 10)) / 5) - 20; calc_frame_height = (browser_width / 100) * 12.5; } // set Frame width and margin $(".carousel-slider-strip .carousel-slider .carousel-slider-item").css("width", calc_frame_width + "px"); $(".carousel-slider-strip .carousel-slider .carousel-slider-item").css("margin-right", "20px"); calc_frame_height = 400; // set Carousel height $(".carousel-slider-strip").css({ "height": calc_frame_height, "min-height": calc_frame_height }); // set Navigation Arrows Height var calc_height = (calc_frame_height - ((calc_frame_height / 100) * 20)) + 20; $(".carousel-slider-strip .arrow-left, .carousel-slider-strip .arrow-right").css({ "height": calc_height + "px", "line-height": calc_height - 10 + "px" }); } /* set Carousel width */ function set_carousel_width() { $(".carousel-slider-strip .carousel-slider").each(function() { // get Carousel Id var carousel_id = $(this).parent().attr("id"); // Total amount of Frames var frames_amount = $(".carousel-slider-strip#" + carousel_id + " .carousel-slider .carousel-slider-item").length; // get Frame width var frame_width = $(".carousel-slider-strip#" + carousel_id + " .carousel-slider .carousel-slider-item").width(); // calculate Carousel width + margin p/Frame var carousel_width = (frames_amount * frame_width) + (frames_amount * 20); //carousel_width = carousel_width + 400; // set Strip Carousel width $(".carousel-slider-strip#" + carousel_id + " .carousel-slider").css("width", carousel_width + "px"); }); } /* Frames out of view */ function sliderFrameOutOfView() { // Browser Window width var browser_width = $('#CarouselSliderStripContainer-{{WidgetID}}').width(); // Frame var frame = $(".carousel-slider-strip .carousel-slider .carousel-slider-item"); // Frame width var frame_width = frame.width(); // Frame offsets var frame_offset = 0; var frame_offset_x = 0; // each Frame frame.each(function() { frame_offset = $(this).offset(); frame_offset_x = frame_offset.left; // Frames out Right if (((frame_offset_x + frame_width) > (browser_width + $('#CarouselSliderStripContainer-{{WidgetID}}').offset().left)) || (frame_offset_x < 0)) { // out of view $(this).css("opacity", "0.5"); // disable pointer events $(this).css("pointer-events", "none"); } else { // restore opacity $(this).css("opacity", "1"); // enable pointer events $(this).css("pointer-events", "auto"); } }); } function getSliderOutOfViewFramesByID(carousel_id) { var frames_out = [0, 0]; var browser_width = $('#CarouselSliderStripContainer-{{WidgetID}}').width(); var frame = $(".carousel-slider-strip#" + carousel_id + " .carousel-slider .carousel-slider-item"); var frame_width = frame.width(); var frame_offset = 0; var frame_offset_x = 0; frame.each(function() { frame_offset = $(this).offset(); frame_offset_x = frame_offset.left; if ((frame_offset_x + frame_width) > (browser_width + $('#CarouselSliderStripContainer-{{WidgetID}}').offset().left)) { frames_out[0]++; } else if ((frame_offset_x) < 0) { frames_out[1]++; } }); return frames_out; } function mouseoverArrowBinder() { $(".carousel-slider-strip").mouseout(function() { // Hide arrows $(".carousel-slider-strip .arrow-right, .carousel-slider-strip .arrow-left").hide(); }); $(".carousel-slider-strip").mouseover(function() { var carousel_id = $(this).attr("id"); var frames_out = getSliderOutOfViewFramesByID(carousel_id); if (frames_out[0] > 0) { $(".carousel-slider-strip#" + carousel_id + " .arrow-right").show(); } if (frames_out[1] > 0) { $(".carousel-slider-strip#" + carousel_id + " .arrow-left").show(); } }); } mouseoverArrowBinder(); function sideNavigation(id, side) { $(".carousel-slider-strip, .carousel-slider-strip .carousel-slider, .carousel-slider-strip .carousel-slider .carousel-slider-item").css("pointer-events", "none"); var window_width = $('#CarouselSliderStripContainer-{{WidgetID}}').width(); var frame = $(".carousel-slider-strip#" + id + " .carousel-slider .carousel-slider-item"); var frames_out = getSliderOutOfViewFramesByID(id); var frame_width = frame.width(); var result = Math.floor(window_width / frame_width); var calc = 0; calc = (frame_width * result) + (result * 20); // Animation if (side == 0) { $(".carousel-slider-strip#" + id + " .carousel-slider").animate({ marginLeft: "-=" + calc + "px" }, 750, function() { $(".carousel-slider-strip, .carousel-slider-strip .carousel-slider, .carousel-slider-strip .carousel-slider .carousel-slider-item").css("pointer-events", "auto"); mouseoverArrowBinder(); sliderFrameOutOfView(); }); } else if (side == 1) { $(".carousel-slider-strip#" + id + " .carousel-slider").animate({ marginLeft: "+=" + calc + "px" }, 750, function() { $(".carousel-slider-strip, .carousel-slider-strip .carousel-slider, .carousel-slider-strip .carousel-slider .carousel-slider-item").css("pointer-events", "auto"); mouseoverArrowBinder(); sliderFrameOutOfView(); }); } } function navigation_arrows() { $(".carousel-slider-strip .arrow-left").click(function(e) { var id = $(this).parent().attr("id"); sideNavigation(id, 1); }); $(".carousel-slider-strip .arrow-right").click(function(e) { var id = $(this).parent().attr("id"); sideNavigation(id, 0); }); } navigation_arrows(); function carouselSliderStripInit() { set_frame_size(); set_carousel_width(); sliderFrameOutOfView(); } carouselSliderStripInit(); $(window).resize(function() { carouselSliderStripInit(); }); </script> <style> .carousel-slider-strip { display: inline-block; overflow: hidden; position: relative; width: 100%; } .carousel-slider-strip .carousel-slider { display: inline-block; height: 80%; padding: 0; position: relative; width: 100%; } .carousel-slider-strip .carousel-slider-item { display: inline-block; float: left; height: 100%; margin-right: 15px; } .carousel-slider-strip .carousel-slider-item:hover { transform: scale(1.02); } .carousel-slider-strip .arrow-left, .carousel-slider-strip .arrow-right { display: none; font-size: 100px; font-weight: 300; margin: 0; opacity: 0.8; padding: 0; position: absolute; text-align: center; z-index: 9999; } .carousel-slider-strip .arrow-left { float: left; left: 0; } .carousel-slider-strip .arrow-right { float: right; right: 0; } .carousel-slider-strip .arrow-left:hover, .carousel-slider-strip .arrow-right:hover { cursor: pointer; } .carousel-slider-strip .x-post { margin: 0; } .carousel-slider-strip .x-post li { list-style: none; } .carousel-slider-strip .x-post-first-title { -webkit-box-orient: vertical; -webkit-line-clamp: 3; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; } .carousel-slider-strip .x-post-first-title a { color: inherit; text-decoration: none; } .carousel-slider-strip .x-post-first-counts { margin: 5px 0 0; } .carousel-slider-strip .x-post-first-counts ul.inline { font-size: .85em; margin-bottom: 5px !important; margin-left: 0 !important; opacity: 0.5; } .carousel-slider-strip .x-post-first-counts ul.inline li { padding: 0 10px 0 0; } .carousel-slider-strip .x-post-first-counts ul.inline li i { margin-right: 5px; } .carousel-slider-strip .x-post-first .desc { -webkit-box-orient: vertical; -webkit-line-clamp: 4; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; } </style>
7. Click Save Template.
is requesting access to a wiki that you have locked: https://my.axerosolutions.com/spaces/5/communifire-documentation/wiki/view/87524/content-carousel-strip?locale=en-US%2525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252f1%2525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252f1%2525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252f1%2525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252525252f1
Your session has expired. You are being logged out.