| --- |
| title: "API Reference" |
| groupTitle: "Introduction" |
| sort: 4 |
| --- |
|
|
| Here is the list of methods provided by `driver` when you initialize it. |
|
|
| > **Note:** We have omitted the configuration options for brevity. Please look at the configuration section for the options. Links are provided in the description below. |
|
|
| ```javascript |
| import { driver } from "driver.js"; |
| import "driver.js/dist/driver.css"; |
|
|
| // Look at the configuration section for the options |
| // https://driverjs.com/docs/configuration |
| const driverObj = driver({ /* ... */ }); |
|
|
| // -------------------------------------------------- |
| // driverObj is an object with the following methods |
| // -------------------------------------------------- |
|
|
| // Start the tour using `steps` given in the configuration |
| driverObj.drive(); // Starts at step 0 |
| driverObj.drive(4); // Starts at step 4 |
|
|
| driverObj.moveNext(); // Move to the next step |
| driverObj.movePrevious(); // Move to the previous step |
| driverObj.moveTo(4); // Move to the step 4 |
| driverObj.hasNextStep(); // Is there a next step |
| driverObj.hasPreviousStep() // Is there a previous step |
|
|
| driverObj.isFirstStep(); // Is the current step the first step |
| driverObj.isLastStep(); // Is the current step the last step |
|
|
| driverObj.getActiveIndex(); // Gets the active step index |
|
|
| driverObj.getActiveStep(); // Gets the active step configuration |
| driverObj.getPreviousStep(); // Gets the previous step configuration |
| driverObj.getActiveElement(); // Gets the active HTML element |
| driverObj.getPreviousElement(); // Gets the previous HTML element |
|
|
| // Is the tour or highlight currently active |
| driverObj.isActive(); |
|
|
| // Recalculate and redraw the highlight |
| driverObj.refresh(); |
|
|
| // Look at the configuration section for configuration options |
| // https://driverjs.com/docs/configuration |
| driverObj.getConfig(); |
| driverObj.setConfig({ /* ... */ }); |
|
|
| driverObj.setSteps([ /* ... */ ]); // Set the steps |
|
|
| // Look at the state section of configuration for format of the state |
| // https://driverjs.com/docs/configuration |
| driverObj.getState(); |
|
|
| // Look at the DriveStep section of configuration for format of the step |
| // https://driverjs.com/docs/configuration/ |
| driverObj.highlight({ /* ... */ }); // Highlight an element |
|
|
| driverObj.destroy(); // Destroy the tour |
| ``` |