Logo Slider

Developer
John Urbank
Size
3,508 Kb
Views
206,448
  1. Logo Slider Previews
  2. Logo Slider HTML Codes
  3. Logo Slider CSS Codes
  4. Logo Slider JS Codes

How do I make an logo slider?

A simple plugin for sliding company logos. The slider has two options, transition speed and snapping.. What is a logo slider? How do you make a logo slider? This script and codes were developed by John Urbank on 08 July 2022, Friday.

Logo Slider Previews
IQ Test

Logo Slider - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Logo Slider</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.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! */ *, *:before, *:after { box-sizing: border-box;
}
body { background: #d9d8c6;
}
li { list-style: none;
}
.suga-container { background: #5b5a5c; padding: .2em; max-width: 570px; margin: 5em auto; box-shadow: 3px 3px 0px #353435; border: 2px solid #353435; border-radius: 5px;
}
.suga-slider-wrap { overflow: hidden; margin: 1em;
}
.suga-slider-group:before, .suga-slider-group:after { content: " "; display: table;
}
.suga-slider-group:after { clear: both;
}
.suga-slide { float: left; position: relative; margin-left: 0; padding-right: 8px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id="logos"> <ul> <li><img src="http://placehold.it/100x100" /></li> <li><img src="http://placehold.it/100x100" /></li> <li><img src="http://placehold.it/100x100" /></li> <li><img src="http://placehold.it/100x100" /></li> <li><img src="http://placehold.it/100x100" /></li> <li><img src="http://placehold.it/100x100" /></li> </ul>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Logo Slider - Script Codes CSS Codes

*, *:before, *:after { box-sizing: border-box;
}
body { background: #d9d8c6;
}
li { list-style: none;
}
.suga-container { background: #5b5a5c; padding: .2em; max-width: 570px; margin: 5em auto; box-shadow: 3px 3px 0px #353435; border: 2px solid #353435; border-radius: 5px;
}
.suga-slider-wrap { overflow: hidden; margin: 1em;
}
.suga-slider-group:before, .suga-slider-group:after { content: " "; display: table;
}
.suga-slider-group:after { clear: both;
}
.suga-slide { float: left; position: relative; margin-left: 0; padding-right: 8px;
}

Logo Slider - Script Codes JS Codes

/*
Suga Slider
Usage ---------
$(window).load(function(){ $('#logos').suga({ 'transitionSpeed': 2000, 'snap': false });
});
The markup should resemble the markup here
*/
$.fn.suga = function(options) { var settings = $.extend({ 'transitionSpeed': 3000, 'snap': false }, options); var $this = $(this); // add plugin specific classes $this.addClass('suga-slider-wrap'); $this.children('ul').addClass('suga-slider-group'); $this.find('li').addClass('suga-slide'); // caching $$$ var $slide = $('.suga-slide'),	$firstEl = $('.suga-slide:first'), $group = $('.suga-slider-group'), $wrap = $('.suga-slider-wrap'); var slideWidth = $slide.outerWidth(),	slideHeight = $('.suga-slide').height(), slideCount = $slide.length, totalWidth = slideWidth * slideCount; // set width on group element $group.width(totalWidth); $wrap.height(slideHeight); $wrap.wrap('<div class="suga-container"></div>'); // add first class at start if (!$group.find($firstEl).hasClass("suga-first")) { $group.find($firstEl).addClass("suga-first"); } // lets move baby var transitionSnap = function() { var $firstEl = $group.find('.suga-first').html(); $group.find('.suga-first').animate({ 'margin-left': '-' + slideWidth + 'px' }, function(){ $group.append('<li class="suga-slide">' + $firstEl + '</li>'); $(this).remove(); $group.find('li:first').addClass("suga-first"); }); }; var transitionScroll = function() { var $firstEl = $group.find('.suga-first').html(); $group.find('.suga-first').animate({ 'margin-left': '-' + slideWidth + 'px' }, settings.transitionSpeed, 'linear', function(){ $group.append('<li class="suga-slide">' + $firstEl + '</li>'); $(this).remove(); $group.find('li:first').addClass("suga-first"); transitionScroll(); }); }; if (settings.snap) { window.setInterval(transitionSnap, settings.transitionSpeed); } else { transitionScroll(); }
}
$(window).load(function(){ $('#logos').suga({ 'transitionSpeed': 2000, 'snap': true });
});
Logo Slider - Script Codes
Logo Slider - Script Codes
Home Page Home
Developer John Urbank
Username jurbank
Uploaded July 08, 2022
Rating 3
Size 3,508 Kb
Views 206,448
Do you need developer help for Logo Slider?

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!

John Urbank (jurbank) Script Codes
Name
Tape Cassette Icon - CSS Only
Navicon - responsive nav pattern
Gutterless Feature Grid
Basic motion with JavaScript
Traveling through Tron - Best viewed in Webkit
Diagonal CSS Pattern
String permutation
CubeTronic
A Pen by John Urbank
Simple jQuery Slider
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!