Slimslider.js

Developer
Kyle Foster
Size
3,870 Kb
Views
32,384
  1. Slimslider.js Previews
  2. Slimslider.js HTML Codes
  3. Slimslider.js CSS Codes
  4. Slimslider.js JS Codes

How do I make an slimslider.js?

The goal here was to create a lean, responsive, semantic slider that was simple, yet configurable. The result is a slider that allows you add and style any html content you desire. The jQuery is lean, cached to the max, and uses smooth CSS3 animations. If you see any bugs, feel free to let me know.. What is a slimslider.js? How do you make a slimslider.js? This script and codes were developed by Kyle Foster on 04 September 2022, Sunday.

Slimslider.js Previews
IQ Test

Slimslider.js - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Slimslider.js</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section class="slider"> <nav class="slide-nav"> <ul> <li><a href="#">01</a></li> <li><a href="#">02</a></li> <li><a href="#">03</a></li> <li><a href="#">04</a></li> <li><a href="#">05</a></li> <li><a href="#">06</a></li> </ul> </nav> <ul class="slides"> <li><img src="http://kylefoster.me/cp/Up01.jpg" alt="Slide One"></li> <li><img src="http://kylefoster.me/cp/Up02.jpg" alt="Slide Two"></li> <li><img src="http://kylefoster.me/cp/Up03.jpg" alt="Slide Three"></li> <li><img src="http://kylefoster.me/cp/Up04.jpg" alt="Slide Four"></li> <li><img src="http://kylefoster.me/cp/Up05.jpg" alt="Slide Five"></li> <li><img src="http://kylefoster.me/cp/Up06.jpg" alt="Slide Five"></li> </ul>
</section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Slimslider.js - Script Codes CSS Codes

/* Webfont link */
@import url(https://fonts.googleapis.com/css?family=Unica+One);
/* Plugin base styles */
.slider { position: relative; width: 100%; overflow: hidden;
}
.slides { position: relative; padding: 0; list-style: none; letter-spacing: 0; word-spacing: 0; font-size: 0; -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0,0,0);
}
.slides li { display: inline-block; -webkit-backface-visibility: hidden;
}
.slides li img { width: 100%; height: auto;
}
/* Non-plugin styles */
* { margin: 0; padding: 0;
}
body { position: relative; width: 90%; max-width: 600px; margin: 0 auto; font-family: 'Unica One', sans-serif;
}
.slide-nav { position: absolute; bottom: 20px; right: 20px; z-index: 1;
}
.slide-nav ul { letter-spacing: 0; word-spacing: 0; font-size: 0;
}
.slide-nav li { display: inline-block; }
.slide-nav li a { display: block; color: #444; background: #FFF; text-decoration: none; border-radius: 50%; width: 26px; height: 26px; line-height: 26px; font-size: 12px; text-align: center; margin: 0 0 0 6px;
}
.slide-nav li a.active { color: #DEBB1E; }

Slimslider.js - Script Codes JS Codes

/** * Slimslider v1.1.0 * @author Kyle Foster * MIT license */
;(function ( $, window, document, undefined ) { $.fn.slimSlider = function ( options ) { options = $.extend( {}, $.fn.slimSlider.options, options ); return this.each(function () { // Define our variables var counter = 0, element = $(this), wrapper = element.children('.slides'), slide = wrapper.children('li'), slideCnt = slide.length, navLink = element.find('.slide-nav').find('li').find('a'), prefix = (/mozilla/.test(navigator.userAgent.toLowerCase()) && !/webkit/.test(navigator.userAgent.toLowerCase())) ? '-moz-' : (/webkit/.test(navigator.userAgent.toLowerCase())) ? '-webkit-' : (/msie/.test(navigator.userAgent.toLowerCase())) ? '-ms-' : (/opera/.test(navigator.userAgent.toLowerCase())) ? '-o-' : ''; // Add active class to first nav link navLink.first().addClass('active'); // Auto play function (if selected options) if ( options.autoPlay === true ) { // Define slideshow variable var slideShow; // Define play function function play() { // Don't execute after click function if ( !wrapper.is('.stopped') ) { // Slideshow function slideShow = setTimeout(function() { // Slideshow iterator if (counter < slideCnt - 1) { counter++; } else { counter = 0; }; // Stop browser 'catch up' when switching tabs wrapper.stop(true,true); // Fire animation function animate(); // Loop our slideshow play(); }, options.autoDelay ); }; }; // Instantiate our play function play(); // Define our pause function function pause() { clearTimeout(slideShow); }; // Pause on hover (if selected) if ( options.hoverPause === true ) { wrapper.on({ mouseenter: function() { pause(); }, mouseleave: function() { play(); } }); }; }; // Navigation click function navLink.on('click', function(e) { // Stop auto play (if instantiated) pause(); // Add a class to keep animation stopped wrapper.addClass('stopped'); // Set counter to new slide position counter = $(this).parent().index(); // Fire animation function animate(); // Prevent default click action e.preventDefault(); }); // Define our animation function function animate() { // Iterate through our navigation links navLink.each(function() { // Cache 'this' var currentLink = $(this); // Move to counter's position if ( counter === currentLink.parent().index() ) { navLink.removeClass('active'); // Clear 'active' class currentLink.addClass('active'); // And add to selected link } }); // Animation wrapper .css( prefix + 'transition' , prefix + 'transform ' + options.animSpeed ) // Apply transition .css( prefix + 'transform' , 'translate(-' + counter * element.width() + 'px, 0)' ) // Animate .bind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function() { wrapper.css( prefix + 'transition' , 'none' ); // Kill transition once animation completes }); }; // Define debulked onresize handler function on_resize(c, t) { onresize = function() { clearTimeout(t); t = setTimeout(c, 100) }; return c }; // Instantiate resize function on_resize(function() { // Cache our slider width var newWidth = element.width(); // Set wrapper width & reposition wrapper .css({ 'width' : newWidth * slideCnt }) .css( prefix + 'transform' , 'translate(-' + counter * newWidth + 'px, 0)' ); // Set slide width slide.css({ 'width' : newWidth }); })(); }); }; // Overridable default options $.fn.slimSlider.options = { animSpeed : '0.5s', // animation speed autoPlay : true, // auto play option autoDelay : 4000, // auto play duration hoverPause : true // auto play pause on hover };
})( jQuery, window, document );
// Instantiate Slimslider
$('.slider').slimSlider();
Slimslider.js - Script Codes
Slimslider.js - Script Codes
Home Page Home
Developer Kyle Foster
Username hkfoster
Uploaded September 04, 2022
Rating 4
Size 3,870 Kb
Views 32,384
Do you need developer help for Slimslider.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!

Kyle Foster (hkfoster) Script Codes
Name
Messing Around with CSS3 Shadows
Manipulating SVG With CSS
SVG Circular Scroll Progress Bar
Vanilla FlowType.js
Smart Fixed Header
SVG Optimization Breakdown
Gradual.js
Freemason.js
Vanilla Flavored Unorphanize
Super Simple Fader
Create amazing Facebook ads 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!