Demo - swipe.js

Developer
Juan Gallardo
Size
3,351 Kb
Views
34,408
  1. Demo - swipe.js Previews
  2. Demo - swipe.js HTML Codes
  3. Demo - swipe.js CSS Codes
  4. Demo - swipe.js JS Codes

How do I make an demo - swipe.js?

Requirements: * jQuery recommended * Swipe.jsInstructions * Add jQuery before the closing body tag * Add Swipe.js after jQuery. What is a demo - swipe.js? How do you make a demo - swipe.js? This script and codes were developed by Juan Gallardo on 18 August 2022, Thursday.

Demo - swipe.js Previews
IQ Test

Demo - swipe.js - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Demo - swipe.js</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Demo of Swipe.js</h1>
<div class="img-container"> <div style='text-align:center;padding-top:20px;'> <button onclick='mySwipe.prev()'>prev</button> <button onclick='mySwipe.next()'>next</button> </div> <div id='slider' class='swipe'> <div class='swipe-wrap'> <!-- Image 1 --> <div> <p><img src="http://lorempixel.com/300/300/city"></p> <p>Bacon ipsum dolor sit amet chicken prosciutto shankle ham. Doner filet mignon strip steak kielbasa, frankfurter meatloaf prosciutto. Rump capicola flank, filet mignon sausage fatback cow landjaeger ribeye turducken. Ground round pancetta turkey venison fatback. Boudin cow swine drumstick frankfurter. Pig tenderloin ground round tri-tip, ribeye sausage leberkas ham hock pork loin.</p> </div> <!-- Image 2 --> <div> <p><img src="http://lorempixel.com/300/300/transport"</p> <p>Cow ham spare ribs, shank leberkas pancetta meatball turkey sirloin short loin pork belly beef ribs. Jerky beef ribs ribeye meatball doner. Brisket tenderloin tail shoulder, meatloaf short ribs prosciutto chuck. Pig shoulder leberkas meatloaf sausage tenderloin kielbasa. Doner biltong pork boudin pastrami, corned beef sausage swine filet mignon short ribs kevin turkey ground round shoulder pig.</p> </div> <!-- Image 3 --> <div> <p><img src="http://lorempixel.com/300/300/technics"></p> <p>Landjaeger andouille fatback brisket. Hamburger ground round short ribs sirloin kevin andouille ham tongue chuck short loin pancetta pork belly. Hamburger prosciutto ham hock short ribs ball tip tongue salami cow ham short loin flank biltong fatback filet mignon frankfurter. Short ribs frankfurter tri-tip ham short loin. Strip steak shoulder flank chuck tongue, swine shankle boudin chicken bacon rump.</p> </div> <!-- Image 3 --> <div> <p><img src="http://lorempixel.com/300/300/sports"></p> <p>Pork loin ham t-bone frankfurter prosciutto pancetta, drumstick kielbasa. Pig shank shoulder biltong bacon short loin. Biltong meatball chuck shankle leberkas spare ribs, pork belly doner bacon turducken. Strip steak short loin venison, prosciutto chuck shankle doner rump spare ribs frankfurter capicola. T-bone ham hock turducken pork chop. Prosciutto ham hock rump, boudin porchetta beef ground round kielbasa frankfurter pastrami fatback.</p> </div> <!-- Image 4 --> <div> <p><img src="http://lorempixel.com/300/300/fashion"></p> <p>Capicola frankfurter jerky, strip steak jowl meatloaf pastrami filet mignon shoulder bacon. Kielbasa filet mignon doner pig jowl ham hock swine chicken salami meatball tongue. Turducken pastrami pancetta shoulder ball tip chuck spare ribs boudin tri-tip landjaeger fatback biltong salami chicken. Shoulder sirloin t-bone ribeye kevin. Venison short loin strip steak, leberkas tail pig chicken ball tip ham hock jowl pancetta sirloin. Short ribs cow rump, chicken strip steak.</p> </div> <!-- Image 5 --> <div> <p><img src="http://lorempixel.com/300/300/cats"></p> <p>Sausage frankfurter turkey shank, t-bone pork belly salami ham corned beef pastrami. Flank kielbasa boudin pig, chuck venison fatback beef sirloin jerky meatloaf spare ribs doner t-bone pork belly. Strip steak chuck porchetta beef. Frankfurter corned beef short loin, brisket porchetta boudin leberkas beef ribs turkey shoulder landjaeger biltong sausage pork belly. Jerky meatloaf cow, boudin pastrami ball tip short ribs filet mignon.</p> </div> </div> </div> <!--/ #slider -->
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/swipe/2.0/swipe.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Demo - swipe.js - Script Codes CSS Codes

/* From swipe.js demo */
.swipe { overflow: hidden; visibility: hidden; position: relative;
}
.swipe-wrap { overflow: hidden; position: relative;
}
.swipe-wrap > div { float:left; width:100%; position: relative;
}
/* Demo */
.img-container { width: 300px; background-color: #111;
}
.swipe-wrap p { margin: 0 auto; width: 90%;
}
p img { max-width: 100%; /* this keeps the image within the grid */
}
#slider p { color: #fff;
}

Demo - swipe.js - Script Codes JS Codes

window.mySwipe = new Swipe(document.getElementById('slider'), { startSlide: 0, speed: 1200, auto: 3000, continuous: true, disableScroll: false, stopPropagation: false, callback: function(index, elem) {}, transitionEnd: function(index, elem) {}
});
Demo - swipe.js - Script Codes
Demo - swipe.js - Script Codes
Home Page Home
Developer Juan Gallardo
Username JGallardo
Uploaded August 18, 2022
Rating 3
Size 3,351 Kb
Views 34,408
Do you need developer help for Demo - swipe.js?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Juan Gallardo (JGallardo) Script Codes
Name
Foundation - Sample Header
Testimonial - Concept 1
Working demo of Headroom.js
Fixed Header when scrolling
International Sort
Plane Blog - Masonry Demo
A Pen by Juan Gallardo
Saturn Grid System - Prototype1
Template - iPad Air - Horizontal
Blog Concept 2
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!