Closed kodemi closed 6 years ago
I know this is a very old issue, but I needed the same information and so here's one way I found. Working with a copy of lightslider.html.twig in your theme, add your callbacks to the script in file. For example, here's how to implement the onAfterSlide callback:
<script type="text/javascript">
$(document).ready(function() {
$("#{{ unique_id }}").lightSlider({
item: {{ settings.item|default(1) }},
slideMove: {{ settings.slideMove|default(3) }},
slideMargin: {{ settings.slideMargin|default(5) }},
// A bunch more settings...
onAfterSlide: function (el) {
alert("That was a slide");
},
});
});
</script>
Multiple sliders on one page could be handled with separate templates.
I had a problem when wanting to use lightSlider methods rather than callbacks.
Full functionality of the slider object, solving both problems (callback API and methods), would be available site-wide if the plugin instantiated a globally accessible lightSlider object, which is something that has to happen on creation. I couldn't find a way to reference an existing instance unless it was assigned on creation.
I have overridden lightslider.html.twig
to successfully create such an instance and access it from my theme's Javascript. Specifically, I was able to use the slider's pause() and play() methods in response to DOM events.
You could use the same instance variable to assign callbacks like onAfterSlide
(see above) anywhere in your user scripts.
I'm going to submit a PR with my overridden template because it increases the utility of the plugin and provides a solution for this issue.
My PR will mention that a global instance could be exposed in a number of ways, and mine may not be a preferred method.
In main features you have mentioned "Full callback API and public methods". How to use that API?