In this tutorial, I am going to explain to you how you can add owl carousel slider in Magento 2. When making the user interface of Magento, it has to be taken care of that how to show more and better content in less space.
Owl carousel slider is very helpful to have that user interface look good. This slider is most widely used in eCommerce websites.
Magento 2 website owners mostly use the Owl Carousel slider to display various types of products such as new arrival products, most viewed products, more liked products slider, featured product slider, best seller product slider, etc.
How to Add Owl Carousel Slider in Magento 2
1) In the first step, we will add
app/code/Wishusucess/OwlSlider/view/frontend/templates/slider.phtml file
<!-- /** * Created By : Hemant Kumar Singh Magento 2x Developer */ --> <!DOCTYPE html> <html> <body> <div class="carousel-wrap"> <div class="owl-carousel"> <div class="item"><img src="http://wishusucess.com/350x300?text=1"></div> <div class="item"><img src="http://wishusucess.com/350x300?text=2"></div> <div class="item"><img src="http://wishusucess.com/350x300?text=3"></div> <div class="item"><img src="http://wishusucess.com/350x300?text=4"></div> <div class="item"><img src="http://wishusucess.com/350x300?text=5"></div> <div class="item"><img src="http://wishusucess.com/350x300?text=6"></div> <div class="item"><img src="http://wishusucess.com/350x300?text=7"></div> <div class="item"><img src="http://wishusucess.com/350x300?text=8"></div> <div class="item"><img src="http://wishusucess.com/350x300?text=9"></div> <div class="item"><img src="http://wishusucess.com/350x300?text=10"></div> <div class="item"><img src="http://wishusucess.com/350x300?text=11"></div> <div class="item"><img src="http://wishusucess.com/350x300?text=12"></div> </div> </div> </body> </html>
2) In the second step you have to add this javascript file to your custom extension.
app/code/Wishusucess/OwlSlider/view/frontend/web/js/common.js
/**
* Created By : Hemant Kumar Singh Magento 2x Developer
*/
require(['jquery', 'owlcarousel'], function($) {
$(document).ready(function() {
$('.owl-carousel').owlCarousel({
loop: true,
margin: 10,
nav: true,
navText: [
"<i class='fa fa-caret-left'></i>",
"<i class='fa fa-caret-right'></i>"
],
autoplay: true,
autoplayHoverPause: true,
responsive: {
0: {
items: 1
},
600: {
items: 3
},
1000: {
items: 5
}
}
});
});
});
3) Now in the third step you have to add the javascript file in the phtml file so you have to create a file.
app/code/Wishusucess/OwlSlider/view/frontend/owlslider_index_index.xml
<?xml version="1.0"?> <!-- /** * Created By : Hemant Kumar Singh Magento 2x Developer */ --> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <head> <script src="Wishusucess_OwlSlider::js/common.js" async="async" /> </head> <body> <referenceBlock name="content"> <block class="Magento\Framework\View\Element\Template" name="proslider" template="Wishusucess_OwlSlider::productslider.phtml" /> </referenceBlock> </body> </page>
4) In the fourth step we have to add an owl slider
app/code/Wishusucess/OwlSlider/view/frontend/requirejs-config.js
/**
* Created By : Hemant Kumar Singh Magento 2x Developer
*/
var config = {
paths: {
owlcarousel: "Wishusucess_OwlSlider/js/owl.carousel"
},
shim: {
owlcarousel: {
deps: ['jquery']
}
}
};
Now in order to make your slider more attractive and beautiful, you can add extra CSS and js files in your Magento 2 custom OwlSlider module’s web folder. We can add this code as per our requirement and can add this slider on any cms page also.
That’s it !!!
You can check the full module here: GitHub
Read more: Magento 2.4 Installation Guide: How to Install Magento 2.4.2
How to Call Owl Slider in Magento2 Related Products
This step will help you to add the Owl Slider in Magento 2.x You just have to follow the below steps.
I assume that you are using a custom Magento 2 theme so here I am taking as an example.
ThemeVender : Wishusucess
ThemeName: WishusucessTheme
Let's start
If you want to put the slider in the related product on the product details page of Magento 2 then you can follow the steps given below.
This step will help you to add Owl Slider for Related Product in the product detail page.
You need to update
app/design/frontend/Wishusucess/WishusucessTheme/Magento_Theme/Magento_Catalog/templates/product/list/items.phtml
The file to implement OwlCarousel for Related Products.
Step 1: Download OwlCarousel from here: Owl Carousel
Please put all OwlCarousel JS files owl.carousel.min.js and owlcarousel.js in this directory
app/design/frontend/Wishusucess/WishusucessTheme/Magento_Catalog/web/js
After that put all OwlCarousel CSS files owl.carousel.css and owl.theme.default.css etc... in this directory
app/design/frontend/Wishusucess/WishusucessTheme/web/css/owlcarousel/assets
Step 2: Include OwlCarousel CSS files using default_head_blocks.xml layout XML file.
For that create
app/design/frontend/Wishusucess/WishusucessTheme/Magento_Theme/layout/default_head_blocks.xml
default_head_blocks.xml file code.
<?xml version="1.0"?> <!-- /** * Hemant Kumar Singh Magento 2x Developer * Website url: http://www.wishusucess.com/ */ --> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <head> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/> <css src="css/owlcarousel/assets/owl.carousel.min.css" /> <css src="css/owlcarousel/assets/owl.theme.default.min.css" /> </head> </page>
Step 3: Include OwlCarousel JS using requirejs config file.
Now you have to create a file
app/design/frontend/Wishusucess/WishusucessTheme/Magento_Catalog/requirejs-config.js
requirejs-config.js file code.
var config = {
paths: {
'owlcarousel': "Magento_Catalog/js/owlcarousel"
},
shim: {
'owlcarousel': {
deps: ['jquery']
}
}
};
Step 4: Update items.phtml File
Copy from
/vendor/magento/module-catalog/view/frontend/templates/product/list/items.phtml
and paste to
app/design/frontend/Wishusucess/WishusucessTheme/Magento_Theme/Magento_Catalog/templates/product/list/items.phtml
Now update the item.phtml file to implement OwlCarousel
Here, I am giving you the items.phtml code, you can just copy and paste.
<?php
/**
* Copyright © Magento, Inc. All rights reserved.
* Developer: Hemant Kumar Singh Magento 2x Developer
*/
// @codingStandardsIgnoreFile
/* @var $block \Magento\Catalog\Block\Product\AbstractProduct */
?>
<?php
switch ($type = $block->getType()) {
case 'related-rule':
if ($exist = $block->hasItems()) {
$type = 'related';
$class = $type;
$image = 'related_products_list';
$title = __('Related Products');
$items = $block->getAllItems();
$limit = $block->getPositionLimit();
$shuffle = (int) $block->isShuffled();
$canItemsAddToCart = $block->canItemsAddToCart();
$showAddTo = false;
$showCart = false;
$templateType = null;
$description = false;
}
break;
case 'related':
/** @var \Magento\Catalog\Block\Product\ProductList\Related $block */
if ($exist = $block->getItems()->getSize()) {
$type = 'related';
$class = $type;
$image = 'related_products_list';
$title = __('Related Products');
$items = $block->getItems();
$limit = 0;
$shuffle = 0;
$canItemsAddToCart = $block->canItemsAddToCart();
$showAddTo = true;
$showCart = false;
$templateType = null;
$description = false;
}
break;
case 'upsell-rule':
if ($exist = $block->hasItems()) {
$type = 'upsell';
$class = $type;
$image = 'upsell_products_list';
$title = __('We found other products you might like!');
$items = $block->getAllItems();
$limit = $block->getPositionLimit();
$shuffle = (int) $block->isShuffled();
$showAddTo = false;
$showCart = false;
$templateType = null;
$description = false;
$canItemsAddToCart = false;
}
break;
case 'upsell':
/** @var \Magento\Catalog\Block\Product\ProductList\Upsell $block */
if ($exist = count($block->getItemCollection()->getItems())) {
$type = 'upsell';
$class = $type;
$image = 'upsell_products_list';
$title = __('You may also like');
$items = $block->getItemCollection()->getItems();
$limit = $block->getItemLimit('upsell');
$shuffle = 0;
$showAddTo = false;
$showCart = false;
$templateType = null;
$description = false;
$canItemsAddToCart = false;
}
break;
case 'crosssell-rule':
/** @var \Magento\Catalog\Block\Product\ProductList\Crosssell $block */
if ($exist = $block->hasItems()) {
$type = 'crosssell';
$class = $type;
$image = 'cart_cross_sell_products';
$title = __('More Choices:');
$items = $block->getItemCollection();
$showAddTo = true;
$showCart = true;
$templateType = \Magento\Catalog\Block\Product\ReviewRendererInterface::SHORT_VIEW;
$description = false;
$canItemsAddToCart = false;
}
break;
case 'crosssell':
/** @var \Magento\Catalog\Block\Product\ProductList\Crosssell $block */
if ($exist = count($block->getItems())) {
$type = 'crosssell';
$class = $type;
$image = 'cart_cross_sell_products';
$title = __('More Choices:');
$items = $block->getItems();
$showAddTo = true;
$showCart = true;
$templateType = \Magento\Catalog\Block\Product\ReviewRendererInterface::SHORT_VIEW;
$description = false;
$canItemsAddToCart = false;
}
break;
case 'new':
if ($exist = $block->getProductCollection()) {
$type = 'new';
$mode = 'grid';
$type = $type . ' ' . $mode;
$class = 'widget' . ' ' . $type;
$image = 'new_products_content_widget_grid';
$title = __('New Products');
$items = $exist;
$showAddTo = true;
$showCart = true;
$templateType = \Magento\Catalog\Block\Product\ReviewRendererInterface::SHORT_VIEW;
$description = ($mode == 'list') ? true : false;
$canItemsAddToCart = false;
}
break;
case 'other':
break;
}
?>
<?php if ($exist):?>
<div class="clearfix"></div>
<?php if ($type == 'related' || $type == 'upsell'): ?>
<?php if ($type == 'related'): ?>
<div class="block <?= /* @escapeNotVerified */ $class ?>" data-mage-init='{"relatedProducts":{"relatedCheckbox":".related.checkbox"}}' data-limit="<?= /* @escapeNotVerified */ $limit ?>" data-shuffle="<?= /* @escapeNotVerified */ $shuffle ?>">
<?php else: ?>
<div class="block <?= /* @escapeNotVerified */ $class ?>" data-mage-init='{"upsellProducts":{}}' data-limit="<?= /* @escapeNotVerified */ $limit ?>" data-shuffle="<?= /* @escapeNotVerified */ $shuffle ?>">
<?php endif; ?>
<?php else: ?>
<div class="block <?= /* @escapeNotVerified */ $class ?>">
<?php endif; ?>
<div class="block-title title">
<strong id="block-<?= /* @escapeNotVerified */ $class ?>-heading" role="heading" aria-level="2"><?= /* @escapeNotVerified */ $title ?></strong>
</div>
<div class="block-content content" aria-labelledby="block-<?= /* @escapeNotVerified */ $class ?>-heading">
<?php if ($type == 'related' && $canItemsAddToCart): ?>
<div class="block-actions">
<?= /* @escapeNotVerified */ __('Check items to add to the cart or') ?>
<button type="button" class="action select" role="select-all"><span><?= /* @escapeNotVerified */ __('select all') ?></span></button>
</div>
<?php endif; ?>
<div class="products wrapper grid products-grid products-<?= /* @escapeNotVerified */ $type ?>">
<div id="relateditem_carousel" class="products list items product-items owl-carousel owl-theme">
<?php $iterator = 1; ?>
<?php foreach ($items as $_item): ?>
<?php $available = ''; ?>
<?php if (!$_item->isComposite() && $_item->isSaleable() && $type == 'related'): ?>
<?php if (!$_item->getRequiredOptions()): ?>
<?php $available = 'related-available'; ?>
<?php endif; ?>
<?php endif; ?>
<?php if ($type == 'related' || $type == 'upsell'): ?>
<?= /* @escapeNotVerified */ ($iterator++ == 1) ? '<div class="item product product-item" style="display: none;">' : '</div><div class="item product product-item" style="display: none;">' ?>
<?php else: ?>
<?= /* @escapeNotVerified */ ($iterator++ == 1) ? '<div class="item product product-item">' : '</div><div class="item product product-item">' ?>
<?php endif; ?>
<div class="product-item-info <?= /* @escapeNotVerified */ $available ?>">
<?= /* @escapeNotVerified */ '<!-- ' . $image . '-->' ?>
<a href="<?= /* @escapeNotVerified */ $block->getProductUrl($_item) ?>" class="product photo product-item-photo">
<?= $block->getImage($_item, $image)->toHtml() ?>
</a>
<div class="product details product-item-details">
<!--<strong class="product name product-item-name"><a class="product-item-link" title="<?= $block->escapeHtml($_item->getName()) ?>" href="<?= /* @escapeNotVerified */ $block->getProductUrl($_item) ?>">
<?= $block->escapeHtml($_item->getName()) ?></a>
</strong>-->
<!--<?= /* @escapeNotVerified */ $block->getProductPrice($_item) ?>-->
<?php if ($templateType): ?>
<?= $block->getReviewsSummaryHtml($_item, $templateType) ?>
<?php endif; ?>
<?php if ($canItemsAddToCart && !$_item->isComposite() && $_item->isSaleable() && $type == 'related'): ?>
<?php if (!$_item->getRequiredOptions()): ?>
<div class="field choice related">
<input type="checkbox" class="checkbox related" id="related-checkbox<?= /* @escapeNotVerified */ $_item->getId() ?>" name="related_products[]" value="<?= /* @escapeNotVerified */ $_item->getId() ?>" />
<label class="label" for="related-checkbox<?= /* @escapeNotVerified */ $_item->getId() ?>"><span><?= /* @escapeNotVerified */ __('Add to Cart') ?></span></label>
</div>
<?php endif; ?>
<?php endif; ?>
<?php if ($showAddTo || $showCart): ?>
<div class="product actions product-item-actions">
<?php if ($showCart): ?>
<div class="actions-primary">
<?php if ($_item->isSaleable()): ?>
<?php if ($_item->getTypeInstance()->hasRequiredOptions($_item)): ?>
<button class="action tocart primary" data-mage-init='{"redirectUrl": {"url": "<?= /* @escapeNotVerified */ $block->getAddToCartUrl($_item) ?>"}}' type="button" title="<?= /* @escapeNotVerified */ __('Add to Cart') ?>">
<span><?= /* @escapeNotVerified */ __('Add to Cart') ?></span>
</button>
<?php else: ?>
<?php $postDataHelper = $this->helper('Magento\Framework\Data\Helper\PostHelper');
$postData = $postDataHelper->getPostData($block->getAddToCartUrl($_item), ['product' => $_item->getEntityId()])
?>
<button class="action tocart primary"
data-post='<?= /* @escapeNotVerified */ $postData ?>'
type="button" title="<?= /* @escapeNotVerified */ __('Add to Cart') ?>">
<span><?= /* @escapeNotVerified */ __('Add to Cart') ?></span>
</button>
<?php endif; ?>
<?php else: ?>
<?php if ($_item->getIsSalable()): ?>
<div class="stock available"><span><?= /* @escapeNotVerified */ __('In stock') ?></span></div>
<?php else: ?>
<div class="stock unavailable"><span><?= /* @escapeNotVerified */ __('Out of stock') ?></span></div>
<?php endif; ?>
<?php endif; ?>
</div>
<?php endif; ?>
<?php if ($showAddTo): ?>
<div class="secondary-addto-links actions-secondary" data-role="add-to-links">
<?php if ($addToBlock = $block->getChildBlock('addto')): ?>
<?= $addToBlock->setProduct($_item)->getChildHtml() ?>
<?php endif; ?>
</div>
<?php endif; ?>
</div>
<?php endif; ?>
</div>
</div>
<?= ($iterator == count($items)+1) ? '</div>' : '' ?>
<?php endforeach ?>
</div>
</div>
</div>
</div>
<script type="text/javascript">
requirejs(['jquery','owlcarousel'],function(jQuery,owlCarousel){
(function($) {
$(window).load(function () {
$('#relateditem_carousel').owlCarousel({
items:4,
lazyLoad:false,
loop:false,
margin:10,
nav:false,
dots:false,
autoplay:true,
response:true,
autoplayHoverPause:false,
autoWidth:false,
responsive : {
0 : {
items:1,
},
420 : {
items:2,
},
768 : {
items:3,
},
991 : {
items:4,
}
}
});
});
})(jQuery);
});
</script>
<?php endif;?>
Step 5: Now run the following CLI commands.
sudo rm -rf pub/static/frontend/* sudo rm -rf var/cache/* php bin/magento setup:upgrade
Thats' all!!
Related Posts:
How to Get Data on Frontend From System Configuration File in Magento2