Menu
Guided tour

Demonstration with predefined elements in plugin

This is my first element
This is my second element
This is my third element
This is my last element
Guided tour alternative

With attribut data-tour-message and optional data-tour-title on elements

This is my first element
This is my second element
This is my third element
This is my last element
Tour container

Not all buttons are mandatory

<div class="modal-tour">
    <div class="modal-header">
        <h4 class="modal-title txt-normal">Guided tour</h4>
        <i class="bx bx-x opacity-25 btn-close"></i>
    </div>
    <div class="modal-body">
        <div class="modal-message"></div>
    </div>
    <div class="modal-footer">
        <button class="btn btn-light btn-first">Start</button>
        <button class="btn btn-light btn-prev">Previous</button>
        <button class="btn btn-primary btn-next">Next</button>            
        <button class="btn btn-danger btn-end">End</button>
        <button class="btn btn-light btn-last">Last</button>
    </div>
</div>
Example for guided tour 
let items = [
    {id: '#card-1', message: 'This is the first element.'},
    {id: '#card-2', message: 'This is the second element.'},
    {id: '#card-3', message: 'This is the third element.'},
    {id: '#card-4', message: 'This is the last element.'}
];

$('.btn-demo-1').on('click', function() {
    $('#demo-1').tour({
        steps: items
    });            
});

$('.btn-demo-2').on('click', function() {
    $('#demo-2').tour();
});
Example for combine tour

You can combine the two examples by using a global container, body for example.

let items = [
    {id: '#card-1', message: 'This is the first element.'},
    {id: '#card-2', message: 'This is the second element.'},
    {id: '#card-3', message: 'This is the third element.'},
    {id: '#card-4', message: 'This is the last element.'}
];

$('.btn-demo-3').on('click', function() {
    $('body').tour({
        steps: items
    });
});

Guided tour