Skip to content

Latest commit

 

History

History
154 lines (103 loc) · 6.53 KB

README.md

File metadata and controls

154 lines (103 loc) · 6.53 KB
Raw

Advance Slider

Note: This document is for advance topics only, it doesn't show everything that this addon has to offer.

Creating Template

Make sure you are using child theme before creating folder or adding files.

Note: Template can only use for changing/alter structure of the slides.

First download the default.html file and place this file in the root of the active theme location /quantum-addons/advance-slider/default.html you can rename the default.html with anything you want just make sure it has .html extension.

In that template file you have this HTML structure

<div>
   <img class="el-quantum-slider-image" src="{{Image.url}}" alt="{{Image.alt}}">
   <div class="el-quantum-content-container">
      <h3 class="el-quantum-title">{{Title}}</h3>
      <p class="el-quantum-para">{{Paragraph}}</p>
      <p class="el-quantum-add-content">{{Additional_content}}</p>
   </div>
</div>

Template Tags

Above in the template there are some double curly brackets{{...}} character we call them "template tag". Think of them as a placeholder of the content that you will be puting in the slides.

Available Template Tags:

  • {{Image.url}} for slide image URL
  • {{Image.alt}} for slide image alternative text
  • {{Title}} for slide heading
  • {{Paragraph}} for slide paragraph
  • {{Additional_content}} for slide additional content

Custom Structure

After understanding the template tags you can create your own custom template structure just note that you can remove any css class in the above example template but they are important if you want elementor style to be applied to those HTML element.

Custom Navigation Buttons

First enable the custom Navigation Buttons

how-enable-navigation-buttons

after enabled you can see there are two input boxes, you can input your button's CSS selector into those boxes respectively. For example you can create your custom buttons with the use of Elementor's Button element.

Just add unique ID to the buttons like this:

elementor-button-add-id

And add buttons IDs to those input boxes

adding-css-selector-to-inputs

I have created same buttons with above steps here is final result:

2023-06-18.14-53-01.mp4

Hooks

Reference links

Where to write JavaScript hooks

If you are writing this hooks on theme file make sure it's dependency array has wp-hooks value or you can use Simple Custom CSS and JS or similar plugin for writing this hooks.

JavaScript Hooks for Swiper

Intro

This slider has built with Swiper slider library, it has so many options to customize your slider, but those options can't possibly be fit into this addon so we have created some hooks so you can alter the configuration depending on your needs.

quantum_adslider_after_init_swiper_config

Filter Hook: Fires after swiper configuration has been initialized.

wp.hooks.addFilter( 'hookName', 'namespace', callback: ( config, container ) => config, priority )

Example:
wp.hooks.addFilter( "quantum_adslider_after_init_swiper_config", "quantum_addons/advance_slider", changeSwiperConfig, 10 );

function changeSwiperConfig( swiperConfig, container )  {
   /* to only apply on some of the element(s) you can add css class to those widget
      https://elementor.com/help/css-classes-in-elementor/
   */
   if( container.classList.contains( "el-custom-slider" ) )  {
      swiperConfig.slidesPerView = 3;
      console.log( "this is the one", container );
   }

   // have to return the config for slider to work correctly
   return swiperConfig;
}

Source: /widgets/advance-slider/js/advance-slider

quantum_adslider_initiated

Action Hook: Fires after slider has been initiated.

wp.hooks.addAction( 'quantum_adslider_initiated', 'quantum_addons/advance_slider', callback: ( instance, container ) => {} )

Example:
wp.hooks.addAction( 'quantum_adslider_initiated', 'quantum_addons/advance_slider',
( instance, container ) => {
   if( container.classList.contains( "eg-slider") ) {
      // do something ...
      instance.update();
   }
});

quantum_adslider_swiper_instance

Action Hook (kind of): Fires after swiper instance has been initialized. It will get every swiper instance on the page but not add any action on the script.

wp.hooks.addAction( 'hookName', 'namespace', callback: ( instance, container ) => {}, priority )

Example:

At the time of writing this documentation, this addon doesn't have autoplay options so we will use this example with the help this hook to implement autoplay.

wp.hooks.addAction( "quantum_adslider_swiper_instance", "quantum_addons/advance_slider", getSwiperInstance, 10 );

function getSwiperInstance( instance, element )  {
   /* to only get some of the element(s) you can add css class to those widget
      https://elementor.com/help/css-classes-in-elementor/
   */
   if( element.classList.contains( "el-custom-slider") )  {
      instance.params.autoplay = {
         delay: 3000
      }

      // call update method after you change something
      instance.update();

      instance.autoplay.start();

      console.log( instance );
   }
}

Source: /widgets/advance-slider/js/advance-slider