0

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

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

| improve this answer | |
  • 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 '19 at 8:38
  • I updated answer. – Ankit Sep 19 '19 at 8:55
  • i have checked this link but slider doesnt appear – surbhi agr Sep 23 '19 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>
| improve this answer | |
  • I have a phtml file from which banners are coming. This is not working – surbhi agr Sep 19 '19 at 12:50
  • do you find error or something in your browser console? – Rendy Eko Prastiyo Sep 19 '19 at 18:52
  • @Ylgen Guxholli It is not working – surbhi agr Sep 23 '19 at 6:00
  • @RendyEkoPrastiyo no error is coming in console – surbhi agr Sep 23 '19 at 6:42

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.