Почему мой слайдер javascript ломается?

Question

Я пытался понять это в течение нескольких часов. Я не так хорош в JS. Надеюсь, кто-то умнее, чем я могу легко понять, в чем проблема. У меня есть вкладка, и каждый вид должен иметь ползунок. Ползунок работает на первой вкладке, но вторая вкладка ломается. Функция javascript не передается в последующие вкладки. URL для просмотра этого: http://goo.gl/yZISjS

Код для закладками и слайдера:

<!-- 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> 

Я переместил весь код вокруг несколько раз и не могу показаться, чтобы выяснить это. Любая помощь будет принята с благодарностью.

Answer 1

Вы в настоящее время вызова бегунок с этим:

$("#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 
    } 
    }); 

Это означает, что вы называете ползунок #slides элемента. Поскольку этот селектор является идентификатором, он применит только к первому, который он получит.

Итак, учитывая, что у вас несколько ползунков, вы должны использовать классы вместо этого.

$(".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 
    } 
    }); 

Затем удалите id="slides" в вашем HTML и добавить класс slides вместо этого.

Для записи вы можете использовать только один определенный идентификатор каждого документа>https://www.w3.org/TR/html401/struct/global.html#h-7.5.2

EDIT: второй выпуск

Теперь slidesJS не могут получить реальные размеры каждого из ползунков , в связи с использованием display: none; на вкладки:

/* 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; 
} 

Итак, вам нужно найти решение, чтобы замаскировать ваши ушки Wi thout использования display: none;

Вы могли бы попробовать что-то вроде:

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 */ 
} 

А затем, чтобы сделать вид:

/* 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 */ 
}