"flex box slide jquery"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- styles personnalisés pour chaque slider --> <style> .container { max-width: 960px; margin: 0 auto; } .title { font-size: 40px; font-weight: 300; text-align: center; color: #90CAF9; } #slider-1 .slider, #slider-2 .slider, #slider-1 .slide, #slider-2 .slide { border: 1px solid rgba(0, 0, 0, 0.9); } #slider-1 .slide, #slider-2 .slide { background: #FF8F00; height: 250px; } #slider-3 { border: 4px solid #fff; border-radius: 2px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); } #slider-3 .slide { position: relative; border: none; margin-right: 5px; } #slider-3 .slide span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 50px; text-shadow: 3px 1px 1px rgba(0, 0, 0, 0.6); } </style> <div class="container"> <h1 class="title">Flexbox Slider (responsive)</h1> <div id="slider-1" class="slider"> <div class="slider-wrapper"> <div class="slide">Slide 1</div> <div class="slide">Slide 2</div> <div class="slide">Slide 3</div> <div class="slide">Slide 4</div> <div class="slide">Slide 5</div> <div class="slide">Slide 6</div> </div> <a href="#" class="slider-button--prev"> <i class="material-icons">chevron_left</i> </a> <a href="#" class="slider-button--next"> <i class="material-icons">chevron_right</i> </a> </div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at purus nibh. Cras metus nulla, vestibulum in auctor ac, fermentum vitae tellus. Donec sed aliquam nisl. Sed eu leo id est pretium euismod. Nulla id justo at mi venenatis volutpat. Fusce nisi leo, placerat id condimentum a, accumsan vitae tortor. Nunc magna nunc, venenatis nec elementum eu, ultrices in sem. Maecenas tincidunt semper molestie. Nulla nec neque. </p> <div id="slider-2" class="slider"> <div class="slider-wrapper"> <div class="slide">Slide 1</div> <div class="slide">Slide 2</div> <div class="slide">Slide 3</div> <div class="slide">Slide 4</div> <div class="slide">Slide 5</div> <div class="slide">Slide 6</div> <div class="slide">Slide 7</div> <div class="slide">Slide 8</div> <div class="slide">Slide 9</div> <div class="slide">Slide 10</div> <div class="slide">Slide 11</div> <div class="slide">Slide 12</div> <div class="slide">Slide 13</div> <div class="slide">Slide 14</div> </div> <a href="#" class="slider-button--prev"> <i class="material-icons">chevron_left</i> </a> <a href="#" class="slider-button--next"> <i class="material-icons">chevron_right</i> </a> </div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at purus nibh. Cras metus nulla, vestibulum in auctor ac, fermentum vitae tellus. Donec sed aliquam nisl. Sed eu leo id est pretium euismod. Nulla id justo at mi venenatis volutpat. Fusce nisi leo, placerat id condimentum a, accumsan vitae tortor. Nunc magna nunc, venenatis nec elementum eu, ultrices in sem. Maecenas tincidunt semper molestie. Nulla nec neque. </p> <div id="slider-3" class="slider"> <div class="slider-wrapper"> <div class="slide"><img src="http://pipsum.com/400x250.jpg" /><span>1</span></div> <div class="slide"><img src="http://pipsum.com/400x250.jpg" /><span>2</span></div> <div class="slide"><img src="http://pipsum.com/400x250.jpg" /><span>3</span></div> <div class="slide"><img src="http://pipsum.com/400x250.jpg" /><span>4</span></div> <div class="slide"><img src="http://pipsum.com/400x250.jpg" /><span>5</span></div> <div class="slide"><img src="http://pipsum.com/400x250.jpg" /><span>6</span></div> <div class="slide"><img src="http://pipsum.com/400x250.jpg" /><span>7</span></div> <div class="slide"><img src="http://pipsum.com/400x250.jpg" /><span>8</span></div> <div class="slide"><img src="http://pipsum.com/400x250.jpg" /><span>9</span></div> <div class="slide"><img src="http://pipsum.com/400x250.jpg" /><span>10</span></div> <div class="slide"><img src="http://pipsum.com/400x250.jpg" /><span>11</span></div> <div class="slide"><img src="http://pipsum.com/400x250.jpg" /><span>12</span></div> <div class="slide"><img src="http://pipsum.com/400x250.jpg" /><span>13</span></div> <div class="slide"><img src="http://pipsum.com/400x250.jpg" /><span>14</span></div> </div> <a href="#" class="slider-button--prev"> <i class="material-icons">chevron_left</i> </a> <a href="#" class="slider-button--next"> <i class="material-icons">chevron_right</i> </a> </div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at purus nibh. Cras metus nulla, vestibulum in auctor ac, fermentum vitae tellus. Donec sed aliquam nisl. Sed eu leo id est pretium euismod. Nulla id justo at mi venenatis volutpat. Fusce nisi leo, placerat id condimentum a, accumsan vitae tortor. Nunc magna nunc, venenatis nec elementum eu, ultrices in sem. Maecenas tincidunt semper molestie. Nulla nec neque. </p>
@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic); @import url(http://fonts.googleapis.com/icon?family=Material+Icons); * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } html { overflow-y: scroll; font-size: 62.5%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } html, body { margin: 0; height: 100%; width: 100%; } body { font-family: "Roboto", sans-serif; font-weight: normal; font-size: 16px; font-size: 1.6rem; } /* slider */ .slider { display: block; width: 100%; margin: 0 0 60px; background: #fff; position: relative; z-index: 1; } .slider-viewport { overflow: hidden; } .slider-wrapper { position: relative; width: 100%; z-index: 1; display: flex; box-sizing: content-box; } .slide { display: flex; justify-content: center; /* Horizontal */ align-items: center; /* Vertical */ text-align: center; flex-shrink: 0; width: 100%; position: relative; font-size: 18px; background: #fff; } .slide img { display: block; width: 100%; height: auto; } .slider-button--prev, .slider-button--next { display: block; position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; z-index: 50; } .slider-button--prev i, .slider-button--next i { font-size: 40px; line-height: 40px; color: #fff; transition: all .3s; text-shadow: 3px 1px 1px rgba(0, 0, 0, 0.6); } .slider-button--prev:hover i, .slider-button--next:hover i { text-shadow: 5px 3px 2px rgba(0, 0, 0, 0.7); } .slider-button--prev { left: 0; } .slider-button--next { right: 0; } .slider-nav { width: 100%; position: absolute; bottom: -40px; text-align: center; margin: 0; padding: 0; z-index: 50; } .slider-nav li { display: inline-block; margin: 0 6px; zoom: 1; } .slider-nav li a { display: block; width: 11px; height: 11px; border-radius: 50%; background: #666; background: rgba(0, 0, 0, 0.5); cursor: pointer; box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); } .slider-nav li a.active { pointer-events: none; background: #000; background: rgba(0, 0, 0, 0.9); cursor: default; }
/* Plugin */ (function($) { $.fn.flexboxslider = function(opts) { var options = $.extend({}, $.fn.flexboxslider.defaults, opts); return this.each(function() { var el = $(this), // el correspond au slider $slides_container = el.find('.slider-wrapper'), $slides = el.find('.slide'), $slides_length = $slides.length, prev = el.find('.slider-button--prev'), next = el.find('.slider-button--next'), slider_nav, // créé lors de l'initalisation timer, resizeTimer, steps = 1, current_step = 1, items_per_step = 4; function initialize() { // initialisation du nombre d'étapes items_per_step = options.items; steps = Math.ceil($slides_length / items_per_step); current_step = 1; // DOM $slides_container.wrap('<div class="slider-viewport"></div>'); if (options.show_nav) { create_nav(); } el.css({ 'max-height': options.max_height + 'px' }); // Events $(window).resize(resize); prev.on('click', function(e) { e.preventDefault(); move(current_step - 1); }); next.on('click', function(e) { e.preventDefault(); move(current_step + 1); }); if (options.timer) { el.on('mouseover', stop); el.on('mouseleave', play); } // launch resize(); if (options.timer) { play(); } } function create_nav() { slider_nav = $('<ul></ul>'); slider_nav.addClass('slider-nav'); create_nav_links(); el.append(slider_nav); } function create_nav_links() { for (var i = 0; i < steps; i++) { var li = $('<li></li>') var nav_link = $('<a></a>'); nav_link.attr('href', '#'); nav_link.on('click', function(e) { e.preventDefault(); var index = $(this).parent().index(), index_plus_1 = index + 1; if (index_plus_1 > current_step) { move(index_plus_1); } else { move(index_plus_1); } }); li.append(nav_link); slider_nav.append(li); } } function update_nav() { var links_count = slider_nav.find('li a').length; // console.log(links_count); if (links_count !== steps) { slider_nav.empty(); create_nav_links(); } } function resize() { // timer pour éviter les soucis pendant le redimensionnement et arrêter/ relancer la boucle if (options.timer) { stop(); clearTimeout(resizeTimer); resizeTimer = setTimeout(function() { play(); }, 250); } if (options.items > 1) { responsive_slider(); } else { // slider avec 1 seule image par étape resize_slide(); } // repositionnement du conteneur de slides sans animation position_slides_container(); // affichage boutons (bon emplacement dans le cas ou on modifie le nombre d'items) actualize_buttons(); } function responsive_slider() { // largeur du slider var slider_width = el.outerWidth(true); // small screens if (slider_width < options.small_screen && options.items >= 2) { // 2 items par étape change_items_per_step_to(2); } else if (slider_width < options.tablet && options.items >= 3) { // 3 items par étape change_items_per_step_to(3); } else { change_items_per_step_to(options.items); } resize_slide(); update_nav(items_per_step); } function change_items_per_step_to(new_items_per_step) { items_per_step = new_items_per_step; var new_steps = Math.ceil($slides_length / items_per_step); if (new_steps != steps) { // calcul du nombre de slides avant de modifier les steps var old_current_step_slides_count = current_step == steps ? $slides_length : current_step * items_per_step; // calcul du nouveau current step pour le nouveau nombre de steps var new_current_step = old_current_step_slides_count == $slides_length ? new_steps : old_current_step_slides_count / items_per_step; current_step = new_current_step; } steps = new_steps; } function resize_slide() { // largeur du slider sans border et margin var slider_width = el.width(); // calcul de la nouvelle largeur de chaque slide var slide_width = slider_width / items_per_step; // redimensionnement des slides $slides.css({ width: slide_width + 'px' }); } function position_slides_container() { var margin = parseInt($slides.css('margin-left')) + parseInt($slides.css('margin-right')), slide_width = (el.width() / items_per_step) + margin; var left = 0; if (current_step == 1) { left = 0; } else if (current_step == steps) { left = (($slides_length - (current_step * items_per_step)) + ((current_step - 1) * items_per_step)) * slide_width; } else { left = ((current_step - 1) * items_per_step) * slide_width; } $slides_container.css({ left: '-' + left + 'px' }); } function calc_slides_diff(from_step, to_step) { // front if (from_step < to_step) { // to_step == steps ? var slides_to_move = to_step == steps ? $slides_length - (current_step * items_per_step) : (to_step * items_per_step) - (current_step * items_per_step); return slides_to_move; } // back if (from_step > to_step) { var slides_to_move = current_step == steps ? $slides_length - (to_step * items_per_step) : (current_step * items_per_step) - (to_step * items_per_step); return slides_to_move; } // from == to ? return 0; } function move(to_step) { // calcul déplacement var slides_to_move = calc_slides_diff(current_step, to_step); // largeur du déplacement var width = items_per_step > 1 ? $slides.outerWidth(true) * slides_to_move: $slides.outerWidth(true) * slides_to_move; // déplacement selon la direction + animation // front if (current_step < to_step) { $slides_container.animate({ left: '-=' + width + 'px' }, options.animation_duration, options.easing); current_step = to_step; } // back if (current_step > to_step) { $slides_container.animate({ left: '+=' + width + 'px' }, options.animation_duration, options.easing); current_step = to_step; } // si current_step == to_step pas de déplacement // affichage des boutons actualize_buttons(); } function actualize_buttons() { if (current_step <= 1) { prev.hide(); } else { prev.show(); } if (current_step >= steps) { next.hide(); } else { next.show(); } // navs if (options.show_nav) { var current_nav = slider_nav.find('a').eq(current_step - 1); slider_nav.find('a').removeClass('active'); current_nav.addClass('active'); } } function play() { clearInterval(timer); timer = setInterval(function() { if (current_step == steps) { move(1); } else { move(current_step + 1); } }, options.interval); } function stop() { clearInterval(timer); } initialize(); }); }; $.fn.flexboxslider.defaults = { max_height:250, items:4, timer: true, interval: 5000, show_nav: true, animation_duration: 500, easing: 'swing', small_screen:600, tablet:768 }; })(jQuery); /* Code */ $(document).ready(function() { $('#slider-1').flexboxslider({ max_height: 350, items: 1, // interval: 6000, timer: false, // show_nav:false, // animation_duration: 600, // easing:'easeOutSine' //with jquery ui // etc ... }); $('#slider-2').flexboxslider({ max_height: 300, // items:3, timer: false }); $('#slider-3').flexboxslider({ // max_height:300, items: 4 }); });

Related: See More


Questions / Comments: