Converting Flipbook Slider Make it Loop + If it is possible to make it responsive

452 Views Asked by At

I'm a newbie in Javascripting so plase bear with me anyway here is my question:

Here is the site in question : http://jemmarieann.com/flipbookslideshow/marcbuils-Flippage-c46f6d1/exemples/exemples3.html

So I used this premade Jquery: http://marcbuils.github.io/Flippage/

  1. The problem is to turn a page you must click the image I want it so the images flip automatically every 3-5 seconds or so.

    What I was able to do was automatically turn page 1 to page 2 but nothing happens after that. I'm pretty sure I'm missing a lot since I'm a newbie.

  2. I was able to make it flip automatically with the help of dreamweiver but it stops when it reaches the last image how do I make it go back to the first image and loop?

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

Here is the body code

<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

There are 1 best solutions below

7
On

I have checked the plugin and its functionality, i guess you need to auto trigger the next option automatically.

Im doing it this way

setTimeout(check, 1000); // trigget check function every 1 sec
function check()
{
    $('#exemples').trigger('next');
}