1、把jQuery.scrollTo jQuery.localScroll jQuery.serialScroll文件复制到web/js 目录结构如下图：
文件下载：jquery.serialScroll jquery.scrollTo jquery.localScroll
2、在模板目录创建requirejs-config.js 内容如下：
var config = { map: { '*': { coda_slider:'js/coda_slider/coda-slider', } }, 'paths': { 'jquery/localscroll': 'js/coda_slider/jquery.localscroll', 'jquery/scrollTo': 'js/coda_slider/jquery.scrollTo', 'jquery/serialScroll': 'js/coda_slider/jquery.serialScroll', } };3、修改jquery.serialScroll.js因为目前的1.3.1版本不支持RequireJS所以进行修改
(function (factory) { if (typeof define === 'function' && define.amd) { define([ "jquery", "jquery/jquery.metadata" ], factory); } else { factory(jQuery); } }(function (jQuery) { /*! * jQuery.serialScroll 源代码 */ }));如图：
4、创建coda_slider.js用来实现滚动功能
require(['jquery', 'jquery/localscroll', 'jquery/scrollTo', 'jquery/serialScroll', ], function ($) { 'use strict'; if ($("#slider").length > 0) { $("#slider").ready(function () { var $panels = $('#slider .scrollContainer > div'); var $container = $('#slider .scrollContainer'); var horizontal = true; if (horizontal) { $panels.css({ 'float' : 'left', 'position' : 'relative' }); $container.css('width', $panels[0].offsetWidth * $panels.length); } var $scroll = $('#slider .scroll').css('overflow', 'hidden'); $scroll .before('<img class="scrollButtons left" src="/pub/media/myimages/scroll_left.png" />') .after('<img class="scrollButtons right" src="/pub/media/myimages/scroll_right.png" />'); function selectNav() { $(this) .parents('ul:first') .find('a') .removeClass('selected') .end() .end() .addClass('selected'); } $('#slider .navigation').find('a').click(selectNav); function trigger(data) { var id=""; if(data[0]) { id=data[0].id }else{ id=data.id } var el = $('#slider .navigation').find('a[href$="' + id + '"]').get(0); selectNav.call(el); } if (window.location.hash) { trigger({ id : window.location.hash.substr(1) }); } else { $('ul.navigation a:first').click(); } var offset = parseInt((horizontal ? $container.css('paddingTop') : $container.css('paddingLeft')) || 0) * -1; var scrollOptions = { target: $scroll, items: $panels, navigation: '.navigation a', prev: 'img.left', next: 'img.right', axis: 'xy', onAfter: trigger, offset: offset, duration: 500, easing: 'swing' }; $('#slider').serialScroll(scrollOptions); $.localScroll(scrollOptions); scrollOptions.duration = 1; $.localScroll.hash(scrollOptions); }); } });5、创建coda_slider.css文件：
#slider { width: 1200px; margin: 0 auto; position: relative; } .scroll { overflow: auto; overflow-x: hidden; position: relative; clear: left; } .scrollContainer div.panel { padding: 0px; height: 500px; width: 1200px; } ul.navigation { list-style: none; width:100%; padding: 0px; min-width:166px; } ul.navigation li { width:50%; white-space:nowrap; float:left; } .scrollContainer div.panel img{ padding-left: 20px; padding-bottom: 20px; width: 395px !important; } .scrollContainer div.panel img.first{ padding-left: 0px; } ul.navigation a { padding: 0px; margin: 0px; width:100%; height: 6px; color: #000; background-color: #d4c7bd; text-decoration: none; display: block; } ul.navigation a:hover { background-color: #000000; display: block; } ul.navigation a.selected { background-color: #000000; display: block; } ul.navigation a:focus { background-color: #000000; display: block; } .scrollButtons { position: absolute; top: 240px; cursor: pointer; z-index:auto; } .scrollButtons.left { margin: -20px; left: 0px; } .scrollButtons.right { margin: -20px; right: 0px; } .hide { display: none; }6、在Magento_Theme/layout/default.xml 文件添加加载语句：
<head> <css src="css/coda_slider.css"/> <script src="js/coda_slider/coda_slider.js"/> </head>代码部分完成！记得要刷新静态页面
7、进后台添加一下模块就可以使用了，下面是模块的代码：
<div id="slider"> <div class="scroll"> <div class="scrollContainer"> <div class="panel" id="one"> <div><img class="first" src="{{media url="2020/10/home/1.png"}}" alt=""> <img src="{{media url="2020/10/home/2.png"}}" alt=""> <img src="{{media url="2020/10/home/3.png"}}" alt=""></div> <div><img class="first" src="{{media url="2020/10/home/4.png"}}" alt=""> <img src="{{media url="2020/10/home/5.png"}}" alt=""> <img src="{{media url="2020/10/home/6.png"}}" alt=""></div> </div> <div class="panel" id="two"> <div><img class="first" src="{{media url="2020/10/home/7.png"}}" alt=""> <img src="{{media url="2020/10/home/8.png"}}" alt=""> <img src="{{media url="2020/10/home/9.png"}}" alt=""></div> <div><img class="first" src="{{media url="2020/10/home/10.png"}}" alt=""> <img src="{{media url="2020/10/home/11.png"}}" alt=""> <img src="{{media url="2020/10/home/12.png"}}" alt=""></div> </div> </div> </div> <ul class="navigation"> <li><a href="#noe"> </a></li> <li><a href="#two"> </a></li> </ul> </div>
