52392

Is it possible to arrows on a pageable container (visual composer)?

<h3>Question</h3>

I'm working on my WordPress website with Visual Composer.

I need to include a pageable container but it would be great if it can be like a slideshow.

This is my pageable container

Thanks in advance,

Regards :)


<h3>Answer1:</h3>

Based upon the current version of WP Bakery Page Builder the below works for me:

To build it I created a row with 3 columns, with the pageable container in the middle column and the left and right arrow images in the columns on either side.

Both arrow images and the pageable container were given IDs. In my example the IDs of the arrows were #arrow_prev and #arrow_next respectively. You can give your pageable container any unique ID.

(function ($) { $(document).ready(function(){ $( '#arrow_prev' ).click( function( e ) { var pageable_container = $(this).closest(".vc_row").find(".vc_tta-panels-container"); move_pageable_container(pageable_container,'prev'); }); $( '#arrow_next' ).click( function( e ) { var pageable_container = $(this).closest(".vc_row").find(".vc_tta-panels-container"); move_pageable_container(pageable_container,'next'); }); function move_pageable_container(pageable_container,direction){ // Make a list of the panel IDs var panel_ids = $(pageable_container.find(".vc_tta-panel")) .map(function() { return this.id; }) // convert to set of IDs .get(); // Find position of the active panel in list var current_active_pos = panel_ids.indexOf($(pageable_container).find(".vc_tta-panel.vc_active").attr('id')); var new_pos = 0; switch(direction) { case 'prev': if (current_active_pos > 0){ new_pos = current_active_pos-1; }else{ new_pos = panel_ids.length-1; } break; case 'next': if (current_active_pos < panel_ids.length-1){ new_pos = current_active_pos+1; }else{ new_pos = 0; } break; } // Clear active panels $(pageable_container.find(".vc_tta-panel")).each(function(i,a) { $(this).removeClass("vc_active"); }); var new_active_panel = $(pageable_container).find('#'+ panel_ids[new_pos]); $(new_active_panel).addClass("vc_animating"); $(new_active_panel).addClass("vc_active"); setTimeout( function(){ $(new_active_panel).removeClass("vc_animating"); }, 350); } } ); })(jQuery);

If you want a pseudo fading-in effect then you can use this additional CSS in your style sheet:

#id_of_pageable_container .vc_tta-panel.vc_animating { opacity: 0!important; }

Where #id_of_pageable_container is the ID that you gave your pageable container

来源:https://stackoverflow.com/questions/38569567/is-it-possible-to-arrows-on-a-pageable-container-visual-composer

Recommend

  • Assertion failed on git-svn checkout
  • AWS SES handle doesn't exist mailbox with Lambda
  • Selenium 3.4.0 with Firefox 55
  • Exporting PDF's from SQL Server DB and writing a Map to a Text File
  • Pass empty strings in cmake?
  • celery for different timezones
  • Get posts from all categories except one category
  • offset parameter of curand_init
  • Apache Flink Streaming window WordCount
  • Bitwise color filter in MATLAB
  • Is there a way to create more than one deployment with msbuild on a single build?
  • Inject Javascript code into a web page
  • How application get update from apple store?
  • changing src attributes
  • Entity Framework, how to manually produce inner joins with LinQ to entitites
  • Show alternate categorical labels in axis in ggplot2
  • JSON printing all paths from root to leaf
  • Spark sql issue with columns specified
  • How to remove item from Panel
  • Problem in JPA-Mapping
  • jQuery ui.combobox and asp.net web forms autopostback
  • Firebase reverse dns lookup ENOTFOUND error node.js dns
  • How to achieve density/heat map effect in iOS (iPhone/iPad)?
  • Identify File Type in Java
  • Laravel Query Builder Update with Increment
  • Finding all XML nodes between each two processing instructions
  • How to delete first 7 characters of folder name by using batch script?
  • Java 11 and E(fx)clipse JavaFX plugin on Eclipse 4.9: An error has occurred - see the log file
  • jQuery colorbox breaks postbacks in ASP.NET Web Forms
  • Dynamically run java code with Process
  • android : speech recognition what are the technologies available
  • $this->a->b->c->d calling methods from a superclass in php
  • Yii Bootstrap not loading JS files
  • Showing image on a acro text field position
  • opencv deskewing a contour
  • time column in sqlite using gorm
  • Error handeling in antlr 3.0
  • Drag and drop unicode TText in DelphiXe4
  • how to snap two objects in runtime in unity?
  • Angular FormGroup won't update it's value immediately after patchValue or setValue