I did check a lot of articles for a slick but none of them worked. Even I didn't see the js in view source code.

I want to add a slider on the homepage having multiple blocks. Can anyone help me out on this?


  • You want to display product slider? Commented Jan 17, 2022 at 7:59
  • Yes, actually I purchased the extension to create blogs. I want to show that blog via slick slider using widget. Widget because, via widget only I can use that blogs Commented Jan 17, 2022 at 9:08
  • You need to add slick js and call into that div. as it's widget so, in widget you can't call slick using pagebuilder. Commented Jan 17, 2022 at 9:55
  • I did the same. Can't we add widget via pagebuilder in HTML CODE section & from there only can't we call our slick slider js? Commented Jan 17, 2022 at 10:24
  • You can call widget using page builder but can't apply slick in that widget. If you use slider or banner of page builder then it will be call pagebuilder's slick js. Commented Jan 17, 2022 at 10:28

2 Answers 2


You could create a module, see here.
Then add the module to a block and integrate the block with the pagebuilder to the page.

  • thanks but didn't solved my requirement Commented Jan 14, 2022 at 8:01
  • I proposed basically the same solution as Rohan above – as far as I see it should help, isn't it? Commented Jan 17, 2022 at 17:03
  • yes sure. Thanks Commented Jan 18, 2022 at 5:41

As mention in comment,

You can't add slick slider in widget using page builder. To implement slick slider in your widget. To add slick slider in your widget. You need to add this below code in your requirejs-config.js file.

var config = {
    paths: {
        slick: 'Vendor_Module/js/slick'
    shim: {
        slick: {
            deps: ['jquery']

Then, add this below code in your common js file.

require(['jquery', 'jquery/ui', 'slick'], function($) {
    $(document).ready(function() {
        $("your div id or class").slick({
            dots: true,
            infinite: true,
            slidesToShow: 3,
            slidesToScroll: 3

Reference : Click Here

  • then how this will be applied to home page where i added the widget for blog? Commented Jan 17, 2022 at 10:37
  • FYI, this is the widget that contain all blogs i created -{{widget type="Magefan\Blog\Block\Widget\Recent" title="" no_repeat_posts_enable="0" number_of_posts="10" category_id="0" tag_id="0" author_id="0"}}. I want to move all these 10 post in slick slider on home page. Hope my query is clear Commented Jan 17, 2022 at 10:39
  • It's quite simple that create custom js file then call that js file for home page. common js code add in your custom js file. Commented Jan 17, 2022 at 11:53
  • For ex : your div class is => widget widget-blog widget-blog-posts ... then you need to replace that your div id or class in slick js code Commented Jan 17, 2022 at 11:56
  • Mark as accept and upvote if it's useful for you. Commented Jan 17, 2022 at 13:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.