Created
July 2, 2013 12:47
-
-
Save ElmahdiMahmoud/5908995 to your computer and use it in GitHub Desktop.
Carousel Plugin
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset=utf-8 /> | |
| <title>Carousel</title> | |
| <style> | |
| .carousel_container { | |
| margin-top: 10px; | |
| } | |
| .carousel_inner { | |
| float: left; | |
| width: 800px; | |
| overflow: hidden; | |
| } | |
| .carousel_ul { | |
| position: relative; | |
| left: 0; | |
| list-style-type: none; | |
| margin: 0px; | |
| padding: 0px; | |
| width:9999px; | |
| } | |
| .carousel_ul li{ | |
| float: left; | |
| width: 187px; | |
| height: 140px; | |
| position: relative; | |
| margin-right: 11px; | |
| } | |
| .carousel_container button { | |
| float: left; | |
| margin-left: 10px; | |
| margin-right: 10px; | |
| height: 150px; | |
| width: 50px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class='carousel_container'> | |
| <button type="button" class="prevbtn" >prev</button> | |
| <div class='carousel_inner'> | |
| <ul class='carousel_ul'> | |
| <li><img src='http://4.bp.blogspot.com/_bZcuO1rLTgQ/SEtEcduhY8I/AAAAAAAAADg/LmKrJSxJViA/S226/PriceNatureWalkway200px_011.jpg' /></li> | |
| <li><img src='http://4.bp.blogspot.com/_bZcuO1rLTgQ/SEtEcduhY8I/AAAAAAAAADg/LmKrJSxJViA/S226/PriceNatureWalkway200px_011.jpg' /></li> | |
| </ul> | |
| </div> | |
| <button type="button" class="nextbtn" >next</button> | |
| </div> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> | |
| <script> | |
| /* | |
| * jQuery Carousel Plugin | |
| * Author : @ElmahdiMahmoud | |
| * Created: 02.07.2013 | |
| * Updated: 02.07.2013 | |
| * Licensed under the MIT license | |
| */ | |
| (function ($) { | |
| $.fn.carousel = function (options) { | |
| var settings = $.extend({ | |
| 'slideSpeed': 5000, | |
| 'autoPlay': true, | |
| 'pauseOnhvr': true | |
| }, options); | |
| return this.each(function () { | |
| var | |
| carousel = $(this), | |
| auto_slide = settings.autoPlay, | |
| hover_pause = settings.pauseOnhvr, | |
| auto_slide_seconds = settings.slideSpeed, | |
| flagPly = true; | |
| carousel.find('ul li:first').before(carousel.find('ul li:last')); | |
| /* auto play option */ | |
| if (auto_slide) { | |
| var timer = setInterval(function(){ | |
| if(flagPly) carousel.find('button.nextbtn').click() ; | |
| }, auto_slide_seconds); | |
| } | |
| /* pause on hover */ | |
| if (hover_pause) { | |
| carousel.find('ul').hover(function () { | |
| flagPly = false; | |
| }, function () { | |
| flagPly = true; | |
| }); | |
| } | |
| var leftIndent, where; | |
| carousel.find('button').on('click', function () { | |
| var item_width = carousel.find('ul li').outerWidth(); | |
| if ($(this).hasClass('prevbtn')) { | |
| leftIndent = parseInt(carousel.find('ul').css('left'), 10) + item_width; | |
| where = "left"; | |
| } else { | |
| leftIndent = parseInt(carousel.find('ul').css('left'), 10) - item_width; | |
| where = "right"; | |
| } | |
| carousel.find(':not(:animated)').animate({ | |
| 'left': leftIndent | |
| }, auto_slide_seconds, function () { | |
| if (where == 'left') { | |
| carousel.find('ul li:first').before(carousel.find('ul li:last')); | |
| } else { | |
| carousel.find('ul li:last').after(carousel.find('ul li:first')); | |
| } | |
| carousel.find('ul').css({ | |
| 'left': -item_width | |
| }); | |
| }); | |
| }); | |
| }); | |
| }; | |
| $('.carousel_container').carousel({ | |
| 'slideSpeed': 1000, | |
| 'autoPlay': flase, | |
| 'pauseOnhvr': flase | |
| }); | |
| })(jQuery); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment