/* INFO: project: kalininCarousel browsers: opera/chrome/FF/ie9/safari coding: Sergey Kalinin 07/2013 ([email protected]) desc: jquery-плагин для преобразования списка в карусель с возможностью прокрутки при помощи стрелок-указателей version 1.0 */ // ------------------------------------------------------------------------------------------------------ PLUGIN kalininCarousel IMPLEMENTATION------------ (function($){ // -------------------------------------------------------------------------------------------------- options ---------- $.fn.kalininCarousel = function(options) { var options = jQuery.extend({ offsetElements: 0, autoScroll: false, speed: 1000, arrowsType: 'visible', rotateBy: 1, carouselWidth: 1000 },options); return this.each(function() { // ------------------------------------------------------------------------------------------ properties --------- var carousel_wrap = $('#carousel_wrap'), carousel = $('#carousel'), wrapperElements = $('#carousel > ul'), carouselElements = $('#carousel > ul > li'), carouselElementsWidth = carouselElements.width() + parseInt(carouselElements.css('margin-left'), 10) + parseInt(carouselElements.css('margin-right'), 10); carouselLength = carouselElements.length, carouselWidth = options.width, carouselHeight = carousel_wrap.height(), running = false; init(); // ------------------------------------------------------------------------------------------ methods ------------ function init(){ $('#carousel').height(carouselHeight); wrapperElements.width(carouselElementsWidth * carouselLength); carousel_wrap.append('<div class="prev" id="prev">').append('<div class="next" id="next">'); } function shift(direction){ var offset = (carouselElementsWidth * options.rotateBy * direction); if(!running){ running = true; if(direction == -1){ wrapperElements.children(':last').after($('#carousel > ul').children().slice(0, options.rotateBy).clone()); shiftAction(); wrapperElements.children().slice(0, options.rotateBy).remove(); } else{ // wrapperElements.children(':first').after($('#carousel > ul').children().slice(carouselLength - options.rotateBy, carouselLength).clone()); // shiftAction(); // wrapperElements.children().slice(carouselLength - options.rotateBy, carouselLength).remove(); } } function shiftAction(){ console.log(offset); wrapperElements.animate({ 'left': offset }, options.speed, function(){ running = false; }); } } // ------------------------------------------------------------------------------------------ handlers ----------- function onClickControls(){ ($(this).attr('id') == 'prev') ? shift(-1) : shift(1); } // ------------------------------------------------------------------------------------------ events ------------- $('#prev, #next').on('click', onClickControls); }); }; })(jQuery); $(document).ready(function() { // --------------------------------------------------------------------- PLUGIN kalininCarousel INITIALIZATION------------ $('#carousel').kalininCarousel({ offsetElements: 0, autoScroll: true, speed: 300, arrowsType: 'visible', //'visible', 'hidden', 'auto' rotateBy: 1, carouselWidth: 930 }); });
<div id="carousel_wrap" class="carousel_wrap"> <div id="carousel" class="carousel"> <ul> <li> <a href="#1"> <img src="http://prozaik.16mb.com/misc/images/kalininSlider/img1.png" width="300" height="200" alt="" /> </a> </li> <li> <a href="#2"> <img src="http://prozaik.16mb.com/misc/images/kalininSlider/img2.png" width="300" height="200" alt="" /> </a> </li> <li> <a href="#3"> <img src="http://prozaik.16mb.com/misc/images/kalininSlider/img3.png" width="300" height="200" alt="" /> </a> </li> <li> <a href="#4"> <img src="http://prozaik.16mb.com/misc/images/kalininSlider/img4.png" width="300" height="200" alt="" /> </a> </li> <li> <a href="#5"> <img src="http://prozaik.16mb.com/misc/images/kalininSlider/img5.png" width="300" height="200" alt="" /> </a> </li> <li> <a href="#6"> <img src="http://prozaik.16mb.com/misc/images/kalininSlider/img6.png" width="300" height="200" alt="" /> </a> </li> </ul> </div> </div>
/* INFO: project: kalininCarousel browsers: opera/chrome/FF/ie7,8/safari resolutions: >=1000x768 markup: Sergey Kalinin 07/2013 ([email protected]) desc: jquery-плагин для преобразования списка в карусель с возможностью прокрутки при помощи стрелок-указателей version 1 TABLE OF CONTENTS: 1.global reset and common settings 2.fonts 3.layout 4.blocks */ /************************************************************************************************************** 1.global reset and common settings */ html, body, div, h1, h2, h3, h4, h5, h6, a, a img, p, ul, ol, li, span, fieldset , form, dl, dd, dt, table, tr, td, img, input{ border: none; margin: 0; outline: none; padding: 0; } html{ height:100%; } body { height:100%; } ul{ list-style-type: none; } .clear{ clear: both; } input[type="text"]:focus, input[type="password"]:focus, textarea:focus { outline: none; } textarea{ resize: none; } .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } /******************************************************************************************************************************* 2.fonts */ /****************************************************************************************************************************** 3.layout */ .carousel_wrap{ margin: 0 auto; padding: 0 40px; overflow: hidden; height: 200px; width: 930px; position: relative; } .carousel{ overflow: hidden; } .carousel > ul{ overflow: hidden; position: relative; height: 200px; } .carousel > ul > li{ float: left; margin: 0 5px; } .carousel > ul > li > a{ } .carousel > ul > li > a > img{ display: block; } .carousel_wrap .prev, .carousel_wrap .next{ cursor: pointer; width: 40px; height: 40px; background: red; position: absolute; top: 80px; } .carousel_wrap .prev{ left: 0; } .carousel_wrap .next{ right: 0; } /****************************************************************************************************************************** 4. blocks */ /****************************************************************************************************************************** 4.1 indikator */