Преобразование слайдера Flipbook Сделайте это Loop + Если это возможно, чтобы сделать его отзывчивым

Я новичок в Javascripting, так что, пожалуйста, терпите меня, вот мой вопрос:

Вот этот сайт: http://jemmarieann.com/flipbookslideshow/marcbuils-Flippage-c46f6d1/exemples/exemples3.html

Поэтому я использовал этот готовый Jquery: http://marcbuils.github.io/Flippage/

  1. Проблема в том, чтобы перевернуть страницу, вы должны нажать на изображение, которое мне нужно, чтобы изображения переворачивались автоматически каждые 3-5 секунд или около того.

    Я смог автоматически перевернуть страницу 1 на страницу 2, но после этого ничего не произошло. Я почти уверен, что много скучаю, так как я новичок.

  2. Мне удалось автоматически перевернуть изображение с помощью dreamweiver, но оно останавливается, когда оно достигает последнего изображения. Как мне вернуться к первому изображению и выполнить цикл?

         <script type="text/javascript">



    setInterval(check, 1000); // trigger check function every 1 sec

    function check()

   {

      var $nextItem = $('.exemples.active')
      .trigger('next')
      .removeClass('active')
      .next('.exemples');


   if ($nextItem.length == 0) $nextItem = $('.exemples').first(); 

       $nextItem.trigger('next').addClass('active');

    };



   </script>

Вот код тела

<body>
<div>
<div id="wrapper">
<div class="exemples">
    <div><img src="img/1.jpg" style="margin-left: 0px;" /></div>
    <div><img src="img/1.jpg" style="margin-left: -683px;" /></div>
    <div><img src="img/FA_WEB1B.jpg" style="margin-left: 0px;" /></div>
    <div><img src="img/FA_WEB1B.jpg" style="margin-left: -683px;" /></div>
    <div><img src="img/2.jpg" style="margin-left: 0px;" /></div>
    <div><img src="img/2.jpg" style="margin-left: -683px;" /></div>
    <div><img src="img/front.jpg" style="margin-left: 0px;" /></div>
    <div><img src="img/front.jpg" style="margin-left: -683px;" /></div>
    <div><img src="img/3.jpg" style="margin-left: 0px;" /></div>
    <div><img src="img/3.jpg" style="margin-left: -683px;" /></div>
    <div><img src="img/lopulent5.jpg" style="margin-left: 0px;" /></div>
    <div><img src="img/lopulent5.jpg" style="margin-left: -683px;" /></div>
  </div>
  </div>
            <div><a href="#" onClick="$('.exemples:eq(0)').trigger('previous'); return false;">Previous</a> - <a href="#" onClick="javascript:$('.exemples:eq(0)').trigger('next'); return false;">Next</a></div>
        </div>  
</body>
Источник

1 ответ

Я проверил плагин и его функциональность, думаю, вам нужно автоматически запустить следующую опцию.

Я делаю это так

setTimeout(check, 1000); // trigget check function every 1 sec
function check()
{
    $('#exemples').trigger('next');
}
Источник
Другие вопросы по тегам