为什么我的JavaScript滑块坏了？

Question

I've tried to figure this out for hours now. I am not that great with JS. Hopefully someone smarter than I can easily see what the issue is here. I have a tabbed view, and each view should have a slider. The slider works in the first tab, but second tab it breaks. The javascript function is not being passed into the subsequent tabs. URL to view this: http://goo.gl/yZISjS

The code for the tabbed views and the slider:

    <!-- http://codepen.io/wallaceerick/pen/ojtal -->
<ul class="tabs">
    <li>
        <input type="radio" name="tabs" id="tab1" checked />
        <label for="tab1">Spring Wedding</label>
        <div id="tab-content1" class="tab-content ChefsPick">
          <div id="slides">
                            <div>
                                <div class="top">
                                    <img src="../wp-content/themes/wolfgang-puck/assets/img/summer_image1.jpg" alt="">
                                    </div>
                                    <div class="bottom">
                                        <div class="title">Summer Wedding: Hors D'oeuvres</div>
                                        <p>Sweet Maryland Crab Cakes with Herb Remoulade are absolutely scrumptious and the perfect spring wedding hors d'oeuvres.</p>
                                    </div>
                        </div>
                            <div>
                                <div class="top">
                                    <img src="../wp-content/themes/wolfgang-puck/assets/img/summer_image2.jpg" alt="">
                                    </div>
                                    <div class="bottom">
                                        <div class="title">Summer Wedding: Hors D'oeuvres</div>
                                        <p>Chinese Chicken Salad in Miniature Tortilla Cups is a bite size signature delight that can be butler passed or displayed on a buffet.</p>
                                    </div>
                        </div>
                            <div>
                                <div class="top">
                                    <img src="../wp-content/themes/wolfgang-puck/assets/img/summer_image3.jpg" alt="">
                                    </div>
                                    <div class="bottom">
                                    <div class="bottom">
                                        <div class="title">Summer Wedding: Hors D'oeuvres</div>
                                        <p>Vegetable Spring Rolls add the perfect amount of crunch to your wedding hors d'oeuvre selection.</p>
                                    </div>
                        </div>
        </div>
    </li>

    <li>
        <input type="radio" name="tabs" id="tab2" />
        <label for="tab2">Summer Wedding</label>
        <div id="tab-content2" class="tab-content ChefsPick">
          <div id="slides" style="overflow: hidden;">
                            <div>
                                <div class="top">
                                    <img src="../wp-content/themes/wolfgang-puck/assets/img/summer_image1.jpg" alt="">
                                    </div>
                                    <div class="bottom">
                                        <div class="title">Summer Wedding: Hors D'oeuvres</div>
                                        <p>Sweet Maryland Crab Cakes with Herb Remoulade are absolutely scrumptious and the perfect spring wedding hors d'oeuvres.</p>
                                    </div>
                        </div>
                            <div>
                                <div class="top">
                                    <img src="../wp-content/themes/wolfgang-puck/assets/img/summer_image2.jpg" alt="">
                                    </div>
                                    <div class="bottom">
                                        <div class="title">Summer Wedding: Hors D'oeuvres</div>
                                        <p>Chinese Chicken Salad in Miniature Tortilla Cups is a bite size signature delight that can be butler passed or displayed on a buffet.</p>
                                    </div>
                        </div>
                            <div>
                                <div class="top">
                                    <img src="../wp-content/themes/wolfgang-puck/assets/img/summer_image3.jpg" alt="">
                                    </div>
                                    <div class="bottom">
                                    <div class="bottom">
                                        <div class="title">Summer Wedding: Hors D'oeuvres</div>
                                        <p>Vegetable Spring Rolls add the perfect amount of crunch to your wedding hors d'oeuvre selection.</p>
                                    </div>
                        </div>
        </div>
    </li>
    <li>
        <input type="radio" name="tabs" id="tab3" />
        <label for="tab3">Fall Wedding</label>
        <div id="tab-content3" class="tab-content ChefsPick">
          <div id="slides">
                            <div>
                                <div class="top">
                                    <img src="../wp-content/themes/wolfgang-puck/assets/img/spring_image1.jpg" alt="">
                                    </div>
                                    <div class="bottom">
                                        <div class="title">Spring Wedding: Hors D'oeuvres</div>
                                        <p>Sweet Maryland Crab Cakes with Herb Remoulade are absolutely scrumptious and the perfect spring wedding hors d'oeuvres.</p>
                                    </div>
                        </div>
                            <div>
                                <div class="top">
                                    <img src="../wp-content/themes/wolfgang-puck/assets/img/spring_image2.jpg" alt="">
                                    </div>
                                    <div class="bottom">
                                        <div class="title">Spring Wedding: Hors D'oeuvres</div>
                                        <p>Chinese Chicken Salad in Miniature Tortilla Cups is a bite size signature delight that can be butler passed or displayed on a buffet.</p>
                                    </div>
                        </div>
                            <div>
                                <div class="top">
                                    <img src="../wp-content/themes/wolfgang-puck/assets/img/spring_image3.jpg" alt="">
                                    </div>
                                    <div class="bottom">
                                    <div class="bottom">
                                        <div class="title">Spring Wedding: Hors D'oeuvres</div>
                                        <p>Vegetable Spring Rolls add the perfect amount of crunch to your wedding hors d'oeuvre selection.</p>
                                    </div>
                        </div>
        </div>
    </li>
    <li>
        <input type="radio" name="tabs" id="tab4" />
        <label for="tab4">Winter Wedding</label>
        <div id="tab-content4" class="tab-content">
          <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla?</p>
        </div>
    </li>
    <li>
        <input type="radio" name="tabs" id="tab5" />
        <label for="tab5">The Classics</label>
        <div id="tab-content5" class="tab-content">
          <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla?</p>
        </div>
    </li>
</ul>

I've moved all the code around multiple times and can't seem to figure it out. Any help would be greatly appreciated.

Answer 1

You are currently calling your slider with this :

$("#slides").slidesjs({
    width: 480,
    height: 380,
    play: {
          active: true,
            // [boolean] Generate the play and stop buttons.
            // You cannot use your own buttons. Sorry.
          effect: "slide",
            // [string] Can be either "slide" or "fade".
          interval: 3000,
            // [number] Time spent on each slide in milliseconds.
          auto: false,
            // [boolean] Start playing the slideshow on load.
          swap: true,
            // [boolean] show/hide stop and play buttons
          pauseOnHover: false,
            // [boolean] pause a playing slideshow on hover
          restartDelay: 2500
            // [number] restart delay on inactive slideshow
    }
  });

It means you call a slider on #slides element. As this selector is an ID, it will only apply this to the first one it get.

So, considering you have multiple sliders, you should use classes instead.

$(".slides").slidesjs({
    width: 480,
    height: 380,
    play: {
          active: true,
            // [boolean] Generate the play and stop buttons.
            // You cannot use your own buttons. Sorry.
          effect: "slide",
            // [string] Can be either "slide" or "fade".
          interval: 3000,
            // [number] Time spent on each slide in milliseconds.
          auto: false,
            // [boolean] Start playing the slideshow on load.
          swap: true,
            // [boolean] show/hide stop and play buttons
          pauseOnHover: false,
            // [boolean] pause a playing slideshow on hover
          restartDelay: 2500
            // [number] restart delay on inactive slideshow
    }
  });

Then, remove id="slides" in your HTML and add the class slides instead.

For the record: you can use only one specific ID per document > https://www.w3.org/TR/html401/struct/global.html#h-7.5.2

EDIT : 2nd issue

Now, slidesJS can't get the real dimensions of each of your sliders, due to the use of display: none; on your tabs :

/* line 328, ../sass/style.scss */
html .wrapper.weddings .tabs .tab-content, body .wrapper.weddings .tabs .tab-content {
  z-index: 2;
  display: none;
  overflow: hidden;
  width: 838px;
  font-size: 17px;
  line-height: 25px;
  padding: 25px 25px 0 25px;
  position: absolute;
  top: 53px;
  min-height: 680px;
  border-right: 1px solid #BC9A95;
  border-left: 1px solid #BC9A95;
  border-bottom: 1px solid #BC9A95;
  left: 0;
  background: white;
}

So, you need to find a solution to mask your tabs without using display: none;

You could try something like :

html .wrapper.weddings .tabs .tab-content, body .wrapper.weddings .tabs .tab-content {
  z-index: 2;
  /*display: none; */
  overflow: hidden;
  width: 838px;
  font-size: 17px;
  line-height: 25px;
  padding: 25px 25px 0 25px;
  position: absolute;
  top: 53px;
  min-height: 680px;
  border-right: 1px solid #BC9A95;
  border-left: 1px solid #BC9A95;
  border-bottom: 1px solid #BC9A95;
  left: 0;
  background: white;
  /* vvvv there vvvv */
  opacity: 0;
  z-index: -1 /* hacky, but it works */ 
}

And then, to make it appear :

/* line 433, ../sass/style.scss */
html .wrapper.weddings .tabs [id^="tab"]:checked ~ [id^="tab-content"], body .wrapper.weddings .tabs [id^="tab"]:checked ~ [id^="tab-content"] {
  opacity: 1;
  z-index: 10; /* or whatever default value you set */
}