Magento 2 用 jQuery.scrollTo jQuery.localScroll jQuery.serialScroll 插件实现左右滚动导航

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">&nbsp;</a></li>
    <li><a href="#two">&nbsp;</a></li>
  </ul>
</div>