|
|
Nessun problema. Sinceramente lo trovo poco utile modificare questo plugin per farlo andare in automatico.
A mio avviso sarebbe meglio usarne uno nuovo che magari possiede già queste caratteristiche.
Quello che ho trovato poco fa su internet è un po più complicato da usare tuttavia ha molte opzioni, puoi aggiungere senza smanettare con il codice js nuove slide, scorrono automaticamente, sono responsive e teoricamente funzionano anche con comandi touch.
Ecco qui:
Questo lo copi incolli in un file chiamato unslider.js:
CODICE /** * Unslider by @idiot */
(function($, f) { // If there's no jQuery, Unslider can't work, so kill the operation. if(!$) return f; var Unslider = function() { // Set up our elements this.el = f; this.items = f; // Dimensions this.sizes = []; this.max = [0,0]; // Current inded this.current = 0; // Start/stop timer this.interval = f; // Set some options this.opts = { speed: 500, delay: 3000, // f for no autoplay complete: f, // when a slide's finished keys: !f, // keyboard shortcuts - disable if it breaks things dots: f, // display ••••o• pagination fluid: f // is it a percentage width?, }; // Create a deep clone for methods where context changes var _ = this;
this.init = function(el, opts) { this.el = el; this.ul = el.children('ul'); this.max = [el.outerWidth(), el.outerHeight()]; this.items = this.ul.children('li').each(this.calculate); // Check whether we're passing any options in to Unslider this.opts = $.extend(this.opts, opts); // Set up the Unslider this.setup(); return this; }; // Get the width for an element // Pass a jQuery element as the context with .call(), and the index as a parameter: Unslider.calculate.call($('li:first'), 0) this.calculate = function(index) { var me = $(this), width = me.outerWidth(), height = me.outerHeight(); // Add it to the sizes list _.sizes[index] = [width, height]; // Set the max values if(width > _.max[0]) _.max[0] = width; if(height > _.max[1]) _.max[1] = height; }; // Work out what methods need calling this.setup = function() { // Set the main element this.el.css({ overflow: 'hidden', width: _.max[0], height: this.items.first().outerHeight() }); // Set the relative widths this.ul.css({width: (this.items.length * 100) + '%', position: 'relative'}); this.items.css('width', (100 / this.items.length) + '%'); if(this.opts.delay !== f) { this.start(); this.el.hover(this.stop, this.start); } // Custom keyboard support this.opts.keys && $(document).keydown(this.keys); // Dot pagination this.opts.dots && this.dots(); // Little patch for fluid-width sliders. Screw those guys. if(this.opts.fluid) { var resize = function() { _.el.css('width', Math.min(Math.round((_.el.outerWidth() / _.el.parent().outerWidth()) * 100), 100) + '%'); }; resize(); $(window).resize(resize); } if(this.opts.arrows) { this.el.parent().append('<p class="arrows"><span class="prev">â†</span><span class="next">→</span></p>') .find('.arrows span').click(function() { $.isFunction(_[this.className]) && _[this.className](); }); }; // Swipe support if($.event.swipe) { this.el.on('swipeleft', _.prev).on('swiperight', _.next); } }; // Move Unslider to a slide index this.move = function(index, cb) { // If it's out of bounds, go to the first slide if(!this.items.eq(index).length) index = 0; if(index < 0) index = (this.items.length - 1); var target = this.items.eq(index); var obj = {height: target.outerHeight()}; var speed = cb ? 5 : this.opts.speed; if(!this.ul.is(':animated')) { // Handle those pesky dots _.el.find('.dot:eq(' + index + ')').addClass('active').siblings().removeClass('active');
this.el.animate(obj, speed) && this.ul.animate($.extend({left: '-' + index + '00%'}, obj), speed, function(data) { _.current = index; $.isFunction(_.opts.complete) && !cb && _.opts.complete(_.el); }); } }; // Autoplay functionality this.start = function() { _.interval = setInterval(function() { _.move(_.current + 1); }, _.opts.delay); }; // Stop autoplay this.stop = function() { _.interval = clearInterval(_.interval); return _; }; // Keypresses this.keys = function(e) { var key = e.which; var map = { // Prev/next 37: _.prev, 39: _.next, // Esc 27: _.stop }; if($.isFunction(map[key])) { map[key](); } }; // Arrow navigation this.next = function() { return _.stop().move(_.current + 1) }; this.prev = function() { return _.stop().move(_.current - 1) }; this.dots = function() { // Create the HTML var html = '<ol class="dots">'; $.each(this.items, function(index) { html += '<li class="dot' + (index < 1 ? ' active' : '') + '">' + (index + 1) + '</li>'; }); html += '</ol>'; // Add it to the Unslider this.el.addClass('has-dots').append(html).find('.dot').click(function() { _.move($(this).index()); }); }; }; // Create a jQuery plugin $.fn.unslider = function(o) { var len = this.length; // Enable multiple-slider support return this.each(function(index) { // Cache a copy of $(this), so it var me = $(this); var instance = (new Unslider).init(me, o); // Invoke an Unslider instance me.data('unslider' + (len > 1 ? '-' + (index + 1) : ''), instance); }); }; })(window.jQuery, false);
Questo lo copi incolli in un file css.
CODICE * { margin: 0; padding: 0;
-webkit-font-smoothing: antialiased;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
::selection { background: #bfa57c; color: #fff; }
body { color: #a48d66; font: 14px/23px proxima-nova-alt, "Proxima Nova Alt", sans-serif; }
h1, h2, h3, h4, b { font-weight: 300; font-family: bree-web, Bree, sans-serif; } h2 { font-size: 28px; padding-bottom: 60px; } b { font-weight: 500; font-size: 16px;
color: #c3522f; }
#logo { position: absolute; left: 80px; top: 40px; z-index: 2;
margin-left: -17px; }
.banner { position: relative; width: 100%; overflow: auto;
font-size: 18px; line-height: 24px; text-align: center;
color: rgba(255,255,255,.6); text-shadow: 0 0 1px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.3);
background: #5b4d3d; box-shadow: 0 1px 2px rgba(0,0,0,.25); } .banner ul { list-style: none; width: 300%; } .banner ul li { display: block; float: left; width: 33%; min-height: 350px;
-o-background-size: 100% 100%; -ms-background-size: 100% 100%; -moz-background-size: 100% 100%; -webkit-background-size: 100% 100%; background-size: 100% 100%;
box-shadow: inset 0 -3px 6px rgba(0,0,0,.1); }
.banner .inner { padding: 160px 0 110px; }
.banner h1, .banner h2 { font-size: 40px; line-height: 52px;
color: #fff; }
.banner .btn { display: inline-block; margin: 25px 0 0; padding: 9px 22px 7px; clear: both;
color: #fff; font-size: 12px; font-weight: bold; text-transform: uppercase; text-decoration: none;
border: 2px solid rgba(255,255,255,.4); border-radius: 5px; } .banner .btn:hover { background: rgba(255,255,255,.05); } .banner .btn:active { -webkit-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5)); -moz-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5)); -ms-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5)); -o-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5)); filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5)); }
.banner .btn, .banner .dot { -webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); -moz-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); -ms-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); -o-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); }
.banner .dots { position: absolute; left: 0; right: 0; bottom: 20px; width: 100%; } .banner .dots li { display: inline-block; *display: inline; zoom: 1;
width: 10px; height: 10px; line-height: 10px; margin: 0 4px;
text-indent: -999em; *text-indent: 0;
border: 2px solid #fff; border-radius: 6px;
cursor: pointer; opacity: .4;
-webkit-transition: background .5s, opacity .5s; -moz-transition: background .5s, opacity .5s; transition: background .5s, opacity .5s; } .banner .dots li.active { background: #fff; opacity: 1; }
.banner .arrows { position: absolute; bottom: 20px; right: 20px; color: #fff; } .banner .arrow { display: inline; padding-left: 10px; cursor: pointer; }
.features { overflow: hidden; padding: 50px 0;
background: #f7f7f6; box-shadow: inset 0 -1px 3px rgba(0,0,0,.03); } .features li { position: relative; padding: 0 25px 0 40px; list-style: none;
width: 25%; float: left; } .features li:before { content: ''; position: absolute; left: 0; top: 0;
display: block; width: 24px; height: 22px;
background: url('img/icons.png'); } .features li.browser:before { background-position: 0 -44px; } .features li.height:before { background-position: 0 -22px; } .features li.responsive:before { background-position: 0 -66px; } .features b { display: block; padding-bottom: 6px; }
.how { padding: 60px 0; } .how h2 { color: #7c6853; } .how h3 { padding-bottom: 8px;
color: #7b6b53; font-size: 20px; line-height: 10px; } .how li { position: relative; width: 375px; margin: 0 0 40px 15px; padding-left: 10px; } .how pre { position: absolute; left: 450px; top: 0;
width: 495px; padding: 20px 25px;
background: #f8f5f0; color: #8a785d;
font-size: 12px; line-height: 18px;
border-radius: 5px; box-shadow: inset 0 2px 2px rgba(180,157,125,.15), inset 0 0 1px rgba(0,0,0,.2); } .how p { padding-bottom: 15px; }
.options { padding: 60px 0;
background: #39342d; color: #7b7368;
box-shadow: inset 0 2px 3px rgba(0,0,0,.2); text-shadow: 0 1px 1px rgba(0,0,0,.2); } .options a { opacity: .7; color: #fff; border-bottom: 1px solid rgba(255,255,255,.2); text-decoration: none; } .options a:hover { opacity: 1; border-bottom-color: rgba(255,255,255,.3); } .options p { font-size: 16px; line-height: 25px;
padding-bottom: 20px; } .options h2 { color: #fff; padding-bottom: 15px; } .options pre { padding: 20px 25px;
background: #342f29; color: #988f81;
font-size: 13px; line-height: 19px;
box-shadow: inset 0 2px 2px rgba(0,0,0,.15), inset 0 0 1px rgba(0,0,0,.1); border-radius: 5px; } .options pre span { color: #706657; }
.footer { padding: 80px 0 60px; text-align: center; } .footer .btn { display: inline-block; padding: 13px 24px 10px; margin-bottom: 15px;
background-color: #c4652d; background-image: -webkit-gradient(linear, left top, left bottom, from(#d07936), to(#b95124)); background-image: -webkit-linear-gradient(top, #d07936, #b95124); background-image: -moz-linear-gradient(top, #d07936, #b95124); background-image: -o-linear-gradient(top, #d07936, #b95124); background-image: -ms-linear-gradient(top, #d07936, #b95124); background-image: linear-gradient(top, #d07936, #b95124); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#d07936', EndColorStr='#b95124');
border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.2), inset 0 -1px 2px rgba(0,0,0,.15), inset 0 2px 0 rgba(255,255,255,.2), 0 1px 1px rgba(0,0,0,.1);
color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.2);
font-size: 12px; line-height: 18px; font-weight: bold; text-transform: uppercase;
border: none; } .footer .btn span { font-weight: normal; opacity: .8; } .footer .btn:hover { opacity: .95; color: #fff; } .footer .btn:active { opacity: 1; background-color: #bc5f29; background-image: -webkit-gradient(linear, left top, left bottom, from(#b55625), to(#c3692d)); background-image: -webkit-linear-gradient(top, #b55625, #c3692d); background-image: -moz-linear-gradient(top, #b55625, #c3692d); background-image: -o-linear-gradient(top, #b55625, #c3692d); background-image: -ms-linear-gradient(top, #b55625, #c3692d); background-image: linear-gradient(top, #b55625, #c3692d); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#b55625', EndColorStr='#c3692d');
box-shadow: inset 0 0 0 1px rgba(0,0,0,.2), inset 0 -1px 2px rgba(255,255,255,.1), inset 0 2px 2px rgba(0,0,0,.2), 0 1px 1px rgba(0,0,0,.1); } .footer a { margin: 0 4px;
color: #79654e; text-decoration: none; border-bottom: 1px solid #ddd2c6; } .footer a:hover { color: #665139; border-color: #d1bfa9; }
.wrap { margin: 0 auto; width: 960px; }
@media only screen and (min-device-width: 320px) and (max-device-width: 480px), (max-width: 900px) { .wrap { width: 90%; } #logo { left: 50px; top: 30px; }
.banner h1, .banner h2 { font-size: 24px; line-height: 30px; } .banner ul li { height: 240px; } .banner .inner { padding-top: 100px; padding-bottom: 50px; } .banner p { font-size: 15px; width: 80%; margin: 0 auto; } pre { overflow: auto; } .features li { width: 100%; margin-left: 10px; margin-bottom: 30px; } .how li { width: 90%; } .how pre { position: static; width: 100%; } }
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .features li:before { background: url('img/icons@2x.png'); background-size: 100%; } }
Poi puoi smanettarci togliendo immagini, aggiungendole o cambiando i colori come più ti piacciono.
Infine lo usi come segue:
CODICE <!--Questi servono a far riconoscere i vari file vanno nella sezione HEAD--> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="unslider.js"></script> <link rel="stylesheet" href="style.css">
<!--Questi nel body all'inizio! Servono a far avviare il plugin--> <script> $(function() { $('.banner').unslider({ speed: 500, // velocità in millisecondi dello scorrimento delay: 3000, // Ritardo fra un cambio slide e l'altro sempre in millisecondi complete: function() {}, //Qui puoi aggiungere una funzione che viene chiamata automaticamente dopo ogni cambio slide in questo esempio è vuota keys: true, // Con questo dai la possibilità di cambiare slide con le frecce direzionali dots: true, // Questo mostra i pallini che segnalano la slide corrente e permettono la navigazione con il mouse fluid: false // Questo se messo a true avvia la visualizzazione responsive Adesso è disattivata perché potrebbe fare danni se la grafica del sito intero non è responsive. }); }); </script>
<!--Le slide-->
<div class="banner"> <ul> <li> <div class="inner"> <h1>Qui puoi inserire infinite cose</h1> <p>Come lorem ipsum!</p>
<a class="btn" href="#download">Cliccami</a> </div> </li>
<li> <div class="inner"> <h1>Puoi mettere come background al "li"</h1> <p>aggiungendo dentro i tag style="background-image: url('img.jpg');"</p> </div> </li>
<li> <div class="inner"> <h1>Leggimi</h1> <p>Aggiungendo un li con dentro un div dotato di classe inner puoi inserire altre slide. i dot vengono aggiunti automaticamente</p> </div> </li>
<li> <div class="inner"> <h1>Esempio aggiunta</h1> </div> </li> <li> <div class="inner"> <h1>Esempio aggiunta 2</h1> </div> </li> <li> <div class="inner"> <h1>Esempio aggiunta3</h1> </div> </li> </ul> </div>
|
|