Swiping in Web Pages using dragend.js

Swiping:

Swiping is the most expected technology implementation in web applications soon, since people are very familiar and very comfortable with swiping in mobiles and they are not liking much to click everything. Already top shopping and ticket booking systems are in the beta phase swiping web applications/web pages development to make their site more user interactive.

Today we are going to see how to implement swiping in web pages using dragend.js.

 

Requirements:

1. jQuery JS

2. Dragend JS

3. Bootstrap CSS

 

 

 

 

HTML Source code:

[html]
<div id="demo">
<ul>
<li class="first dragend-page">

<div id="device">
<div id="note_info">Swipe from Left to Right or from Right to Left </div>
<div id="device_name">iPhone 4s [3.5 inch]</div>
<iframe width="320px" height="480px" style="margin-left:400px;" src="http://ngdeveloper.com"></iframe>

</div>
</li>
<li class="dragend-page">

<div id="device">
<div id="note_info">Swipe from Left to Right or from Right to Left </div>
<div id="device_name">iPhone 5,5S [4 inch]</div>
<iframe width="320px" height="568px" style="margin-left:400px;" src="http://ngdeveloper.com"></iframe>

</div>
</li>

<li class="first dragend-page">
<div id="device">
<div id="note_info">Swipe from Left to Right or from Right to Left </div>
<div id="device_name">iPhone 6 [4.7 inch]</div>
<iframe width="375px" height="667px" style="margin-left:350px;" src="http://ngdeveloper.com"></iframe>

</div>
</li>
<li class="dragend-page">
<div id="device">
<div id="note_info">Swipe from Left to Right or from Right to Left </div>
<div id="device_name">iPhone 6 Plus [5.5 inch]</div>
<iframe width="414px" height="736px" style="margin-left:350px;" src="http://ngdeveloper.com"></iframe>

</div>
</li>
<li class="first dragend-page">
<div id="device">
<div id="note_info">Swipe from Left to Right or from Right to Left </div>
<div id="device_name">iPad, iPad mini, iPad 2,iPad Air, iPad Mini Retina [9.7 inch]</div>
<iframe width="1024px" height="768px" style="margin-left:70px;" src="http://ngdeveloper.com"></iframe>
</div>

</li>

<li class="dragend-page">
<div id="device">
<div id="note_info">Swipe from Left to Right or from Right to Left </div>
<div id="device_name">Desktop View </div>

<iframe width="1366px" height="768px" src="http://ngdeveloper.com"></iframe>

</div>
</li>

</ul>
</div>

[/html]

Each li is one web page and swiping in web pages between the li’s.

 

Swiping in web pages Source Code:

[html]

Once the swiping ends then it will initialize to 0 to display the first li at the end of the last li swipe.

<script>

/*This function calls the first li after the last li again*/
/*if this function removed user can navigate only in one direction (left to right).*/
$(function() {

var firstChild = $("#demo li:first-child").clone(),
lastChild = $("#demo li:last-child").clone(),
container = $("#demo ul");

firstChild.appendTo(container);
lastChild.prependTo(container);

$("#demo").dragend({
jumpToPage: 2,
onSwipeEnd: function() {
var first = this.pages[0],
last = this.pages[this.pages.length – 1];

if (first === this.activeElement) {
this.jumpToPage(this.pages.length – 1 );
}

if (last === this.activeElement) {
this.jumpToPage(2);
}

},
afterInitialize: function() {
this.container.style.visibility = "visible";
}
});
});
</script>

[/html]