我的Javascript代码无法在wordpress

Question

我必须使用WordPress为我的工作做一个网站，但我更喜欢个性化图形，我在WordPress上手工编写代码。

我在sublime文本上做了一个个性化的滑块，它有效。但是当我在WordPress中粘贴代码时，它停止了工作。我把html放在文本编辑器中。对于css和JavaScript代码，我正在使用“自定义css / js”：我把css代码放在css空间中（就像我以前那样），并且我第一次在WordPress上使用了js代码。它不起作用

这是工作代码！ 关于脚本定位的位置不是问题，因为它可以起作用！

var slideIndex = 1;
    showDivs(slideIndex);
    
    function plusDivs(n) {
      showDivs(slideIndex += n);
    }
    
    function currentDiv(n) {
      showDivs(slideIndex = n);
    }
    
    function showDivs(n) {
      var i;
      var x = document.getElementsByClassName("mySlides");
      var dots = document.getElementsByClassName("demo");
      if (n > x.length) {slideIndex = 1}
      if (n < 1) {slideIndex = x.length}
      for (i = 0; i < x.length; i++) {
         x[i].style.display = "none";
      }
      for (i = 0; i < dots.length; i++) {
         dots[i].className = dots[i].className.replace(" w3-opacity-off", "");
      }
      x[slideIndex-1].style.display = "block";
      dots[slideIndex-1].className += " w3-opacity-off";
    }

.w3-content{
        height: 400px;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden
    }
    
    .mySlides{
        min-height: 100%
    }
    
    #galleryA{
    	position: relative;
        width: 100px;
        height: 100px;
        -webkit-clip-path: polygon(0% 2%, 100% 2%, 50% 88%);
        clip-path: polygon(0% 2%, 100% 2%, 50% 89%);
        float: left;
        padding: 0px;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        margin-left:-40px;
    }
    
    #galleryB{
    	position: relative;
        width: 100px;
        height: 100px;
        -webkit-clip-path: polygon(50% 2%, 0% 87%, 100% 87%);
        clip-path: polygon(50% 2%, 0% 87%, 100% 87%);
        float: left;
        padding: 0px;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        margin-left:-40px;
    }
    
    .demo{
    	max-height: 100%;
        flex-shrink: 0;
        cursor:pointer
    }
    
    .w3-row-padding{
    	padding-left:40px;
    }

This is the HTML code

    <div class="mainContainer">
    <div class="w3-content">
       <img class="mySlides" src="http://via.placeholder.com/350x150">
    	<img class="mySlides" src="http://via.placeholder.com/350x150">
    	<img class="mySlides" src="http://via.placeholder.com/350x150">
    	</div>
    	<div class="w3-row-padding w3-section">
    	    <div id="galleryA" class="w3-col s4">
    	      <img class="demo w3-opacity w3-hover-opacity-off" src="a.jpg" onclick="currentDiv(1)">
    	    </div>
    	    <div id="galleryB" class="w3-col s4">
    	      <img class="demo w3-opacity w3-hover-opacity-off" src="c.jpg" onclick="currentDiv(2)">
    	    </div>
    	    <div id="galleryA" class="w3-col s4">
    	      <img class="demo w3-opacity w3-hover-opacity-off" src="a.jpg" onclick="currentDiv(3)">
    	    </div>
     	</div>
    </div>