magento 2 add owl carousel to recently viewed products

Question

I am trying to add owl carousel to recently viewed products in product detail page by making custom theme and creating viewed_grid.phtml in

app/design/frontend/_YOUR_VENDOR_/YOUR_THEME/Magento_Reports/view/frontend/templates/widget/viewed/content and requirejs.config.js 

in

app/design/frontend/_YOUR_VENDOR_/YOUR_THEME/Magento_Reports . 

But still I am not able to get slider.

Answer 1

Copy the knockout HTML template to your theme. Copy

/vendor/magento/module-catalog/view/base/web/template/product/list/listing.html

to

app/design/frontend/[Vendor]/[Theme]/Magento_Catalog/web/template/product/list/listing.html

and keep below div before last div ends in file

<div class="clear" data-bind="afterRender: pdpRvowlInit"></div>

and override file listing.js from

vendor/module_catalog/view/base/js/product/list/listing.js 

and create in

app/design/frontend/_YOUR_VENDOR_/YOUR_THEME/Magento_Catalog/web/js/product/list/listing.js 

and make below changes

    define([
    'ko',
    'underscore',
    'Magento_Ui/js/grid/listing',
    'jquery',
    'owlCarousel'],function (ko, _, Listing, $) { 'use strict';

//and add  below function

    pdpRvowlInit: function(){
    $('.block-viewed-products-grid .product-items').owlCarousel({
        autoPlay: 3000, //Set AutoPlay to 3 seconds
        items : 3,
        nav: true,
        navText : ['<i class="fa fa-angle-left" aria-hidden="true"></i>','<i class="fa fa-angle-right" aria-hidden="true"></i>'],
        itemsDesktop : [1199,5],
        itemsDesktopSmall : [900,4], // betweem 900px and 601px
        itemsTablet: [700,2], // 2 items between 600 and 480
        itemsMobile : [479,1] , // 1 item between 479 and 0
    });}

Hope requirejs.config.js is already added in web/js folder