Slide Content Module
How do I make an slide content module?
What is a slide content module? How do you make a slide content module? This script and codes were developed by B. on 21 December 2022, Wednesday.
Slide Content Module - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Slide Content Module</title> <link rel="stylesheet" href="https://i.icomoon.io/public/temp/4d150ce58f/UntitledProject1/style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;
}
body { background-color: #ebebeb; color: #555559; font-size: 100%; font-weight: normal; font-style: normal; line-height: 1.5; margin: 0; -webkit-font-smoothing: antialiased;
}
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6 { font-size: 1em; font-weight: 400;
}
/* Browser Resets */
.flex-container a:active, .flexslider a:active, .flex-container a:focus, .flexslider a:focus { outline: none;
}
.slides, .flex-control-nav, .flex-direction-nav { margin: 0; padding: 0; list-style: none;
}
/* FlexSlider Necessary Styles
*********************************/
.flexslider { margin: 0; padding: 0;
}
.flexslider .slides > li { display: none; -webkit-backface-visibility: hidden;
}
.flexslider .slides img { width: 100%; display: block;
}
/* Hide the slides before the JS is loaded. Avoids image jumping */
.flex-pauseplay span { text-transform: capitalize;
}
/* Clearfix for the .slides element */
.slides:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;
}
html[xmlns] .slides { display: block;
}
* html .slides { height: 1%;
}
/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you * include js that eliminates this class on page load */
.no-js .slides > li:first-child { display: block;
}
/* FlexSlider Default Theme
*********************************/
.flexslider { margin: 0 0 60px; background-color: white; position: relative; zoom: 1;
}
.flex-viewport { max-height: 2000px; -moz-transition: all 1s ease; -o-transition: all 1s ease; -webkit-transition: all 1s ease; transition: all 1s ease;
}
.loading .flex-viewport { max-height: 300px;
}
.flexslider .slides { zoom: 1;
}
.carousel li { margin-right: 5px;
}
/* Direction Nav */
.flex-direction-nav { *height: 0;
}
.flex-direction-nav a { width: 30px; height: 30px; margin: -20px 0 0; display: block; position: absolute; top: 50%; z-index: 10; cursor: pointer; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease;
}
.flex-direction-nav a.flex-next { background-position: 100% 0; right: -36px;
}
.flex-direction-nav a.flex-prev { left: -36px;
}
.flexslider:hover .flex-next { opacity: 0.8; right: 5px;
}
.flexslider:hover .flex-prev { opacity: 0.8; left: 5px;
}
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover { opacity: 1;
}
.flex-direction-nav .flex-disabled { opacity: 0.3 !important; filter: alpha(opacity=30); cursor: default;
}
/* Control Nav */
.flex-control-nav { width: 100%; position: absolute; bottom: -40px; text-align: center;
}
.flex-control-nav li { margin: 0 6px; display: inline-block; zoom: 1; *display: inline;
}
.flex-control-paging li { display: inline-block; zoom: 1; width: 0.750em; height: 0.750em; background-color: white; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px;
}
.flex-control-paging li a { width: 0.5em; height: 0.5em; margin: 0.125em; display: block; background-color: white; cursor: pointer; text-indent: -9999px; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px;
}
.flex-control-paging li a:hover { background-color: #dfc9a2;
}
.flex-control-paging li a.flex-active { background-color: #dfc9a2; cursor: default;
}
.flex-control-thumbs { margin: 5px 0 0; position: static; overflow: hidden;
}
.flex-control-thumbs li { width: 25%; float: left; margin: 0;
}
.flex-control-thumbs img { width: 100%; display: block; opacity: .7; cursor: pointer;
}
.flex-control-thumbs img:hover { opacity: 1;
}
.flex-control-thumbs .flex-active { opacity: 1; cursor: default;
}
@media screen and (max-width: 860px) { .flex-direction-nav .flex-prev { opacity: 1; left: 0; } .flex-direction-nav .flex-next { opacity: 1; right: 0; }
}
.slider--cs-a { background-color: white;
}
.slide__content { background-color: transparent; max-width: 60em; margin: 0 auto; padding: 2em 0; text-align: center;
}
.slide__content .slides { border-bottom: 1px solid #dfc9a2; padding-bottom: 6em;
}
.slide__content p { font-size: 1.125em; letter-spacing: 0.031em; max-width: 37.500em; margin: 0 auto;
}
.slide__content a { color: #dfc9a2; text-decoration: none;
}
.slide__content .flex-direction-nav { font-size: 1.125em;
}
.slide__content .flex-control-paging li { background-color: #ebebeb;
}
.slide__content .flex-control-paging li a { background-color: #ebebeb;
}
.slide__content .flex-control-paging li a:hover { background-color: #dfc9a2;
}
.slide__content .flex-control-paging li a.flex-active { background-color: #dfc9a2;
}
.slide__content .flex-control-nav { bottom: 3em;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="slider slider--cs-a">
<div class="flexslider slide slide__content"> <ul class="slides"> <li> <p>A Dermalogica facial is so much more than<br> a great way to relax. <a href="#">Contact our therapist</a> today!</p> </li> <li> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut massa lorem, eleifend vitae rhoncus viverra, hendrerit ac tellus.</p> </li> </ul> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://flexslider.woothemes.com/js/jquery.flexslider.js'></script> <script src="js/index.js"></script>
</body>
</html>
Slide Content Module - Script Codes CSS Codes
html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;
}
body { background-color: #ebebeb; color: #555559; font-size: 100%; font-weight: normal; font-style: normal; line-height: 1.5; margin: 0; -webkit-font-smoothing: antialiased;
}
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6 { font-size: 1em; font-weight: 400;
}
/* Browser Resets */
.flex-container a:active, .flexslider a:active, .flex-container a:focus, .flexslider a:focus { outline: none;
}
.slides, .flex-control-nav, .flex-direction-nav { margin: 0; padding: 0; list-style: none;
}
/* FlexSlider Necessary Styles
*********************************/
.flexslider { margin: 0; padding: 0;
}
.flexslider .slides > li { display: none; -webkit-backface-visibility: hidden;
}
.flexslider .slides img { width: 100%; display: block;
}
/* Hide the slides before the JS is loaded. Avoids image jumping */
.flex-pauseplay span { text-transform: capitalize;
}
/* Clearfix for the .slides element */
.slides:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;
}
html[xmlns] .slides { display: block;
}
* html .slides { height: 1%;
}
/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you * include js that eliminates this class on page load */
.no-js .slides > li:first-child { display: block;
}
/* FlexSlider Default Theme
*********************************/
.flexslider { margin: 0 0 60px; background-color: white; position: relative; zoom: 1;
}
.flex-viewport { max-height: 2000px; -moz-transition: all 1s ease; -o-transition: all 1s ease; -webkit-transition: all 1s ease; transition: all 1s ease;
}
.loading .flex-viewport { max-height: 300px;
}
.flexslider .slides { zoom: 1;
}
.carousel li { margin-right: 5px;
}
/* Direction Nav */
.flex-direction-nav { *height: 0;
}
.flex-direction-nav a { width: 30px; height: 30px; margin: -20px 0 0; display: block; position: absolute; top: 50%; z-index: 10; cursor: pointer; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease;
}
.flex-direction-nav a.flex-next { background-position: 100% 0; right: -36px;
}
.flex-direction-nav a.flex-prev { left: -36px;
}
.flexslider:hover .flex-next { opacity: 0.8; right: 5px;
}
.flexslider:hover .flex-prev { opacity: 0.8; left: 5px;
}
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover { opacity: 1;
}
.flex-direction-nav .flex-disabled { opacity: 0.3 !important; filter: alpha(opacity=30); cursor: default;
}
/* Control Nav */
.flex-control-nav { width: 100%; position: absolute; bottom: -40px; text-align: center;
}
.flex-control-nav li { margin: 0 6px; display: inline-block; zoom: 1; *display: inline;
}
.flex-control-paging li { display: inline-block; zoom: 1; width: 0.750em; height: 0.750em; background-color: white; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px;
}
.flex-control-paging li a { width: 0.5em; height: 0.5em; margin: 0.125em; display: block; background-color: white; cursor: pointer; text-indent: -9999px; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px;
}
.flex-control-paging li a:hover { background-color: #dfc9a2;
}
.flex-control-paging li a.flex-active { background-color: #dfc9a2; cursor: default;
}
.flex-control-thumbs { margin: 5px 0 0; position: static; overflow: hidden;
}
.flex-control-thumbs li { width: 25%; float: left; margin: 0;
}
.flex-control-thumbs img { width: 100%; display: block; opacity: .7; cursor: pointer;
}
.flex-control-thumbs img:hover { opacity: 1;
}
.flex-control-thumbs .flex-active { opacity: 1; cursor: default;
}
@media screen and (max-width: 860px) { .flex-direction-nav .flex-prev { opacity: 1; left: 0; } .flex-direction-nav .flex-next { opacity: 1; right: 0; }
}
.slider--cs-a { background-color: white;
}
.slide__content { background-color: transparent; max-width: 60em; margin: 0 auto; padding: 2em 0; text-align: center;
}
.slide__content .slides { border-bottom: 1px solid #dfc9a2; padding-bottom: 6em;
}
.slide__content p { font-size: 1.125em; letter-spacing: 0.031em; max-width: 37.500em; margin: 0 auto;
}
.slide__content a { color: #dfc9a2; text-decoration: none;
}
.slide__content .flex-direction-nav { font-size: 1.125em;
}
.slide__content .flex-control-paging li { background-color: #ebebeb;
}
.slide__content .flex-control-paging li a { background-color: #ebebeb;
}
.slide__content .flex-control-paging li a:hover { background-color: #dfc9a2;
}
.slide__content .flex-control-paging li a.flex-active { background-color: #dfc9a2;
}
.slide__content .flex-control-nav { bottom: 3em;
}
Slide Content Module - Script Codes JS Codes
$(window).load(function(){ $('.slide__content').flexslider({ prevText: '<span class="icon-arrow-left"><</span>', nextText: '<span class="icon-arrow-right">></span>', animation: 'slide' });
});
Developer | B. |
Username | wearebold |
Uploaded | December 21, 2022 |
Rating | 3 |
Size | 6,634 Kb |
Views | 24,288 |
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!
Name | Size |
Simple Push Menu | 3,455 Kb |
Center the Unknow | 2,434 Kb |
Simple CSS3 Button | 2,571 Kb |
Alerts | 2,726 Kb |
Snap.svg Mask faces | 3,545 Kb |
Pure CSS3 Batman Logo | 4,527 Kb |
Polaroid | 4,152 Kb |
Simple Accordion | 3,683 Kb |
Simple Preloader | 3,265 Kb |
Pure CSS3 Robot with JS clocks | 7,759 Kb |
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!
Name | Username | Size |
JQuery AJAX reddit Exercise | Btholt | 1,777 Kb |
Tic Tac Toe | Volv | 4,862 Kb |
404 Error Page | WebSonick | 3,203 Kb |
Animated Vertical CSS3 Menu Black | MaCeLMp4 | 2,750 Kb |
Blog Concept 2 | JGallardo | 2,994 Kb |
This in constructor context | _shree33 | 1,718 Kb |
DFF Website | Hawcubite | 10,123 Kb |
Delete Hover | Chungman93 | 2,557 Kb |
JavaScript constructors | Simboonlong | 2,415 Kb |
CSS Link Zoom On Click | Bryce | 1,960 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!