Toying With Flexslider

Size
5,052 Kb
Views
16,192

How do I make an toying with flexslider?

Messing with flex callbacks, transitions, etc..etc. What is a toying with flexslider? How do you make a toying with flexslider? This script and codes were developed by Alex Rodrigues on 13 August 2022, Saturday.

Toying With Flexslider Previews

Toying With Flexslider - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Toying With Flexslider</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrap">
<div class="flexslider loading"> <ul class="slides"> <li> <img src="http://37.media.tumblr.com/2d3f0d31590dbd09283e969bf8511a71/tumblr_naj3hqGqeh1st5lhmo1_1280.jpg" /> </li> <li> <img src="http://37.media.tumblr.com/0da1e786ac7997b82b072c30b32092ca/tumblr_naj3n71TcT1st5lhmo1_1280.jpg" /> </li> <li> <img src="http://37.media.tumblr.com/2d3f0d31590dbd09283e969bf8511a71/tumblr_naj3hqGqeh1st5lhmo1_1280.jpg" /> </li> </ul>
</div>
</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/flexslider/2.2.1/jquery.flexslider.js'></script> <script src="js/index.js"></script>
</body>
</html>

Toying With Flexslider - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Droid+Serif:400,400italic);
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
body { margin: 0; font-family: 'Droid Serif'; background: #efefef;
}
.wrap { width: 65%; margin: 2em auto; border: 5px solid #fff; box-shadow: 0px 0px 10px -2px #bebebe;
}
/* 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; overflow-x: hidden; -webkit-transition-delay: .5s; -moz-transition-delay: .5s; -o-transition-delay: .5s; transition-delay: .5s;
}
.flexslider .slides > li { -webkit-backface-visibility: hidden; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; -webkit-transition-delay: .25s; -moz-transition-delay: .25s; -o-transition-delay: .25s; transition-delay: .25s;
}
.flexslider .slides > li.flex-active-slide { margin: 0; -webkit-transition-delay: 0; -moz-transition-delay: 0; -o-transition-delay: 0; transition-delay: 0;
}
.flexslider.transit .slides > li.flex-active-slide { margin: 0 4em 0 2em;
}
/* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img { width: 100%; display: block;
}
.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%;
}
/* FlexSlider Default Theme
*********************************/
.flexslider { width: 100%; background: #fff; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); -o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); zoom: 1; /* MY STYLES */ /* &:after ,&:before { display: block; content: " "; position: absolute; left: 0; height:100%; width: 10%; background: rgba(0, 0, 0, 0.5); top: 0; &:hover { background: rgba(0, 0, 0, 0.9); } } &:before { left: auto; right: 0; z-index: 999; }*/
}
.flex-viewport { overflow: visible !important; width: 80%; margin: 0 auto; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease;
}
.flexslider .slides { zoom: 1;
}
.carousel li { margin-right: 5px;
}
/* DIRECTIONAL NAV */
a.flex-next, a.flex-prev { position: absolute; right: 0; display: table-cell; width: 10%; padding: 20% 0; text-align: center; vertical-align: middle; bottom: 0; top: 0; z-index: 1000; color: #fff; font-size: 1.5em; background: rgba(0, 0, 0, 0.5); text-decoration: none; cursor: pointer; -webkit-transition: all .35s linear; -moz-transition: all .35s linear; -ms-transition: all .35s linear; -o-transition: all .35s linear; transition: all .35s linear;
}
a.flex-next:hover, a.flex-prev:hover { background: rgba(0, 0, 0, 0.25);
}
a.flex-prev { right: auto; left: 0;
}
/* Control Nav */
.flex-control-nav { width: 100%; position: absolute; bottom: 1em; text-align: center;
}
.flex-control-nav li { margin: 0 6px; display: inline-block; zoom: 1; *display: inline;
}
.flex-control-paging li a { width: 11px; height: 11px; display: block; background: #666; background: rgba(0, 0, 0, 0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); -o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
}
.flex-control-paging li a:hover { background: #333; background: rgba(0, 0, 0, 0.7);
}
.flex-control-paging li a.flex-active { background: #000; background: rgba(0, 0, 0, 0.9); 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: 10px; } .flex-direction-nav .flex-next { opacity: 1; right: 10px; }
}

Toying With Flexslider - Script Codes JS Codes

$(window).load(function() { $('.flexslider').flexslider({ animation: "slide", directionNav: true, touch: true, easing: "bounce", useCSS : true , animationSpeed: 1000, before: function(){ $('.flexslider .slides > li').next('li').removeClass('animate'); $('.flexslider').addClass('transit'); }, after: function(){ $('.flexslider .slides > li.flex-active-slide').next('li').addClass('animate'); $('.flexslider').removeClass('transit'); }, });
});
Toying With Flexslider - Script Codes
Toying With Flexslider - Script Codes
Home Page Home
Developer Alex Rodrigues
Username alex_rodrigues
Uploaded August 13, 2022
Rating 3
Size 5,052 Kb
Views 16,192
Do you need developer help for Toying With Flexslider?

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!

Alex Rodrigues (alex_rodrigues) Script Codes
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!