0

I have two banners that are showing on frontend. I want to show them in a slider. Please suggest something.

3

2 Answers 2

0

You can use following extensions:

https://www.weltpixel.com/owl-carousel-and-slider.html

https://www.mageplaza.com/magento-2-banner-slider-extension/

Or you can use owl.carousel.js and it's CSS directly by including it in your theme.

Please follow the link:

How to call Owl Slider in Magento2

3
  • I dont want to use any extension. I have to make it by own.Currently i can add and show banner from backend to frontend. Now i want those banners in slider. Can you please elaborate about the owl carousal method
    – surbhi agr
    Sep 19, 2019 at 8:38
  • I updated answer.
    – Ankit
    Sep 19, 2019 at 8:55
  • i have checked this link but slider doesnt appear
    – surbhi agr
    Sep 23, 2019 at 9:46
0

Create Step1

app/design/frontend/Your/theme/web/js/owl/owl.carousel.js

Copy the content from here https://github.com/OwlCarousel2/OwlCarousel2/blob/develop/src/js/owl.carousel.js

Step2

app/design/frontend/Your/theme/web/js/slider.js

(update Your/theme with your path directory name)

define([
    'jquery',
    'js/owl/owl.carousel'
], function ($) {
    return function(config, element) {
        $(function () {
            $(element).owlCarousel({
                items: config.slidesToShow,
                slideBy: config.slideBy,
                loop: config.loop,
                dots: config.dots,
                nav: config.nav,
                autoplay: config.autoplay,
                autoplayTimeout: config.autoplayTimeout,
                autoplayHoverPause: true,
                rewind: config.rewind,
                responsive: config.responsive                
            })
        });
    };
});

Step 3 Use the slider in cms blocks

    <div class="owl-carousel"
        data-mage-init='{"js/slider":{
                    "slidesToShow": 5,
                    "slideBy": 5,
                    "rewind": "true"
                    }}' >
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
</div>
4
  • I have a phtml file from which banners are coming. This is not working
    – surbhi agr
    Sep 19, 2019 at 12:50
  • do you find error or something in your browser console? Sep 19, 2019 at 18:52
  • @Ylgen Guxholli It is not working
    – surbhi agr
    Sep 23, 2019 at 6:00
  • @RendyEkoPrastiyo no error is coming in console
    – surbhi agr
    Sep 23, 2019 at 6:42

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.