For Home Page Slider you need to follow the Steps:
Step 1: Download owl slider and copy and paste the slider file to the following directory as :
- app/design/frontend/Magento/mytheme/Magento_Theme/web/css/owl.carousel.css
- app/design/frontend/Magento/mytheme/Magento_Theme/web/js/owl.carousel.js
- app/design/frontend/Magento/mytheme/Magento_Theme/web/js/owl.carousel.min.js
Step 2: Create a Page for slider in the following directory with the following code:
- app/design/frontend/Magento/mytheme/Magento_Theme/templates/html/home_slider.phtml
home_slider.phtml
<link rel="stylesheet" type="text/css" href="<?php echo $block->getViewFileUrl('Magento_Theme::css/owl.carousel.css') ?>"/>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="owl-carousel">
<div class="block block-static item">
<div class="static-content" style="right: 65%;">
<div class="static-title">Baby Bassinet</div>
<div class="static-desc">baby clothes, shoes, furniture, baby gear & more. Free shipping on select orders over $25</div>
<div class="static-link"><a href="<?php echo $block->getUrl(); ?>trina-turk-womens-tara-carmel-crep.html"><span>view more</span></a></div>
</div>
<div class="img-content"><a href="#"><img src="<?php echo $block->getViewFileUrl('images/bannerslider-01.jpg'); ?>" alt="Banner-01" /></a></div>
</div>
<div class="block block-static item">
<div class="static-content" style="right: 3%;">
<div class="static-title">Baby Bassinet</div>
<div class="static-desc">baby clothes, shoes, furniture, baby gear & more. Free shipping on select orders over $25</div>
<div class="static-link"><a href="<?php echo $block->getUrl(); ?>trina-turk-womens-tara-carmel-crep.html"><span>view more</span></a></div>
</div>
<div class="img-content"><a href="#"><img src="<?php echo $block->getViewFileUrl('images/bannerslider-02.jpg'); ?>" alt="Banner-02" /></a></div>
</div>
<div class="block block-static item">
<div class="static-content" style="right: 65%;">
<div class="static-title">Baby Bassinet</div>
<div class="static-desc">baby clothes, shoes, furniture, baby gear & more. Free shipping on select orders over $25</div>
<div class="static-link"><a href="<?php echo $block->getUrl(); ?>trina-turk-womens-tara-carmel-crep.html"><span>view more</span></a></div>
</div>
<div class="img-content"><a href="#"><img src="<?php echo $block->getViewFileUrl('images/bannerslider-03.png'); ?>" alt="Banner-03" /></a></div>
</div>
</div>
</div>
</div>
<script>
//require(['jquery', 'Webskitters_Banner/js/jquery.min']);
require(['jquery', 'Magento_Theme/js/owl.carousel'],function(jQuery){
jQuery(document).ready(function($){
jQuery('.owl-carousel').owlCarousel({
items:1,
autoplay:true,
loop:true,
margin:10,
responsiveClass:true,
nav:true,
})
});
});
</script>
Step 3: Create a block named Banner Slider and call the slider phtml file as:
<div class="banner-home-wrapper">{{block class="Magento\Framework\View\Element\Template" template="Magento_Theme::html/home_slider.phtml" }}</div>
Step 4: after that call the static block in home page by xml:
<!-- banner slider -->
<referenceContainer name="ves-slideshow">
<block class="Magento\Cms\Block\Block" name="banner-slider">
<arguments>
<argument name="block_id" xsi:type="string">banner-slider</argument>
</arguments>
</block>
</referenceContainer>
Step 5: your theme 1 column layout looks like that:
<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
<update handle="empty"/>
<referenceContainer name="page.wrapper">
<container name="header.container" as="header_container" label="Page Header Container" htmlTag="header" htmlClass="page-header" before="main.content"/>
<container name="page.top" as="page_top" label="After Page Header" after="header.container"/>
<container name="ves-slideshow" as="ves-slideshow" label="Ves Slidehow" htmlTag="div" htmlClass="ves-slideshow page-main" before="main.content"/>
<container name="ves-masstop1" as="ves-masstop1" label="Ves Masstop1" htmlTag="div" htmlClass="ves-masstop1 page-main" after="ves-slideshow"/>
<container name="ves-massbottom" as="ves-massbottom" label="Ves MassBottom" htmlTag="div" htmlClass="ves-massbottom page-main" after="ves-masstop1"/>
<container name="footer-container" as="footer" before="before.body.end" label="Page Footer Container" htmlTag="footer" htmlClass="page-footer" />
</referenceContainer>
</layout>
Step 6: copy the requirejs-config.js form
- magento/module-theme/view/frontend/requirejs-config.js
And paste it in your theme folder
- app/design/frontend/Magento/mytheme/Magento_Theme/requirejs-config.js
And define the owlslider variable at the bottom like this:
"owlslider": "Magento_Theme/js/owl.carousel"
requirejs-config.js:
var config = {
map: {
"*": {
"rowBuilder": "Magento_Theme/js/row-builder",
"toggleAdvanced": "mage/toggle",
"translateInline": "mage/translate-inline",
"sticky": "mage/sticky",
"tabs": "mage/tabs",
"zoom": "mage/zoom",
"collapsible": "mage/collapsible",
"dropdownDialog": "mage/dropdown",
"dropdown": "mage/dropdowns",
"accordion": "mage/accordion",
"loader": "mage/loader",
"tooltip": "mage/tooltip",
"deletableItem": "mage/deletable-item",
"itemTable": "mage/item-table",
"fieldsetControls": "mage/fieldset-controls",
"fieldsetResetControl": "mage/fieldset-controls",
"redirectUrl": "mage/redirect-url",
"loaderAjax": "mage/loader",
"menu": "mage/menu",
"popupWindow": "mage/popup-window",
"validation": "mage/validation/validation",
"welcome": "Magento_Theme/js/view/welcome",
"owlslider": "Magento_Theme/js/owl.carousel"
}
},
paths: {
"jquery/ui": "jquery/jquery-ui"
},
deps: [
"jquery/jquery.mobile.custom",
"js/responsive",
"mage/common",
"mage/dataPost",
"js/theme",
"mage/bootstrap"
]
};
0 Comments