Как использовать jQuery плагин Responsive 3D Cover Flow Gallery несколько раз на странице?

Я скачал Responsive 3D Cover Flow Gallery с jqueryscript.net и хочу использовать этот ползунок 3 раза на своей странице, но когда я помещаю этот код 3 раза, он работает на той же кнопке:

Когда я нажимаю кнопку 2-го слайдера, она перемещает изображения первого слайдера. Я не знаю, как решить это. Пожалуйста, помогите мне.

Источник

1 ответ

добавить функцию JavaScript согласно вашему идентификатору

<!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <link rel="stylesheet" href="css/jquery-responsiveGallery.css">
    <script src="lib/modernizr.custom.js"></script>
    <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="src/jquery.responsiveGallery.js"></script>
    </head>

    <body>
    <div class="w-gallery">
      <section id="responsiveGallery-container" class="responsiveGallery-container">

        <a class="responsiveGallery-btn responsiveGallery-btn_prev" href="javascript:void(0);"></a>
        <a class="responsiveGallery-btn responsiveGallery-btn_next" href="javascript:void(0);"></a>

        <ul class="responsiveGallery-wrapper">
          <li class="responsiveGallery-item"> 
            <a href="#" class="responsivGallery-link">
              <img src="1.jpg" height="320" width="320" alt="" class="responsivGallery-pic">
            </a>
            <div class="w-responsivGallery-info">
              <h2 class="responsivGallery-name">Google</h2>
              <h3 class="responsivGallery-position">www.google.com</h3>
            </div>
          </li>

          <li class="responsiveGallery-item"> 
            <a href="#" class="responsivGallery-link">
              <img src="2.jpg" height="320" width="320" alt="" class="responsivGallery-pic">
            </a>
            <div class="w-responsivGallery-info">
              <h2 class="responsivGallery-name">Google</h2>
              <h3 class="responsivGallery-position">www.google.com</h3>
            </div>
          </li>

          <li class="responsiveGallery-item"> 
            <a href="#" class="responsivGallery-link">
              <img src="3.jpg" height="320" width="320" alt="" class="responsivGallery-pic">
            </a>
            <div class="w-responsivGallery-info">
              <h2 class="responsivGallery-name">Google</h2>
              <h3 class="responsivGallery-position">www.google.com</h3>
            </div>
          </li>
        </ul>


        <a class="responsiveGallery-btn responsiveGallery-btn_prev2" href="javascript:void(0);"></a>
        <a class="responsiveGallery-btn responsiveGallery-btn_next2" href="javascript:void(0);"></a>

        <ul class="responsiveGallery-wrapper2">
          <li class="responsiveGallery-item"> 
            <a href="#" class="responsivGallery-link">
              <img src="1.jpg" height="320" width="320" alt="" class="responsivGallery-pic">
            </a>
            <div class="w-responsivGallery-info">
              <h2 class="responsivGallery-name">Google</h2>
              <h3 class="responsivGallery-position">www.google.com</h3>
            </div>
          </li>

          <li class="responsiveGallery-item"> 
            <a href="#" class="responsivGallery-link">
              <img src="2.jpg" height="320" width="320" alt="" class="responsivGallery-pic">
            </a>
            <div class="w-responsivGallery-info">
              <h2 class="responsivGallery-name">Google</h2>
              <h3 class="responsivGallery-position">www.google.com</h3>
            </div>
          </li>

          <li class="responsiveGallery-item"> 
            <a href="#" class="responsivGallery-link">
              <img src="3.jpg" height="320" width="320" alt="" class="responsivGallery-pic">
            </a>
            <div class="w-responsivGallery-info">
              <h2 class="responsivGallery-name">Google</h2>
              <h3 class="responsivGallery-position">www.google.com</h3>
            </div>
          </li>
        </ul>


        <a class="responsiveGallery-btn responsiveGallery-btn_prev3" href="javascript:void(0);"></a>
        <a class="responsiveGallery-btn responsiveGallery-btn_next3" href="javascript:void(0);"></a>

        <ul class="responsiveGallery-wrapper3">
          <li class="responsiveGallery-item"> 
            <a href="#" class="responsivGallery-link">
              <img src="1.jpg" height="320" width="320" alt="" class="responsivGallery-pic">
            </a>
            <div class="w-responsivGallery-info">
              <h2 class="responsivGallery-name">Google</h2>
              <h3 class="responsivGallery-position">www.google.com</h3>
            </div>
          </li>

          <li class="responsiveGallery-item"> 
            <a href="#" class="responsivGallery-link">
              <img src="2.jpg" height="320" width="320" alt="" class="responsivGallery-pic">
            </a>
            <div class="w-responsivGallery-info">
              <h2 class="responsivGallery-name">Google</h2>
              <h3 class="responsivGallery-position">www.google.com</h3>
            </div>
          </li>

          <li class="responsiveGallery-item"> 
            <a href="#" class="responsivGallery-link">
              <img src="3.jpg" height="320" width="320" alt="" class="responsivGallery-pic">
            </a>
            <div class="w-responsivGallery-info">
              <h2 class="responsivGallery-name">Google</h2>
              <h3 class="responsivGallery-position">www.google.com</h3>
            </div>
          </li>
        </ul>


      </section>
    </div>

    <script type="text/javascript">
    $(function () {
        $('.responsiveGallery-wrapper').responsiveGallery({
          animatDuration: 400, // ms
          $btn_prev: $('.responsiveGallery-btn_prev'),
          $btn_next: $('.responsiveGallery-btn_next')
        });

        $('.responsiveGallery-wrapper2').responsiveGallery({
          animatDuration: 400, // ms
          $btn_prev: $('.responsiveGallery-btn_prev2'),
          $btn_next: $('.responsiveGallery-btn_next2')
        });
        $('.responsiveGallery-wrapper3').responsiveGallery({
          animatDuration: 400, // ms
          $btn_prev: $('.responsiveGallery-btn_prev3'),
          $btn_next: $('.responsiveGallery-btn_next3')
        });
    });

    </script>
    </body>
    </html>
Источник
Другие вопросы по тегам