• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Tutsplanet

Tutsplanet

Free Technical and Blogging Resources

  • Home
  • Web Hosting
  • Programming
  • Plugins
  • Twitter Trends
  • Tools
  • About Us

General

How to load a Slideshow on the Home Page – Magento 2

Jun 21, 2020 Editorial Staff Leave a Comment

Share
Tweet
Share
2 Shares

In this article we will show how to load a slideshow in your Magento 2 website’s homepage. We use  Slick JS Library for this example.

First things first, download slick JS library to your  local computer from this link.

Important Note

We assume <theme_path> as your root of your theme path  through out the tutorial ie – [code]app/design/frontend/<VendorName>/<theme_name>/[/code]

Step #1

Copy the slick.min.js to your theme’s web/js folder.

Copy slick.less and slick-theme.less to the <theme_path>/web/css/source folder. Also add both files to <theme_path>/web/css/source/_extend.less

@import "slick.less";
@import "slick-theme.less";

Update the require config file in the theme root. <theme_path>/requirejs-config.js

var config = {
 paths: {
     slick: 'js/slick.min'
 },
 shim: {
     slick: {
         deps: ['jquery']
     }
   }
};

Here path name slick is set for js/slick.min and magneto will convert this js/slick.min.js, you don’t need to add the js extension. Also we specified the jquery dependency for the slider.

#Step 2

We create our phtml file and configure the slider to  display in the homepage.

In order to amend a change for homepage only, you need to add the configuration in the file in the bleow path <theme_path>/Magento_Cms/layout/cms_index_index.xml.

The original file you can get from the following location vendor/magento/module-cms/view/frontend/layout.

<?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">
    <referenceContainer name="main.content">
        <container name="slick.slider" htmlTag="div" htmlId="slick_container" htmlClass="homepage-slider" before="-">
            <block class="Magento\Framework\View\Element\Template" name="block.home.slider" as="block.home.slider" template="Magento_Cms::home_slider.phtml" />
        </container>
    </referenceContainer>
</page>

Here we use the main.content referenceContainer to inject our phtml block.

Next, create  a phtml file in the location Magento_Cms/templates/home_slider.phtml

<ul class="my-list">
    <li><img src="https://via.placeholder.com/1200X400"></li>
    <li><img src="https://via.placeholder.com/1200X400"></li>
</ul>

<script>
    require([
        'jquery',
        'slick'
    ], function ($) {
        $(document).ready(function () {
            $(".my-list").slick({
                dots: true,
                infinite: true,
                speed: 300,
                slidesToShow: 1,
                slidesToScroll: 1
            });
        });
    });
</script>

Here we have used the placeholder image for the slider.  You should maintain the order of jquery and slick.

That’s it,  clear the cache(live & developer mode) and perform a static content deployment(live only).


Editorial Staff

Editorial Staff at Tutsplanet is a dedicated team to write various tutorials about subjects like Programming, Technology and Operating Systems.

View all posts by Editorial Staff

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Quick Links

  • Top 21 Website Ideas To Make Money Online in 2021
  • A Simple YouTube Video Downloader Script in PHP
  • The 50 Most Useful jQuery Plugins for Frontend Development
  • Replace “\n” with new line characters, using Notepad++
  • Using Third-Party Libraries in Codeigniter
  • Upload Multiple Images and Store in Database using PHP and MySQL.
  • Hierarchical Tree view Category Example in Laravel
  • Laravel Image Intervention Tutorial With Example
  • How to import sql file in MySQL database using PHP?
  • Free VAT Calculator Online

Subscribe

* indicates required

Search Here

Share

   

Hot topics

  • Replace “\n” with new line characters, using Notepad++ 57 views
  • How to enter new line in Microsoft Teams? 36 views
  • Open a URL in a new tab using JavaScript 26 views
  • A Simple YouTube Video Downloader Script in PHP 23 views
  • Laravel WhereHas() Eloquent Example 19 views
  • How to change PHP version on MAMP – Mac OSX 17 views
  • How to Create PDF File From HTML Form Using Fpdf? 16 views
  • PHP: Implode () with quotes 15 views
  • Simple PHP Shopping Cart 15 views
  • Get Uploads Directory Path in WordPress 14 views

Categories

  • Design & Development
  • Drupal
  • Facebook
  • General
  • How To
  • ios
  • Javascript
  • Linux
  • Magento
  • Marketing
  • News
  • PHP
  • Plugins
  • Programming
  • Snippets List
  • Social Media
  • Softwares
  • Themes
  • Tips
  • Wordpress
  • YouTube

Copyright © 2022 · Planet on Genesis Framework · Powered By BunnyCDN . Network wallpapernoon.com