Slick

[sepullupes]

i try to use Tour on Slick but somehow element in slick missing and Tour cannot focus on that element HTML <div class="dataslick" style="width:100%"> <div id="step1" class="row mb-0 form-group"> <div class="col-xs-12 text-sm-right"> <button data-toggle="modal" href="#modal-form" style="width:100%" class=" mb-1 btn btn-warning btn-sm" type="button"><i class="fa fa-camera-retro fa-1x"></i> Upload</button> </div> <div id="step2" class="row mb-0 form-group"> <div class="col-xs-12 text-sm-right"> <button data-toggle="modal" href="#modal-form" style="width:100%" class=" mb-1 btn btn-warning btn-sm" type="button"><i class="fa fa-camera-retro fa-1x"></i> Upload</button> </div> </div> Slick Activation

$('.dataslick').slick({ dots: true, fade: true, adaptiveHeight: true });

Tour activation

var tour = new Tour({ backdropContainer: 'body', backdropPadding: 0, backdrop: true, name: "aduan", steps: [ { element: ".dataslick", title: "This is title", content: "This is Content", placement: "top", orphan:false, onShown: function (tour) { $('body').addClass('tour-open') }, onHidden: function (tour) { $('body').removeClass('tour-close') } },{ element: "#step1", title: "This is title", content: "This is Content", placement: "top", onShown: function (tour) { $('body').addClass('tour-open') }, onHidden: function (tour) { $('body').removeClass('tour-close') } } ], template: "<div class='popover tour ibox-content text-center white-bg no-padding'> <div class='arrow'></div> <h3 class='popover-title'></h3> <div class='popover-content'></div><div class='ibox-footer'> <div class='btn-group'> <button class='btn btn-default btn-xs' data-role='prev'>« Kembali</button><button class='btn btn-default btn-xs btn-right' data-role='next'>Seterusnya »</button> </div> <button class='btn btn-danger btn-xs' data-role='end'>Tamat</button> </div></div>" }); tour.init(); tour.start();

how to make Tour highlight on

#step1?