Tagged With "Carousel" | Hey Stack! -- The Official Crowdstack Community

Tagged With "Carousel"

Tips

Add an Image Carousel or Slider to Crowdstack

Rosemary O'Neill10/16/199:52 AM1 reply

❤️

How to add an image rotator to your home page banner. We will be using a package called Slick. Slick is fully compatible with Crowdstack, can be responsive, and has oodles of fun features, We will be doing a basic setup just to get it installed and working. First, download the files that you need. Go to the Slick website and click Get it now. Click download now and download the zip file to your desktop or downloads folder, whichever you usually use. Once it is downloaded, unzip the zip file.
Topic Reply

Re: Add an Image Carousel or Slider to Crowdstack

Mindy Atwood11/2/2212:38 PM

Hi! I've been trying to get the carousel running but it just comes up static. <!DOCTYPE html> <html> <head> <style> .pc-events { width: 40%; margin: auto; } .slick-next.slick-arrow::before {color: #000000; background-color: #cccccc; border-radius: 3px 3px 3px 3px ;} .slick-prev.slick-arrow::before {color: #000000; background-color: #cccccc; border-radius: 3px 3px 3px 3px ;} </style> <link rel="stylesheet" type="text/css"...

<div id="{%=id%}" class="reveal-modal small h-alert-modal-popup" data-reveal>
    <div class="first-modal-focus focus-utility-element" tabindex="0" aria-label="Inside Modal"></div>

<h4 id="{%=id%}_title" class="margin-bottom-10 popup-title"></h4>
    <div id="{%=id%}_body" class="margin-bottom-10 popup-body">
        </div>

<ul id="{%=id%}ButtonGroup" class="button-group h-popup-buttons even-button-group even-1">
    <li id="{%=id%}Okay_buttonContainer"><a id="{%=id%}Okay" href="javascript:void(0);" class="button success no-margin-bottom h-alert-modal-ok-button" role="button">OK</a><script type="text/javascript">
        (function() {
            function {%=id%}Okay_click(event, data) {
            {%=id%}Popup.hide();
        }
        
                $('#{%=id%}Okay').on('click', {%=id%}Okay_click);
        })();
    </script></li></ul><a href="javascript:void(0);" class="close-reveal-modal" aria-label="Close Modal">&#215;</a><div class="last-modal-focus focus-utility-element" tabindex="0"></div>
</div>
<script type="text/javascript">
        (function() {
            {%=id%}Popup = new SS.Popup.ModalPopup('{%=id%}');
        })();
    </script>