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

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