滑杆及滑杆；lightbox-Javascript冲突

请任何人帮助解决这一冲突好吗？我会非常感激的

我试图在一个HTML页面上使用w3schools.com上的Slider和Light Box两个Javascript，但是，我想，这两个Javascript对每个函数都使用相同的名称（或值），所以当我在一个页面上同时使用它们时，它们不起作用。但是，当我为每个滑块或灯箱删除一组css/html/javascript时，这两个选项都很好

请帮我拿这个。 事先非常感谢

CSS

身体{
字体系列：Verdana，无衬线；
保证金：0；
}
/*------滑块-------*/
*{框大小：边框框}
/*幻灯片容器*/
.slideshow容器{
最大宽度：1000px；
位置：相对位置；
保证金：自动；
}
迈斯利德斯先生{
显示：无；
}
/*下一步和上一步按钮*/
.prev，.next{
光标：指针；
位置：绝对位置；
最高：50%；
宽度：自动；
利润上限：-22px；
填充：16px；
颜色：白色；
字体大小：粗体；
字号：18px；
过渡：0.6s缓解；
边界半径：0 3px 3px 0；
}
/*将“下一步按钮”置于右侧*/
.下一个{
右：0；
边界半径：3px 0 3px；
}
/*在悬停时，添加一个黑色背景色，带有一点透明*/
.prev:悬停，.next:悬停{
背景色：rgba（0,0,0,0.8）；
}
/*标题文本*/
.文本{
颜色：#F2F2；
字体大小：15px；
填充：8px 12px；
位置：绝对位置；
底部：8px；
宽度：100%；
文本对齐：居中；
}
/*数字文本（1/3等）*/
.numbertext{
颜色：#F2F2；
字体大小：12px；
填充：8px 12px；
位置：绝对位置；
排名：0；
}
/*点/子弹/指示器*/
多特先生{
光标：指针；
高度：13px；
宽度：13px；
边际：0.2px；
背景色：#bbb；
边界半径：50%；
显示：内联块；
过渡：背景色0.6s；
}
.active，.dot:悬停{
背景色：#717171；
}
/*褪色动画*/
.褪色{
-webkit动画名称：淡入淡出；
-webkit动画持续时间：1.5s；
动画名称：淡入淡出；
动画持续时间：1.5s；
}
@-webkit关键帧淡入淡出{
来自{opacity:.4}
到{opacity:1}
}
@关键帧淡入淡出{
来自{opacity:.4}
到{opacity:1}
}
/*-----灯箱-------*/
.row>列{
填充：0 8px；
}
.罗：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
.栏目{
浮动：左；
宽度：25%；
}
/*模态（背景）*/
.莫代尔{
显示：无；
位置：固定；
z指数：1；
填充顶部：100px；
左：0；
排名：0；
宽度：100%；
身高：100%；
溢出：自动；
背景色：黑色；
}
/*模态内容*/
.模态内容{
位置：相对位置；
背景色：透明；
保证金：自动；
填充：0；
宽度：90%；
最大宽度：1200px；
边界：无；
}
/*关闭按钮*/
.结束{
颜色：白色；
位置：绝对位置；
顶部：10px；
右：25px；
字体大小：35px；
字体大小：粗体；
}
.关闭：悬停，
.结束：聚焦{
颜色：#999；
文字装饰：无；
光标：指针；
}
迈斯利德斯先生{
显示：无；
}
.光标{
光标：指针
}
/*下一步和上一步按钮*/
.prev，
.下一个{
光标：指针；
位置：绝对位置；
最高：50%；
宽度：自动；
填充：16px；
利润上限：-50px；
颜色：白色；
字体大小：粗体；
字体大小：20px；
过渡：0.6s缓解；
边界半径：0 3px 3px 0；
用户选择：无；
-webkit用户选择：无；
}
/*将“下一步按钮”置于右侧*/
.下一个{
右：0；
边界半径：3px 0 3px；
}
/*在悬停时，添加一个黑色背景色，带有一点透明*/
.prev:悬停，
.下一步：悬停{
背景色：rgba（0,0,0,0.8）；
}
/*数字文本（1/3等）*/
.numbertext{
颜色：#F2F2；
字体大小：12px；
填充：8px 12px；
位置：绝对位置；
排名：0；
}
img{
保证金底部：-4px；
}
.标题容器{
文本对齐：居中；
背景色：黑色；
填充：2x16px；
颜色：白色；
}
.演示{
不透明度：0.6；
}
.主动，
.演示：悬停{
不透明度：1；
}
悬停阴影{
过渡：0.3s
}
.悬停阴影：悬停{
长方体阴影：0 4px 8px 0 rgba（0,0,0,0.2），0 6px 20px 0 rgba（0,0,0,0.19）
}
.container{边距：0自动；最大宽度：1000px；}

HTML

1/3
标题文本
2/3
标题二
3/3
标题三
❮
❯
灯箱
&时代；
1/4
2/4
3/4
4/4
❮
❯

Javascript

<script>

/* ---------  Slider  ----------  */
var slideIndex = 1;
showSlides(slideIndex);
setInterval(function(){ showSlides(++slideIndex); }, 4000);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";  
  }
  for (i = 0; i < dots.length; i++) {
  dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
}   



/* ---------  LightBox  ---------- */
function openModal() {
  document.getElementById('myLightBox').style.display = "block";
}

function closeModal() {
  document.getElementById('myLightBox').style.display = "none";
}

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("LB-Slides");
  var dots = document.getElementsByClassName("demo");
  var captionText = document.getElementById("caption");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
  captionText.innerHTML = dots[slideIndex-1].alt;
}
/* ---------  //LightBox  ---------- */

</script>

</body>

/*------滑块-------*/
var slideIndex=1；
放映幻灯片（幻灯片索引）；
setInterval（函数（）{showsslides（++slideIndex）；}，4000）；
函数加滑块（n）{
放映幻灯片（幻灯片索引+=n）；
}
功能当前幻灯片（n）{
放映幻灯片（幻灯片索引=n）；
}
功能演示幻灯片（n）{
var i；
var slides=document.getElementsByClassName（“mySlides”）；
var dots=document.getElementsByClassName（“dot”）；
如果（n>slides.length）{slideIndex=1}
如果（n<1）{slideIndex=slides.length}
对于（i=0；i<body>
<div class="container">
    <!--  ================  Slideshow  ================ -->
    <div class="slideshow-container mt20 mb10">
        <div class="mySlides fade">
        <div class="numbertext">1 / 3</div>
        <img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
        <div class="text">Caption Text</div>
    </div>

    <div class="mySlides fade">
        <div class="numbertext">2 / 3</div>
        <img src="https://www.w3schools.com/howto/img_fjords_wide.jpg" style="width:100%">
        <div class="text">Caption Two</div>
    </div>

    <div class="mySlides fade">
        <div class="numbertext">3 / 3</div>
        <img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
        <div class="text">Caption Three</div>
    </div>

    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>
    </div>

    <div style="text-align:center;margin-top:10px;">
        <span class="dot" onclick="currentSlide(1)"></span>
        <span class="dot" onclick="currentSlide(2)"></span>
        <span class="dot" onclick="currentSlide(3)"></span>
    </div> <!-- // Slider -->

    <!-- Lightbox -->

    <h2 style="text-align:center">Lightbox</h2>

    <div class="row">
      <div class="column">
        <img src="https://www.w3schools.com/howto/img_nature.jpg" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
      </div>
      <div class="column">
        <img src="https://www.w3schools.com/howto/img_fjords.jpg" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
      </div>
      <div class="column">
        <img src="https://www.w3schools.com/howto/img_mountains.jpg" style="width:100%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
      </div>
      <div class="column">
        <img src="https://www.w3schools.com/howto/img_lights.jpg" style="width:100%" onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
      </div>
    </div>

    <div id="myLightBox" class="modal">
      <span class="close cursor" onclick="closeModal()">&times;</span>
      <div class="modal-content">

        <div class="LB-Slides">
          <div class="numbertext">1 / 4</div>
          <img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
        </div>

        <div class="LB-Slides">
          <div class="numbertext">2 / 4</div>
          <img src="https://www.w3schools.com/howto/img_fjords_wide.jpg" style="width:100%">
        </div>

        <div class="LB-Slides">
          <div class="numbertext">3 / 4</div>
          <img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
        </div>

        <div class="LB-Slides">
          <div class="numbertext">4 / 4</div>
          <img src="https://www.w3schools.com/howto/img_lights_wide.jpg" style="width:100%">
        </div>

        <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
        <a class="next" onclick="plusSlides(1)">&#10095;</a>

        <div class="caption-container">
          <p id="caption"></p>
        </div>


        <div class="column">
          <img class="demo cursor" src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%" onclick="currentSlide(1)" alt="Nature and sunrise">
        </div>
        <div class="column">
          <img class="demo cursor" src="https://www.w3schools.com/howto/img_fjords_wide.jpg" style="width:100%" onclick="currentSlide(2)" alt="Trolltunga, Norway">
        </div>
        <div class="column">
          <img class="demo cursor" src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
        </div>
        <div class="column">
          <img class="demo cursor" src="https://www.w3schools.com/howto/img_lights_wide.jpg" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
        </div>
      </div>
    </div>
  </div><!-- // Lightbox -->
</div>

<script>

/* ---------  Slider  ----------  */
var slideIndex = 1;
showSlides(slideIndex);
setInterval(function(){ showSlides(++slideIndex); }, 4000);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";  
  }
  for (i = 0; i < dots.length; i++) {
  dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
}   



/* ---------  LightBox  ---------- */
function openModal() {
  document.getElementById('myLightBox').style.display = "block";
}

function closeModal() {
  document.getElementById('myLightBox').style.display = "none";
}

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("LB-Slides");
  var dots = document.getElementsByClassName("demo");
  var captionText = document.getElementById("caption");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
  captionText.innerHTML = dots[slideIndex-1].alt;
}
/* ---------  //LightBox  ---------- */

</script>

</body>

/* ---------  Slider  ----------  */

var slider = (function() {
    var slider = {};

    slider.setIntervals = function() {
        setInterval(function() {
            slider.showSlides(++slider.slideIndex);
        }, 4000);
    };
    slider.plusSlides = function(n) {
        slider.showSlides(slider.slideIndex += n);
    };
    slider.currentSlide = function(n) {
        slider.showSlides(slider.slideIndex = n);
    };

    slider.showSlides = function(n) {
        var i;
        var slides = document.getElementsByClassName("mySlides");
        var dots = document.getElementsByClassName("dot");
        if (n > slides.length) {
            slider.slideIndex = 1
        }
        if (n < 1) {
            slider.slideIndex = slides.length
        }
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
        }
        for (i = 0; i < dots.length; i++) {
            dots[i].className = dots[i].className.replace(" active", "");
        }
        slides[slider.slideIndex - 1].style.display = "block";
        dots[slider.slideIndex - 1].className += " active";
    };

    slider.init = function() {
        slider.slideIndex = 1;
        slider.showSlides(slider.slideIndex);
        slider.setIntervals();
    };

    return slider;
})();


/* ---------  LightBox  ---------- */

var lightbox = (function() {
    var lightbox = {};

    lightbox.openModal = function() {
        document.getElementById('myLightBox').style.display = "block";
    };

    lightbox.closeModal = function() {
        document.getElementById('myLightBox').style.display = "none";
    };


    lightbox.plusSlides = function(n) {
        lightbox.showSlides(lightbox.slideIndex += n);
    };

    lightbox.currentSlide = function(n) {
        lightbox.showSlides(lightbox.slideIndex = n);
    };

    lightbox.showSlides = function(n) {
        var i;
        var slides = document.getElementsByClassName("LB-Slides");
        var dots = document.getElementsByClassName("demo");
        var captionText = document.getElementById("caption");
        if (n > slides.length) {
            lightbox.slideIndex = 1
        }
        if (n < 1) {
            lightbox.slideIndex = slides.length
        }
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
        }
        for (i = 0; i < dots.length; i++) {
            dots[i].className = dots[i].className.replace(" active", "");
        }
        slides[lightbox.slideIndex - 1].style.display = "block";
        dots[lightbox.slideIndex - 1].className += " active";
        captionText.innerHTML = dots[lightbox.slideIndex - 1].alt;
    };

    lightbox.init = function() {
        lightbox.slideIndex = 1;
        lightbox.showSlides(lightbox.slideIndex);
    };

    return lightbox;
})();


slider.init(); // initialize slider module (widget);
lightbox.init(); // initialize lightbox module (widget);