In case your online shop is running on Magento 2 and you want to use your own carousel's script (Slick, Owl Carousel, Flickity, etc.) that is very much possible, but the way how you apply the carousel on our template differs a bit from the other shops' platforms.
One of the new innovations introduced in the second release of Magento is the usage of requireJS, which is a Javascript module loader for better managing scripts' dependencies and overall to improve the quality of the code.
To go (quickly, I swear!) a bit deeper to the "why" of requireJS, I have put together a few reasons:
Lazy loading - scripts are loaded when they are needed;
in a large application like an online shop, the code complexity is reduced drastically;
less HTTP requests;
scripts' files do not need anymore to be defined in a specific order.
Now, let's see what is the difference of implementation in a Nosto template, pretending the carousel you are already using on your online shop is Slick.
First up, you would need to find the name of the Slick module declared by requireJS; what I usually do is to open the browser's inspector tool and find the string "slick"
Found it! The attribute data-requiremodule is what we were looking for, and as you can see that is the module's name for the library "slick.js", which sounds like what we were looking for.
Not always, tho, the library/module you are looking for is listed in the <head> section of your shop but fret not, there is another way to get the module's name.
What is surely in the <head> section is a file called requirejs-config.js which contains the declaration of all the loaded modules.
Open the file, look again for "slick" and you will stumble upon something like this:
as you can see the two screenshots are showing the same module's name, so we are on the right path.
Copy that module's name in your clipboard.
And what else do we need to launching the carousel on an element? Exactly! We need jQuery, too.
So you can repeat the same operation for the string "jquery" finding for the file that most likely it is called jquery.js (or jquery.min.js)
At this stage, I have two modules' names with me:
one for Slick, which is "Magento_PageBuilder/js/resource/slick/slick";
one for jQuery, which is "jquery"
N.B. the modules' names are likely to differ for your online shop, these are often changing depending on the theme you use.
Finally the time of using these modules in the Nosto template has come!
Open your Nosto template that you want to turn into a carousel and let's start to code.
At the bottom of your template, let's open a <script> tag in which we will write this code:
<script type="text/javascript">
_targetWindow.requirejs(['jquery','Magento_PageBuilder/js/resource/slick/slick'], function($, slick){
$('#$divId .nosto-carousel').slick({
slidesToShow: 1,
slidesToScroll: 1
});
});
</script>
Let's explain this code a bit:
_targetWindow is our pre-selector, and must be used to access to the function requirejs because Nosto it is on a different context as the main website. More info about this can be read here;
inside the function you can see the two parameters $ and slick. These are the selector for jQuery and the function for Slick. If, for example, I would write something like function(johnny, slick) then the jQuery selector I will have to use is johnny. This is a silly example just to help you understand how that works.
As a last note, do not forget that this example is to be used if you want to launch the carousel directly from the Nosto template; the plan B would be to create the recommendation element from our template but apply the carousel on top of it from your side, rather than adding the carousel's script in the Nosto template.