0

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?

Rashi

7
  • You want to display product slider? Jan 17 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 Jan 17 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. Jan 17 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? Jan 17 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. Jan 17 at 10:28
1

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

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

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

6
  • then how this will be applied to home page where i added the widget for blog? Jan 17 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 Jan 17 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. Jan 17 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 Jan 17 at 11:56
  • Mark as accept and upvote if it's useful for you. Jan 17 at 13:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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