Loading ...

Content Carousel Strip | Axero Documentation

Home » axero documentation » Wiki » Documentation » Control Panel » System » Page Builder » Page Builder Extras » Content Carousel Strip
Axero Documentation  Wiki
Public Space
Activity Stream Content
Version 5

Content Carousel Strip

0 
 /5
0 (0votes)

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.

Create Page Builder Widget Templates :

 

  1. Click the  gear icon > Control Panel > System > Page Builder Templates.
  2. Click Add a new template.

  3. Enter Carousel - Strip as the Template Name.
  4. Select Content List as the Widget Type.
  5. Select Content List as the Widget Sub Type.
  6. Copy and Paste the code below in the new template:
+ EXPAND FOR CODE
<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.

 

Add Widget to Page Builder Page:

 

  1. Add a Content List Widget on a Page Builder page
  2. Edit the widget
  3. Select the Carousel - Strip template in the Template tab
  4. Click “Save Widget”. Now you can display multiple pieces of content in an engaging way with your Carousel - Strip template!

Wiki Index

Pages