4 Replies Latest reply on Oct 10, 2017 1:16 PM by lefogh

    How do I make a jQuery slider work with a BC web app and Muse?

    charlottev80428000

      Hello,

       

      I am looking for a way to make a jQuery slider work with a Business Catalyst web app and Muse (responsive). It is really hard find any documentation about this subject.

       

      Hope that anybody here can help.

       

      Thanks

        • 1. Re: How do I make a jQuery slider work with a BC web app and Muse?
          TheBCMan Adobe Community Professional

          Your question is very broad. More than likely if the jquery slider is not already responsive it would need to be. The temple or web page you are using would have to be customized to support however the slider renders or vise versa.

          • 2. Re: How do I make a jQuery slider work with a BC web app and Muse?
            charlottev80428000 Level 1

            Hello BCMan, Thank you for your reply. The jquery slider is already responsive. I think that the problem lies in retrieving the right tag to add in Muse. I've been trying a few things in my test-webste hero . The html code and the tag  (which I took from the BC placeholders) `i used and which I placed into my Muse file (in a html container) is:

             

            <div id="slideshow" class="hero">

                {module_webapps,31824,a}

            </div>

             

            It does render the images, but not in a hero slideshow.

            I've also tried {module_webapps}, but that didn't help.

             

            I've also added the following code into the Muse page (via a jQuery injector)

            $ (function() {

                //hero slideshow

                $ ("#slideshow") .hero({

                    textSpeed: 1000,

                    imageSpeed: 2000,

                    pause: 6000,

                    paging:true,

                    titles:false,

                    prevAndNext:false,

                    divider:false

                });

            });

             

             

            And in the page properties>header of the muse page I know should add some code, but there I get stuck. From another tutorial I figured out it schould be something like:

            <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
            /<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>

            (but then for my hero, not the slick slider).

             

            As a designer not a developer I wouldn't know how to create this code.

             

            Also, I am not sure whether the tag {module_webapps,,} is right.

             

            Does this make sense...

            • 3. Re: How do I make a jQuery slider work with a BC web app and Muse?
              TheBCMan Adobe Community Professional

              If you take a look at the console you can see the error messages.

               

              In your HTML change

               

                      <script>

              https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js

              </script>

               

              To:

               

              <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

               

              Then see what errors we get after that if any

              • 4. Re: How do I make a jQuery slider work with a BC web app and Muse?
                lefogh

                Im trying to make the slider using slick but I get this error in the console "TypeError: $(...).slick is not a function"

                This is my page.

                 

                <html>

                  <head>

                   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

                  <title>My Now Amazing Webpage</title>

                  <link rel="stylesheet" type="text/css" href="slick/slick.css" />

                  <link rel="stylesheet" type="text/css" href="slick/slick-theme.css" />

                  </head>

                  <body>

                 

                  <div class="your-class">

                    <div>your content</div>

                    <div>your content</div>

                    <div>your content</div>

                  </div>

                 

                  <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>

                  <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

                  <script type="text/javascript" src="slick/slick.min.js"></script>

                 

                  <script type="text/javascript">

                    $(document).ready(function(){

                      $('.your-class').slick({

                      

                      });

                    });

                  </script>

                 

                  </body>

                </html>