shopify 添加swiper coverflow效果，并自定义导航swiper-pagination

1.资产中添加文件，如图

 2.theme.liquid文件添加js和css文件，如图

 3.添加新分区，代码如下

<div class="container container--no-mobile-padding full-width-image full-width-background section-{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="full-width-image">
{% style %}
		  .section-{{ section.id }}{     
			  background-color: {{ section.settings.color_bg }};
			  padding: 50px 0;
			 
		  }
		  .section-{{ section.id }} .rich-text-section__title,.section-{{ section.id }} .rte{
			  color:#fff;
		  }

		 .swiper {
				width: 100%;
				
			}

			.swiper-slide {
				background-position: center;
				background-size: cover;
				width: 1065px;
				max-height: 561px;
				max-width: 100%;
			}

			.swiper-slide img {
				display: block;
				width: 100%;
			}

			.swiper-button-next,
			.swiper-button-prev {
				color: #fff;
				background: #000;
				border-radius: 50%;
				overflow: hidden;
				width: 30px;
				height: 30px;
				opacity: 0.5;
				top: 58%;
			}

			.swiper-button-next:after,
			.swiper-button-prev:after {
				font-size: 14px !important;
			}

			.swiper-pagination {
				position: static;
				width: 75%;
				display: flex;
				margin: 50px auto 35px;
				justify-content: space-between;
				flex-wrap: wrap;
			}

			.swiper-pagination span {
				border: 1px solid #a0a0a0;
				border-radius: 1em;
				width: 102px;
				text-align: center;
				height: 36px;
				line-height: 34px;
				color: #a0a0a0;
				font-size: 18px;
				display: inline-block;
				cursor: pointer;

			}

			.swiper-pagination-customs-active {
				background: #3A53E7;
				color: #fff !important;
				border-color: #3A53E7 !important;
			}
			
			@media only screen and (max-width:1200px) {
				.swiper-pagination{
					width:90%;
				}
			}
	  @media only screen and (max-width:940px) {
		  .swiper-pagination{
			  justify-content:center;
		  }
		.swiper-pagination span{
			margin: 0 8px 10px;
		}
		.swiper-button-next,
		.swiper-button-prev {
			top:70%;
		}
	  }
  @media only screen and (max-width:414px) {
	  .swiper-button-next,
	  .swiper-button-prev {
	  	top:80%;
	  }
     .swiper-pagination{
    	width:98%;
	 }
    .swiper-pagination span{
      margin-left:4px;
      margin-right:4px;
      width: 84px;
      height: 30px;
      line-height: 28px; 
      font-size: 16px;
    }
  }

 
  {% endstyle %}
 
    <div class="full-width relative avoid-overlaps global-border-radius global-border-radius--not-extra-small text-center "> 
	
	
	  {% if section.settings.title != blank %}
	    <h2 class="{% if section.settings.enlarge_title %}giant-title {% else %}large-title {% endif %} rich-text-section__title">{{ section.settings.title | escape }}</h2>
	  {% endif %}
	
	  {% if section.settings.text != blank %}
	    <div class="rte {% if section.settings.enlarge_text %}large-text{% endif %}">
	      {{ section.settings.text }}
	    </div>
	  {% endif %}
	
	 <div class="swiper mySwiper">
	 	<div class="swiper-pagination"></div>
	 	<div class="swiper-wrapper">
			{% for block in section.blocks %}
	 		<div class="swiper-slide">
				{% if block.settings.image_link != blank %}<a href="{{ block.settings.image_link }}">{% endif %}
				  {% if block.settings.image == blank %}
				  {{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg' }}
				  {% else %}
				  <div class="rimage-outer-wrapper rimage-background lazyload fade-in"
				      data-bgset="{% render 'bgset', image: block.settings.image %}"
				      data-sizes="auto"
				      data-parent-fit="cover"
				      style="background-position: {{ section.settings.image_position }}">
				    <div class="rimage-wrapper" style="padding-top:{{ 1 | divided_by: block.settings.image.aspect_ratio | times: 100 }}%">
				      <noscript>
				      <img src="{{ block.settings.image | img_url: '1024x1024' }}" alt="{{ block.settings.image.alt | escape }}" class="rimage__image">
				      </noscript>
				    </div>
				  </div>
				  {% endif %}
				  {% if block.settings.image_link != blank %}</a>{% endif %}
			</div>
	 		 {% endfor %}
	 	</div>
	 
	 	<div class="swiper-button-prev swiper-button-white"></div>
	 	<div class="swiper-button-next swiper-button-white"></div>
	 </div>
	  
	  
	  
	  <div class="more-button margin-top-one"><a href="/collections/materials">Learn More ></a></div>
  </div>

{% schema %}
  {
    "name": "Sample index",
    "tag": "section",
    "class": "section-image-with-text-overlay",
	"max_blocks": 9,
    "settings": [ 
		{
		  "type": "color",
		  "id": "color_bg",
		  "label": "Background color",
		  "default": "#000"
		},		
		{
		  "type": "color",
		  "id": "nav_color_bg_active",
		  "label": "Nav active background color",
		  "default": "#3a53e7"
		},
		{
		  "type": "text",
		  "id": "title",
		  "label": "Heading"
		},
		{
		  "type": "textarea",
		  "id": "text",
		  "label": "Text"
		},
		{
		  "type": "checkbox",
		  "id": "enlarge_title",
		  "label": "Enlarge heading",
		  "default": false
		},
		{
		  "type": "checkbox",
		  "id": "enlarge_text",
		  "label": "Enlarge text",
		  "default": false
		},
		
		  {
			"type": "select",
			"id": "image_position",
			"label": "Image alignment",
			"info": "Used to keep the subject of your image in view",
			"default": "center center",
			"options": [
			  {
				"value": "top left",
				"label": "Top left"
			  },
			  {
				"value": "top center",
				"label": "Top center"
			  },
			  {
				"value": "top right",
				"label": "Top right"
			  },
			  {
				"value": "center left",
				"label": "Middle left"
			  },
			  {
				"value": "center center",
				"label": "Middle center"
			  },
			  {
				"value": "center right",
				"label": "Middle right"
			  },
			  {
				"value": "bottom left",
				"label": "Bottom left"
			  },
			  {
				"value": "bottom center",
				"label": "Bottom center"
			  },
			  {
				"value": "bottom right",
				"label": "Bottom right"
			  }
			]
		  },
		  {
			"type": "radio",
			"id": "height",
			"label": "Image height",
			"options": [
			  {
				"value": "adapt",
				"label": "Natural"
			  },
			  {
				"value": "fixed",
				"label": "Fixed height"
			  }
			],
			"default": "adapt"
		  },
		  {
			"type": "range",
			"id": "height_desktop",
			"min": 200,
			"max": 1000,
			"step": 10,
			"unit": "px",
			"label": "Desktop fixed height",
			"default": 600
		  },
		  {
			"type": "range",
			"id": "height_mobile",
			"min": 100,
			"max": 1000,
			"step": 10,
			"unit": "px",
			"label": "Mobile fixed height",
			"default": 500
		  }
		 
		  
      
	  ],   
	 
      "blocks": [
		{
	    "type": "image",
	    "name": "Image",		
		"settings": [
			  {
				"type": "image_picker",
				"id": "image",
				"label": "Image",
				"info": "2048 x 1024px recommended"
			  },
			  {
				"type": "url",
				"id": "image_link",
				"label": "Image link"
			  },
			  {
			    "type": "text",
			    "id": "tab_name",
			    "label": "Tab name"
			  }
		]
		}
	  ],
     
    
    "presets": [
      {
        "name": "Sample index"
      }
    ]
  }
{% endschema %} 


<script>
			var swiper = new Swiper(".mySwiper", {
				effect: "coverflow",
				grabCursor: true,
				centeredSlides: true,
				slidesPerView: "auto",
				initialSlide: 1,
				spaceBetween: '4%',
				coverflowEffect: {
					rotate: 50,
					stretch: 0,
					depth: 100,
					modifier: 1,
					slideShadows: true,
				},
				navigation: {
					nextEl: '.swiper-button-next',
					prevEl: '.swiper-button-prev',
				},
				pagination: {
					el: ".swiper-pagination",
					clickable: true,
					type: 'custom',
					renderCustom: function(swiper, current, total) {
						var paginationHtml = " ";
						var navName = [
                           {% for block in section.blocks %} '{{ block.settings.tab_name }}', {% endfor %}                        
                        ];
						for (var i = 0; i < total; i++) {
							// 判断是不是激活焦点，是的话添加active类，不是就只添加基本样式类
							if (i === (current - 1)) {
								paginationHtml +=
									'<span class="swiper-pagination-customs swiper-pagination-customs-active" >' +
									navName[i] + '</span>';
							} else {
								paginationHtml += '<span class="swiper-pagination-customs" >' + navName[i] +
									'</span>';
							}
						}
						return paginationHtml;

					},
				},
			});

			//点击分页器跳转到对应页面
			$(".swiper-pagination").on("click", "span", function() {
				var index = $(this).index();
				swiper.slideTo(index);
			})
</script>