2 Replies Latest reply on Feb 18, 2014 1:29 AM by natDesign

    Multi-image slideshow loop

    natDesign

      Hi guys,

       

      I have been searching for hours about this but cannot find it anywhere, which either means it is not possible, or it's very hard to do.

       

      Essentially, i have a slideshow that has 6 - 7 images within in with only 4 showing at one time. There is also a left and right navigation. When the left navigation is clicked, each of the images moves over one space to the left, hiding the very first image to the left, and revealing another image from the right (and vice versa for the right navigation). I want this to loop continuosely and seemlessly but I cannot seem to find a solution anywhere.

       

      The example I can give is the basic carousel from WooThemes but in a continuos form:

       

      http://flexslider.woothemes.com/basic-carousel.html

       

      Can anyone give me insight in to how to do this?

       

      Thanks!

        • 1. Re: Multi-image slideshow loop
          resdesign Adobe Community Professional & MVP

          You can actually use that plugin in Animate.

          USe the script loading in Version 3 or yepnope in preview version of animate to load it.

          Then use the code as explained in compositionReady - use a container and give it the class name: .flexslider

          classe.png 12-3-2012 1-51-15 PM.png

          Select the container in elements panel on the right and add the class name (flexslider) from the class panel on the left.

          Note the class name below has a dot before the name (important).

            sym.$('.flexslider').flexslider({

              animation: "slide",

              animationLoop: false,

              itemWidth: 210,

              itemMargin: 5

            });

           

           

           

          Ready the other instructions on the site to add the images.

          1 person found this helpful
          • 2. Re: Multi-image slideshow loop
            natDesign Level 1

            Hi Resdesign, thank you for your fast reply!

             

            Ok, So i've used Yepnope.js in the compositionReady pane like this:

             

            yepnope(

            {

            nope:[

            'js/jquery.flexslider-min.js',

            ],

            complete: init

            }

            );

            //when yepnope has loaded everything execute init();

            function init (){

            //initialise your variables and Edge comp here

            }

             

            - my yepnope.js file is in the same directory as the jquery.flexslider-min.js in a folder named 'js'.

             

            I create a container and assigned it a class name/ symbol name of .flexslider however it automatically changes to _flexslider. Does this matter?

             

            Also, I am unsure where to put:

             

              sym.$('.flexslider').flexslider({

                animation: "slide",

                animationLoop: false,

                itemWidth: 210,

                itemMargin: 5

              });

             

            Currently it is within the 'click' function of the _flexslider symbol but none of this seems to be working. Do I need to include the .css files within the HTML file that is published from Edge?

             

            Thanks!