Swipe View

Developer
Thomas Hare
Size
2,225 Kb
Views
30,360
  1. Swipe View Previews
  2. Swipe View HTML Codes
  3. Swipe View CSS Codes
  4. Swipe View JS Codes

How do I make an swipe view?

What is a swipe view? How do you make a swipe view? This script and codes were developed by Thomas Hare on 15 November 2022, Tuesday.

Swipe View Previews
IQ Test

Swipe View - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Swipe View</title> <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Arvo:400,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.2.7/css/swiper.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Swiper -->
<div class="swiper-container"> <div class="swiper-wrapper"> <div class="first swiper-slide">Page 1</div> <div class="second swiper-slide">Page 2</div> <div class="third swiper-slide">Page 3</div> </div> <div class="swiper-button-next swiper-button-white">next</div> <div class="swiper-button-prev swiper-button-white">prev</div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.2.7/js/swiper.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Swipe View - Script Codes CSS Codes

body { background: #eee; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; color:#000; margin: 0; padding: 0;
}
.swiper-container { width: 100wh; height: 100vh;
}
.swiper-slide { text-align: center; font-size: 18px; background: #fff; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center;
}
.first { background-color: #666; color: #EEE;
}
.second { background-color: #6EE; color: #666;
}
.third { background-color: #60F; color: #999;
}
.swiper-button-prev, .swiper-button-next { background-position: top; background-size: 1rem; bottom: 1rem; height: auto; padding-top: 2rem; position: absolute; top: auto;
}

Swipe View - Script Codes JS Codes

var swiper = new Swiper('.swiper-container', { pagination: '.swiper-pagination', paginationClickable: '.swiper-pagination', nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', spaceBetween: 30, effect: 'fade' });
Swipe View - Script Codes
Swipe View - Script Codes
Home Page Home
Developer Thomas Hare
Username tommyhare
Uploaded November 15, 2022
Rating 3
Size 2,225 Kb
Views 30,360
Do you need developer help for Swipe View?

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!

Thomas Hare (tommyhare) Script Codes
Name
Ashley Fitness
Space Ashley
Responsive Sidebar
Material UI
Micropush
Random Drawing
Table Classes
Stock Card
The Initiator
Bootstrap Form Fun
Create amazing love letters 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!