Swipeshow demo

Developer
Rico Sta. Cruz
Size
2,133 Kb
Views
4,048
  1. Swipeshow demo Previews
  2. Swipeshow demo HTML Codes
  3. Swipeshow demo CSS Codes
  4. Swipeshow demo JS Codes

How do I make an swipeshow demo?

What is a swipeshow demo? How do you make a swipeshow demo? This script and codes were developed by Rico Sta. Cruz on 19 January 2023, Thursday.

Swipeshow demo Previews
IQ Test

Swipeshow demo - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Swipeshow demo</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://cdn.rawgit.com/rstacruz/swipeshow/v0.10.9/jquery.swipeshow.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='my-gallery swipeshow'> <div class='slides'> <div class='slide my-image -one'>Hello</div> <div class='slide my-image -two'>It's me</div> </div> <div class='dots'></div>
</div> <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script>
<script src='https://ricostacruz.com/swipeshow/jquery.swipeshow.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Swipeshow demo - Script Codes CSS Codes

body { max-width: 800px; margin: 24px auto;
}
.my-gallery { width: 100%; height: 200px; overflow: hidden;
}
.my-image { background: #999; line-height: 200px; color: #fff; text-align: center;
}
.my-image.-two { background: #888;
}
.swipeshow .dots,
.swipeshow .dot-item,
.swipeshow .dot { margin: 0; padding: 0; list-style: none; border: 0; background: transparent;
}
.swipeshow > .dots { position: absolute; bottom: 5px; left: 0; right: 0; text-align: center; list-style: none; font-size: 0;
}
.swipeshow .dot-item { list-style: none; display: inline-block; width: 18px; height: 20px; line-height: 20px; text-align: center; cursor: pointer;
}
.swipeshow .dot { display: inline-block; width: 5px; height: 5px; border-radius: 6px; font-size: 0; background-color: rgba(0, 0, 0, 0.5);
}
.no-touch .dot-item:hover .dot { background-color: rgba(255, 255, 255, 0.2);
}
.swipeshow .dot-item:active .dot,
.swipeshow .dot-item.active .dot { background-color: white;
}

Swipeshow demo - Script Codes JS Codes

$(function () { $(".my-gallery").swipeshow({ mouse: true, interval: 2000 });
})
Swipeshow demo - Script Codes
Swipeshow demo - Script Codes
Home Page Home
Developer Rico Sta. Cruz
Username rstacruz
Uploaded January 19, 2023
Rating 3
Size 2,133 Kb
Views 4,048
Do you need developer help for Swipeshow demo?

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!

Rico Sta. Cruz (rstacruz) Script Codes
Name
Diff-based typing test
Waves
Cookie notice snippet
Offgrid images
Daily UI 6
A Pen by Rico Sta. Cruz
Styled file input
CSS pie graphs
Decca example
Text in a border
Create amazing video scripts 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!