1

I am new to magento 2 .

can any buddy help me out for this ,

how to add a banner slider in Magento 2 without using any extension.

4

Updated Answer

Yes, can do implement a slider without using any extension

For implement banner, you have to work at the theme level. Download OwlCarousel2 from https://owlcarousel2.github.io/OwlCarousel2/

and I have copied below files

owl.carousel.min.css from https://github.com/OwlCarousel2/OwlCarousel2/blob/develop/dist/owl.carousel.js

and owl.carousel.js

app\design\frontend\{ThemenVendorName}\{ThemeName}\Magento_Theme\web\css\owl.carousel.min.css

app\design\frontend\{ThemenVendorName}\{ThemeName}\Magento_Theme\web\js\owl.carousel.js

Add owl.carousel.js using require js create a js fileapp\design\frontend\{ThemenVendorName}\{ThemeName}\Magento_Theme\requirejs-config.js.

and code of requirejs-config.js is

    var config = {
    map: {
        '*': {
            owlcarouselslider: 'Magento_Theme/js/owl.carousel'
        }
    }
};

Now, call creates a phtml slider.phtml (app\design\frontend\{ThemenVendorName}\{ThemeName}\Magento_Theme\templates) and implement carousel

and phtml code is

<div class="owl-carousel owl-theme">
    <div class="item"><img src="http://127.0.0.1/magento23dev/pub/media/catalog/product/l/t/lt01.jpg"/></div>
    <div class="item"><img src="http://127.0.0.1/magento23dev/pub/media/catalog/product/l/t/lt02.jpg"/></div>
    <div class="item"><img src="http://127.0.0.1/magento23dev/pub/media/catalog/product/l/t/lt03.jpg"/></div>
    <div class="item"><img src="http://127.0.0.1/magento23dev/pub/media/catalog/product/l/t/lt04.jpg"/></div>
    <div class="item"><img src="http://127.0.0.1/magento23dev/pub/media/catalog/product/l/t/lt05.jpg"/></div>
    <div class="item"><img src="http://127.0.0.1/magento23dev/pub/media/catalog/product/l/t/lt06.jpg"/></div>
    <div class="item"><img src="http://127.0.0.1/magento23dev/pub/media/catalog/product/l/t/lt01.jpg"/></div>
    <div class="item"><img src="http://127.0.0.1/magento23dev/pub/media/catalog/product/l/t/lt02.jpg"/></div>
    <div class="item"><img src="http://127.0.0.1/magento23dev/pub/media/catalog/product/l/t/lt03.jpg"/></div>
    <div class="item"><img src="http://127.0.0.1/magento23dev/pub/media/catalog/product/l/t/lt04.jpg"/></div>
    <div class="item"><img src="http://127.0.0.1/magento23dev/pub/media/catalog/product/l/t/lt05.jpg"/></div>
    <div class="item"><img src="http://127.0.0.1/magento23dev/pub/media/catalog/product/l/t/lt06.jpg"/></div>
</div>
<script type="text/x-magento-init">
{
  "*": {
    "Magento_Theme/js/custom-slider": {}
  }
}
</script>

Create custom-slider.js from where you can write owlcarousel.js parameters. Location: app/design/frontend/{ThemenVendorName}/{ThemeName}/Magento_Theme/web/js/

And code

define([
    'jquery',
    'owlcarouselslider'
], function ($) {
    'use strict';
    console.log('carousel.init');
    $('.owl-carousel').owlCarousel({
        loop: true,
        margin: 10,
        nav: true,
        responsive: {
            0: {
                items: 1
            },
            600: {
                items: 3
            },
            1000: {
                items: 5
            }
        }
    });
});

After that, you need to call this phtml using layout, So create cms_index_index.xml at app\design\frontend\{ThemenVendorName}\{ThemeName}\Magento_Theme\layout using below code:

<?xml version="1.0" encoding="UTF-8"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="Magento_Theme::css/owl.carousel.css" />
    </head>
    <body>
        <referenceContainer name="content">
            <block class="StackExchange\Magento\Block\Slider" name="home.banner" template="Magento_Theme::slider.phtml"
            after="-"/>
        </referenceContainer>
    </body>
</page>

After this implementation, you have to do Static Content deploy properly.

Check out below blog for the Best way to implement owlcarousel2 is

Owl carousel is not working in magento 2

| improve this answer | |
  • Yes thanks bro, need one more help i am getting images one by one how to get in slider?? – Hardik Radadiya Jun 11 '19 at 10:03
  • Just add image tag instead of h2 tag – Amit Bera Jun 11 '19 at 10:18
  • i am getting images on my home page but its showing all at a time i need in slider – Hardik Radadiya Jun 11 '19 at 10:39

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.