实现多个缩略图到多个幻灯片javascript / jQuery

Question

我正在做我的在线作品集，并且我正在为每个项目制作一个包含多个幻灯片和缩略图的页面

现在当我在一个幻灯片中包含多个幻灯片时遇到了几个问题页，每张幻灯片的类不同。等等。在研究并尝试理解“如何？”和“为什么？”之后，我找到了一个网页，可以在其中检查javascrip并使幻灯片显示正常工作，但不能使缩略图工作，我放弃了尝试单独尝试，因为我是javascript和jQuery的新手，所以需要很多时间和精力。

请检查下面的代码...我希望我很清楚，而且代码也很清楚。 '对于stackoverflow也很陌生，因此如果我不相关

最好
Alex

，我深表歉意

P.S：在下面的示例中，我重复了第一个示例，但是在实际的投资组合中，我正在执行每个img，并且每个幻灯片和拇指中的img数量都不同。

//Slide

var filterActive = false;

function nextSlide($slide) {
    var $container = $slide.parent('.slides'),
        slidesCount = $container.data('slides-count'),
        slideIndex = $slide.data('slide-index');

    console.log(slidesCount, slideIndex);

    if (slideIndex < slidesCount) {
        $slide.next('.slide').toggleClass('slide-active');
        $slide.toggleClass('slide-active');
    } else {
        $container.children().first().toggleClass('slide-active');
        $slide.toggleClass('slide-active');
    }
}

$('.slide').click(function() {
        nextSlide($(this));
    });

/* Style for index.html_Alexander Portfolio */
* { box-sizing:border-box;
}

body {
  display: block;
  font-size: 12pt; 4vmin;
  font-family:'Arial', Helvetica, Helvetica-Neue, sans-serif;
  text-rendering: optimizeLegibility;
  hyphens: none;
  text-transform: full-width;
  line-height: 1.1em;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-spacing: -1px; 
  letter-spacing: .775px;
  background: none;
  margin: 8px;
  -webkit-font-smoothing: antialiased;


}

article, div, main, header,p {
  border:none; 1px lightgrey;
}

::selection {
  background: #ADFF2F;
}
/*index page*/

.header {
  display: block;
  height:auto;
  width:23%;
  z-index: 1;
  position: fixed;
  line-height: normal;
  color: black;
  padding: 1em;
}

.header a {
  text-decoration: none;
  border-bottom: solid 1px;
  color: inherit;
}
.header a:hover {
  border-top: 1px solid;}


.projectS{
  display: block;
  width: 75%;
  float: right;
  margin-right: 15px;
  z-index: 0;
  margin-left: 1em
}

.project{
  display: grid;
  grid-template-areas: 
  "a b b";
  grid-template-columns:85px 2fr;
  margin-bottom:1rem;
  width:auto;
}

/*Slide show container*/
.slides {
  grid-area:b;  
  max-width:auto;
  width: auto;
  height: auto;
}


.project-image {
  max-height: 712px;
  max-width:100%;
}

/* Hide the images by default */
.slide{
  display: none;
  cursor: e-resize; 
  margin: 0 0 0.1em 0;
  object-fit: contain;

}

.slide-active {
  display: block;
}

.figureCaption {
 font-size: 9pt;
}

p {
  margin: 0 0 2em 0;
}

/*SideThumbs*/

.thumbs_sidebar {
  grid-area:a;
  display:block;
  height:712px; 
  width: auto;
  object-fit: contain;

}


/* Add a pointer when hovering over the thumbnail images */
.thumbs {
  cursor: pointer;
  display: block;
  margin: 1px;
  opacity: 0.6;
  max-height:100%;
  max-width: 100%;
}

.portrait {
  width: 97%;
}

.landscape{
  width: 97%;

}

/* Add a transparency effect for thumnbail images */
.thumbs:hover {
  opacity: 1;
}

<!--1Project-->
<article class="project"
<!--sideThumbs-->
<div class="thumbs_sidebar">
          <div class="portrait"><img class="thumbs" src="https://static.webshopapp.com/shops/032318/files/039751142/600x600x2/epic-armoury-goblin-mask-green-larp-mask.jpg" alt="Front Cover"></div>
          <div class="landscape"><img class="thumbs" src="https://www.eviltailors.com/17356-big_default/goblin-overlord-green.jpg" alt="inside spread"></div>
          <div class="landscape"><img class="thumbs" src="https://images-na.ssl-images-amazon.com/images/I/41g5KvkXMTL.jpg" alt="inside spread"></div>
          <div class="landscape"><img class="thumbs" src="https://partycity6.scene7.com/is/image/PartyCity/_pdp_sq_?$_1000x1000_$&$product=PartyCity/P178106" alt="inside spread"></div>                    
    </div>
    <!--slide-show-->
    <div class="slides" data-slides-count="4">
      <figure class="slide slide-active" data-slide-index="1">
        <img class="project-image" src="https://static.webshopapp.com/shops/032318/files/039751142/600x600x2/epic-armoury-goblin-mask-green-larp-mask.jpg">
      </figure>           
      <figure class="slide" data-slide-index="2">
        <img class="project-image" src="https://www.eviltailors.com/17356-big_default/goblin-overlord-green.jpg">
      </figure>
      <figure class="slide" data-slide-index="3">
        <img class="project-image" src="https://images-na.ssl-images-amazon.com/images/I/41g5KvkXMTL.jpg">
      </figure>
      <figure class="slide" data-slide-index="4">
        <img class="project-image" src="https://partycity6.scene7.com/is/image/PartyCity/_pdp_sq_?$_1000x1000_$&$product=PartyCity/P178106">
      </figure>
<!--description of the project-->
    <p class="description"><em>TitleHere</em>&emsp;&emsp;2018.&emsp;&emsp; Print on request &emsp;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
    </div>
</article>

<!--2Project-->
<article class="project"
<!--sideThumbs-->
<div class="thumbs_sidebar">
          <div class="portrait"><img class="thumbs" src="https://static.webshopapp.com/shops/032318/files/039751142/600x600x2/epic-armoury-goblin-mask-green-larp-mask.jpg" alt="Front Cover"></div>
          <div class="landscape"><img class="thumbs" src="https://www.eviltailors.com/17356-big_default/goblin-overlord-green.jpg" alt="inside spread"></div>
          <div class="landscape"><img class="thumbs" src="https://images-na.ssl-images-amazon.com/images/I/41g5KvkXMTL.jpg" alt="inside spread"></div>
          <div class="landscape"><img class="thumbs" src="https://partycity6.scene7.com/is/image/PartyCity/_pdp_sq_?$_1000x1000_$&$product=PartyCity/P178106" alt="inside spread"></div>                    
    </div>
    <!--slide-show-->
    <div class="slides" data-slides-count="4">
      <figure class="slide slide-active" data-slide-index="1">
        <img class="project-image" src="https://static.webshopapp.com/shops/032318/files/039751142/600x600x2/epic-armoury-goblin-mask-green-larp-mask.jpg">
      </figure>           
      <figure class="slide" data-slide-index="2">
        <img class="project-image" src="https://www.eviltailors.com/17356-big_default/goblin-overlord-green.jpg">
      </figure>
      <figure class="slide" data-slide-index="3">
        <img class="project-image" src="https://images-na.ssl-images-amazon.com/images/I/41g5KvkXMTL.jpg">
      </figure>
      <figure class="slide" data-slide-index="4">
        <img class="project-image" src="https://partycity6.scene7.com/is/image/PartyCity/_pdp_sq_?$_1000x1000_$&$product=PartyCity/P178106">
      </figure>
<!--description of the project-->
    <p class="description"><em>TitleHere</em>&emsp;&emsp;2018.&emsp;&emsp; Print on request &emsp;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
    </div>
</article>

<!--1Project-->
<article class="project"
<!--sideThumbs-->
<div class="thumbs_sidebar">
          <div class="portrait"><img class="thumbs" src="https://static.webshopapp.com/shops/032318/files/039751142/600x600x2/epic-armoury-goblin-mask-green-larp-mask.jpg" alt="Front Cover"></div>
          <div class="landscape"><img class="thumbs" src="https://www.eviltailors.com/17356-big_default/goblin-overlord-green.jpg" alt="inside spread"></div>
          <div class="landscape"><img class="thumbs" src="https://images-na.ssl-images-amazon.com/images/I/41g5KvkXMTL.jpg" alt="inside spread"></div>
          <div class="landscape"><img class="thumbs" src="https://partycity6.scene7.com/is/image/PartyCity/_pdp_sq_?$_1000x1000_$&$product=PartyCity/P178106" alt="inside spread"></div>                    
    </div>
    <!--slide-show-->
    <div class="slides" data-slides-count="4">
      <figure class="slide slide-active" data-slide-index="1">
        <img class="project-image" src="https://static.webshopapp.com/shops/032318/files/039751142/600x600x2/epic-armoury-goblin-mask-green-larp-mask.jpg">
      </figure>           
      <figure class="slide" data-slide-index="2">
        <img class="project-image" src="https://www.eviltailors.com/17356-big_default/goblin-overlord-green.jpg">
      </figure>
      <figure class="slide" data-slide-index="3">
        <img class="project-image" src="https://images-na.ssl-images-amazon.com/images/I/41g5KvkXMTL.jpg">
      </figure>
      <figure class="slide" data-slide-index="4">
        <img class="project-image" src="https://partycity6.scene7.com/is/image/PartyCity/_pdp_sq_?$_1000x1000_$&$product=PartyCity/P178106">
      </figure>
<!--description of the project-->
    <p class="description"><em>TitleHere</em>&emsp;&emsp;2018.&emsp;&emsp; Print on request &emsp;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
    </div>
</article>

<!--3Project-->
<article class="project"
<!--sideThumbs-->
<div class="thumbs_sidebar">
          <div class="portrait"><img class="thumbs" src="https://static.webshopapp.com/shops/032318/files/039751142/600x600x2/epic-armoury-goblin-mask-green-larp-mask.jpg" alt="Front Cover"></div>
          <div class="landscape"><img class="thumbs" src="https://www.eviltailors.com/17356-big_default/goblin-overlord-green.jpg" alt="inside spread"></div>
          <div class="landscape"><img class="thumbs" src="https://images-na.ssl-images-amazon.com/images/I/41g5KvkXMTL.jpg" alt="inside spread"></div>
          <div class="landscape"><img class="thumbs" src="https://partycity6.scene7.com/is/image/PartyCity/_pdp_sq_?$_1000x1000_$&$product=PartyCity/P178106" alt="inside spread"></div>                    
    </div>
    <!--slide-show-->
    <div class="slides" data-slides-count="4">
      <figure class="slide slide-active" data-slide-index="1">
        <img class="project-image" src="https://static.webshopapp.com/shops/032318/files/039751142/600x600x2/epic-armoury-goblin-mask-green-larp-mask.jpg">
      </figure>           
      <figure class="slide" data-slide-index="2">
        <img class="project-image" src="https://www.eviltailors.com/17356-big_default/goblin-overlord-green.jpg">
      </figure>
      <figure class="slide" data-slide-index="3">
        <img class="project-image" src="https://images-na.ssl-images-amazon.com/images/I/41g5KvkXMTL.jpg">
      </figure>
      <figure class="slide" data-slide-index="4">
        <img class="project-image" src="https://partycity6.scene7.com/is/image/PartyCity/_pdp_sq_?$_1000x1000_$&$product=PartyCity/P178106">
      </figure>
<!--description of the project-->
    <p class="description"><em>TitleHere</em>&emsp;&emsp;2018.&emsp;&emsp; Print on request &emsp;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
    </div>
</article>

<!--4Project-->
<article class="project"
<!--sideThumbs-->
<div class="thumbs_sidebar">
          <div class="portrait"><img class="thumbs" src="https://static.webshopapp.com/shops/032318/files/039751142/600x600x2/epic-armoury-goblin-mask-green-larp-mask.jpg" alt="Front Cover"></div>
          <div class="landscape"><img class="thumbs" src="https://www.eviltailors.com/17356-big_default/goblin-overlord-green.jpg" alt="inside spread"></div>
          <div class="landscape"><img class="thumbs" src="https://images-na.ssl-images-amazon.com/images/I/41g5KvkXMTL.jpg" alt="inside spread"></div>
          <div class="landscape"><img class="thumbs" src="https://partycity6.scene7.com/is/image/PartyCity/_pdp_sq_?$_1000x1000_$&$product=PartyCity/P178106" alt="inside spread"></div>                    
    </div>
    <!--slide-show-->
    <div class="slides" data-slides-count="4">
      <figure class="slide slide-active" data-slide-index="1">
        <img class="project-image" src="https://static.webshopapp.com/shops/032318/files/039751142/600x600x2/epic-armoury-goblin-mask-green-larp-mask.jpg">
      </figure>           
      <figure class="slide" data-slide-index="2">
        <img class="project-image" src="https://www.eviltailors.com/17356-big_default/goblin-overlord-green.jpg">
      </figure>
      <figure class="slide" data-slide-index="3">
        <img class="project-image" src="https://images-na.ssl-images-amazon.com/images/I/41g5KvkXMTL.jpg">
      </figure>
      <figure class="slide" data-slide-index="4">
        <img class="project-image" src="https://partycity6.scene7.com/is/image/PartyCity/_pdp_sq_?$_1000x1000_$&$product=PartyCity/P178106">
      </figure>
<!--description of the project-->
    <p class="description"><em>TitleHere</em>&emsp;&emsp;2018.&emsp;&emsp; Print on request &emsp;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
    </div>
</article>

<!--5Project-->
<article class="project"
<!--sideThumbs-->
<div class="thumbs_sidebar">
          <div class="portrait"><img class="thumbs" src="https://static.webshopapp.com/shops/032318/files/039751142/600x600x2/epic-armoury-goblin-mask-green-larp-mask.jpg" alt="Front Cover"></div>
          <div class="landscape"><img class="thumbs" src="https://www.eviltailors.com/17356-big_default/goblin-overlord-green.jpg" alt="inside spread"></div>
          <div class="landscape"><img class="thumbs" src="https://images-na.ssl-images-amazon.com/images/I/41g5KvkXMTL.jpg" alt="inside spread"></div>
          <div class="landscape"><img class="thumbs" src="https://partycity6.scene7.com/is/image/PartyCity/_pdp_sq_?$_1000x1000_$&$product=PartyCity/P178106" alt="inside spread"></div>                    
    </div>
    <!--slide-show-->
    <div class="slides" data-slides-count="4">
      <figure class="slide slide-active" data-slide-index="1">
        <img class="project-image" src="https://static.webshopapp.com/shops/032318/files/039751142/600x600x2/epic-armoury-goblin-mask-green-larp-mask.jpg">
      </figure>           
      <figure class="slide" data-slide-index="2">
        <img class="project-image" src="https://www.eviltailors.com/17356-big_default/goblin-overlord-green.jpg">
      </figure>
      <figure class="slide" data-slide-index="3">
        <img class="project-image" src="https://images-na.ssl-images-amazon.com/images/I/41g5KvkXMTL.jpg">
      </figure>
      <figure class="slide" data-slide-index="4">
        <img class="project-image" src="https://partycity6.scene7.com/is/image/PartyCity/_pdp_sq_?$_1000x1000_$&$product=PartyCity/P178106">
      </figure>
<!--description of the project-->
    <p class="description"><em>TitleHere</em>&emsp;&emsp;2018.&emsp;&emsp; Print on request &emsp;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
    </div>
</article>



</main>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="js/myScript.js"></script>
</body>
</html>