Download owl carousal from OwlCarousal
And paste owl.carousel.js to app/design/frontend/Ctm/customtheme/web/js/owl.carousel.js
owl.carousel.min.css to app/design/frontend/Ctm/customtheme/web/css/owl.carousel.min.css
Create requirejs-config.js with below code in app/design/frontend/Ctm/customtheme/Magento_Theme/requirejs-config.js
var config = {
paths: {
'owlcarousel': "js/owl.carousel"
}
};
Enqueue css using app/design/frontend/Ctm/customtheme/Magento_Theme/layout/default_head_blocks.xml
<?xml version="1.0"?>
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="css/owl.carousel.min.css" media="all"/>
</head>
</page>
Finally call the owl slider from list.phtml file. Override from vendor/magento/module-review/view/frontend/templates/product/view/list.phtml
to
app/design/frontend/Ctm/customtheme/Magento_Review/templates/product/view/list.phtml
with below code
<?php
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
// @codingStandardsIgnoreFile
/** @var Magento\Review\Block\Product\View\ListView $block */
$_items = $block->getReviewsCollection()->getItems();
$format = $block->getDateFormat() ?: \IntlDateFormatter::SHORT;
?>
<?php if (count($_items)):?>
<div class="block review-list" id="customer-reviews">
<div class="block-title">
<strong><?= $block->escapeHtml(__('Customer Reviews')) ?></strong>
</div>
<div class="block-content">
<div class="toolbar review-toolbar">
<?= $block->getChildHtml('toolbar') ?>
</div>
<ol class="owl-carousel items review-items">
<?php foreach ($_items as $_review):?>
<li class="item review-item" itemscope itemprop="review" itemtype="http://schema.org/Review">
<div class="review-title" itemprop="name"><?= $block->escapeHtml($_review->getTitle()) ?></div>
<?php if (count($_review->getRatingVotes())): ?>
<div class="review-ratings">
<?php foreach ($_review->getRatingVotes() as $_vote): ?>
<div class="rating-summary item" itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
<span class="label rating-label"><span><?= $block->escapeHtml($_vote->getRatingCode()) ?></span></span>
<div class="rating-result" title="<?= $block->escapeHtmlAttr($_vote->getPercent()) ?>%">
<meta itemprop="worstRating" content = "1"/>
<meta itemprop="bestRating" content = "100"/>
<span style="width:<?= $block->escapeHtmlAttr($_vote->getPercent()) ?>%">
<span itemprop="ratingValue"><?= $block->escapeHtml($_vote->getPercent()) ?>%</span>
</span>
</div>
</div>
<?php endforeach; ?>
</div>
<?php endif; ?>
<div class="review-content" itemprop="description">
<?= nl2br($block->escapeHtml($_review->getDetail())) ?>
</div>
<div class="review-details">
<p class="review-author">
<span class="review-details-label"><?= $block->escapeHtml(__('Review by')) ?></span>
<strong class="review-details-value" itemprop="author"><?= $block->escapeHtml($_review->getNickname()) ?></strong>
</p>
<p class="review-date">
<span class="review-details-label"><?= $block->escapeHtml(__('Posted on')) ?></span>
<time class="review-details-value" itemprop="datePublished" datetime="<?= $block->escapeHtmlAttr($block->formatDate($_review->getCreatedAt(), $format)) ?>"><?= $block->escapeHtml($block->formatDate($_review->getCreatedAt(), $format)) ?></time>
</p>
</div>
</li>
<?php endforeach; ?>
</ol>
<div class="toolbar review-toolbar">
<?= $block->getChildHtml('toolbar') ?>
</div>
</div>
</div>
<script>
require([
'jquery',
'owlcarousel'
], function () {
'use strict';
jQuery.noConflict();
jQuery(".items.review-items").owlCarousel({
autoPlay: 3000, //3000 Set AutoPlay to 3 seconds
margin:5,
items : 2,
itemsDesktop : [1199,2],
itemsDesktopSmall : [979,2],
itemsTablet : [768,2],
nav : true,
pagination : false
});
});
</script>
<?php endif;?>