4

I am trying to get the cycle2 carousel working with text overlays in wordpress. The images are just being displayed vertically. I can only get the basic cycle2 demo to work and not the carousel. Here is my code:

    <div class="cycle-slideshow" 
        data-cycle-fx="carousel"
        data-cycle-timeout="0"
        data-cycle-next="#next4"
        data-cycle-prev="#prev4"
        data-cycle-carousel-visible="5"
        data-allow-wrap="false"
    data-cycle-slides="> a"
      >
    <div class="cycle-overlay"></div>
        <a href="http://google.com" data-cycle-title="first" data-cycle-  desc="first description"><img src="http://malsup.github.io/images/beach1.jpg"></a>
        <a href="http://google.com" data-cycle-title="two" data-cycle-desc="second description"><img src="http://malsup.github.io/images/beach2.jpg"></a>
        <a href="http://google.com" data-cycle-title="three" data-cycle-desc="third description"><img src="http://malsup.github.io/images/beach3.jpg"></a>
        <a href="http://google.com" data-cycle-title="four" data-cycle-desc="fourth description"><img src="http://malsup.github.io/images/beach4.jpg"></a>
       <a href="http://google.com" data-cycle-title="five" data-cycle-desc="fifth description"><img src="http://malsup.github.io/images/beach5.jpg"></a>
       <a href="http://google.com" data-cycle-title="six" data-cycle-desc="sixth description"><img src="http://malsup.github.io/images/beach6.jpg"></a>
       <a href="http://google.com" data-cycle-title="seven" data-cycle-desc="seventh description"><img src="http://malsup.github.io/images/beach7.jpg"></a>
       <a href="http://google.com" data-cycle-title="eight" data-cycle-desc="eight description"><img src="http://malsup.github.io/images/beach8.jpg"></a>
       <a href="http://google.com" data-cycle-title="nine" data-cycle-desc="ninth description"><img src="http://malsup.github.io/images/beach9.jpg"></a>
</div>

 <div class=center>
    <a href=# id=prev4><< Prev </a>
    <a href=# id=next4> Next >> </a>
 </div>


/* overlay */
.cycle-overlay { 
        position: absolute;
    bottom: 0;
    width: 150px;
    max-width: 800px;
    z-index: 600;
        background: black;
    color: white;
  }


  function my_scripts_method1() {
      wp_register_script('my-script1', get_stylesheet_directory() . '/js/jquery.cycle2.min.js',array('jquery'));
   if ( is_page('home') ){   
    wp_enqueue_script('my-script1');
}
 }
 function my_scripts_method2() {
 wp_register_script('custom-script', get_stylesheet_directory() . '/js/jquery.cycle2.carousel.min.js',array('jquery'));

    if ( is_page('home') ){ 
    wp_enqueue_script('custom-script');
}
  }

  if ( !is_admin() ) {
    add_action('wp_enqueue_scripts','my_scripts_method1');
    add_action('wp_enqueue_scripts','my_scripts_method2');
}
Margaret Ames
  • 51
  • 1
  • 5

2 Answers2

0

If your basic slideshow is working but not the carousel, you must be missing the Cycle2 Carousel plugin which is required for your desired functionality. Find it on Cycle2 Download page

http://malsup.github.io/min/jquery.cycle2.carousel.min.js

EDIT

The correct way to enqueue scripts is to take care of dependencies in the wp_enqueue_script() parameters.

You can directly enqueue all scripts using a single action and without the need of registering the scripts separately. The following simplified code will solve your problem by including the script dependencies at the right time.

function my_scripts_method() {
    $template_dir = get_template_directory_uri();
    if ( is_page('home') ){
        wp_enqueue_script( 'cycle2', $template_dir . '/js/jquery.cycle2.min.js',array( 'jquery' ) );
        wp_enqueue_script( 'cycle2-carousel', $template_dir . '/js/jquery.cycle2.carousel.min.js', array( 'jquery', 'cycle2' ) );
    }
}

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

To verify that both the scripts are being enqueued you can check the html source code of the rendered page.

Faaz Iqbal
  • 11
  • 2
  • Hi, I am including both jquery.cycle2.carousel.min.js and jquery.cycle2.min.js. – Margaret Ames Jul 05 '15 at 23:20
  • I am using wordpress so I have to enqueue the scripts: – Margaret Ames Jul 05 '15 at 23:22
  • See my original post that I edited to include enqueueing the scripts. I know that the first enqueue works because the basic example is working. – Margaret Ames Jul 05 '15 at 23:29
  • Thank you Faaz. I updated my functions.php file with the edit you suggested but it still doesn't work. I did a view source and the cycle code did not display. I am using a child-theme so I edited the chile-theme funtions.php file with the enqueue scripts. Is there something else I am missing since this is a child theme? – Margaret Ames Jul 06 '15 at 01:19
  • Since it's a child theme you would have to use get_stylesheet_directory_uri() instead of get_template_directory_uri(). Additionally, remove the "if ( is_page('home') )" condition, unless you intended to add the scripts only to the page template "home". If you intended to add scripts only to the website home page, use "if ( is_front_page() )" instead. – Faaz Iqbal Jul 06 '15 at 02:17
  • Thanks for your assistance! Made the changes you suggested. Still doesn't work. Do I need to be doing something to the jquery libraries downloaded to make sure they are conflict free? – Margaret Ames Jul 06 '15 at 02:44
  • First of all you need to ensure that cycle2 and cycle2 carousel plugins are showing in your html source code. Only then you should proceed for further debugging. – Faaz Iqbal Jul 06 '15 at 13:00
  • Any other suggestions to get the plugins to load? Do I need to load – Margaret Ames Jul 06 '15 at 14:16
  • You need to 1) check that the path to Cycle2 plugin files is correct and it's not giving 404 error. 2) Check for errors in console. – Faaz Iqbal Jul 06 '15 at 19:39
  • Looks like jquery.cycle2.min.js is being loaded but not jquery.cycle2.carousel.min.js :(. I've looked over the wordpress codex for enqueueing scripts with dependencies in child themes. The code looks right. At a loss of what to do. – Margaret Ames Jul 06 '15 at 19:42
  • There isn't a need to explicitly enqueue jQuery library since you added it in the dependency array. if you see "$ is not defined" error in console you will need to check [this link] (https://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_Wrappers) – Faaz Iqbal Jul 06 '15 at 19:45
  • The only thing related to cycle2 in my console (I'm using IE 11) was this: [cycle2] --c2 init--. No 404 errors. triple checked path to plugins. No $ is not defined. – Margaret Ames Jul 06 '15 at 20:17
  • Can I buy you lunch for all of your help? : ). – Margaret Ames Jul 06 '15 at 20:22
  • Thank you very much :). I'd be glad if the problem is solved. It's a good practice to combine multiple JS plugins into one file because it sends lesser no. of network requests. So one solution is to paste the carousel plugin code into Cycle2 core JS file instead of enqueuing it separately. – Faaz Iqbal Jul 06 '15 at 20:37
  • I appended the carousel code to the end of the cycle2 code and modified the enqueue scripts to load only the jquery.cycle2.min.js file with jquery as the depency. It didn't work and there's nothing in the console. – Margaret Ames Jul 06 '15 at 21:19
  • function my_scripts_method() { $template_dir = get_stylesheet_directory_uri(); wp_register_script( 'cycle2', $template_dir . '/js/jquery.cycle2.min.js',array( 'jquery' )); if ( is_front_page() ){ wp_enqueue_script('cycle2'); } } add_action( 'wp_enqueue_scripts', 'my_scripts_method'); – Margaret Ames Jul 06 '15 at 21:19
  • I reverted back. I added wp_register_script('cycle2', $template_dir . '/js/jquery.cycle2.min.js',array( 'jquery' )); I am getting both for jquery.cycle2.min.js and jquery.cycle2.carousel.min.js. But slides are still not being displayed like a carousel. – Margaret Ames Jul 06 '15 at 21:53
0

This seems to be working for me fine. Double check that you are including jquery.cycle2.js as well as jquery.cycle2.carousel.js. JSfiddle: http://jsfiddle.net/omikey/3jsLsrch/1/

omikes
  • 8,064
  • 8
  • 37
  • 50