Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href='//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css' rel='stylesheet'/>
<div class='dd55844114'>
<center><a href='http://blog.7lolblogger.com/2014/10/slideshow-carousel-arabic.html'>سلايد شو أحترافي على شكل carousel لموقعك</a></center>
  <style>
  .dd55844114 a {
font: 700 15px tahoma ,arial;
text-decoration: none;
color: #00618B;
}
  .dd55844114 {
margin-top: 120px;
border: 1px solid #C3C3C3;
padding: 7px 0;
border-radius: 3px;
background: #EFFCFF;
width: 70%;
margin: 100px auto 0;
}
  </style></div>
<div id='caja-carrusel'> 
<div class='infiniteCarousel'> 
<div class='wrapper' style='overflow-x: hidden; overflow-y: hidden; '> 
<ul> 
  <li><a href='http://blog.7lolblogger.com/2014/10/slideshow-carousel-arabic.html'><img alt='وصف الصورة' src='https://jetara.googlecode.com/svn/trunk/imgs-slide/0.jpg' title='عنوان الموضوع'/></a></li> 
  <li><a href='http://blog.7lolblogger.com/2014/10/slideshow-carousel-arabic.html'><img alt='وصف الصورة' src='https://jetara.googlecode.com/svn/trunk/imgs-slide/1.Jpeg' title='عنوان الموضوع'/></a></li> 
  <li><a href='http://blog.7lolblogger.com/2014/10/slideshow-carousel-arabic.html'><img alt='وصف الصورة' src='https://jetara.googlecode.com/svn/trunk/imgs-slide/2.jpeg' title='عنوان الموضوع'/></a></li> 
  <li><a href='http://blog.7lolblogger.com/2014/10/slideshow-carousel-arabic.html'><img alt='وصف الصورة' src='https://jetara.googlecode.com/svn/trunk/imgs-slide/3.jpg' title='عنوان الموضوع'/></a></li> 
  <li><a href='http://blog.7lolblogger.com/2014/10/slideshow-carousel-arabic.html'><img alt='وصف الصورة' src='https://jetara.googlecode.com/svn/trunk/imgs-slide/4.Jpeg' title='عنوان الموضوع'/></a></li> 
  <li><a href='http://blog.7lolblogger.com/2014/10/slideshow-carousel-arabic.html'><img alt='وصف الصورة' src='https://jetara.googlecode.com/svn/trunk/imgs-slide/5.jpg' title='عنوان الموضوع'/></a></li> 
  <li><a href='http://blog.7lolblogger.com/2014/10/slideshow-carousel-arabic.html'><img alt='وصف الصورة' src='https://jetara.googlecode.com/svn/trunk/imgs-slide/6.jpg' title='عنوان الموضوع'/></a></li> 
  <li><a href='http://blog.7lolblogger.com/2014/10/slideshow-carousel-arabic.html'><img alt='وصف الصورة' src='https://jetara.googlecode.com/svn/trunk/imgs-slide/7.jpg' title='عنوان الموضوع'/></a></li> 
  <li><a href='http://blog.7lolblogger.com/2014/10/slideshow-carousel-arabic.html'><img alt='وصف الصورة' src='https://jetara.googlecode.com/svn/trunk/imgs-slide/8.jpg' title='عنوان الموضوع'/></a></li> 
  <li><a href='http://blog.7lolblogger.com/2014/10/slideshow-carousel-arabic.html'><img alt='وصف الصورة' src='https://jetara.googlecode.com/svn/trunk/imgs-slide/9.jpg' title='عنوان الموضوع'/></a></li> 
  <li><a href='http://blog.7lolblogger.com/2014/10/slideshow-carousel-arabic.html'><img alt='وصف الصورة' src='https://jetara.googlecode.com/svn/trunk/imgs-slide/10.png' title='عنوان الموضوع'/></a></li> 
  <li><a href='http://blog.7lolblogger.com/2014/10/slideshow-carousel-arabic.html'><img alt='وصف الصورة' src='https://jetara.googlecode.com/svn/trunk/imgs-slide/11.Jpeg' title='عنوان الموضوع'/></a></li> 
  <li><a href='http://blog.7lolblogger.com/2014/10/slideshow-carousel-arabic.html'><img alt='وصف الصورة' src='https://jetara.googlecode.com/svn/trunk/imgs-slide/12.jpg' title='عنوان الموضوع'/></a></li> 
  <li><a href='http://blog.7lolblogger.com/2014/10/slideshow-carousel-arabic.html'><img alt='وصف الصورة' src='https://jetara.googlecode.com/svn/trunk/imgs-slide/5.jpg' title='عنوان الموضوع'/></a></li> 
  <li><a href='http://blog.7lolblogger.com/2014/10/slideshow-carousel-arabic.html'><img alt='وصف الصورة' src='https://jetara.googlecode.com/svn/trunk/imgs-slide/7.jpg' title='عنوان الموضوع'/></a></li> 
  
      </ul></div> </div></div>
<script type='text/javascript'> $.fn.infiniteCarousel = function () { function repeat(str, num) { return new Array( num + 1 ).join( str ); }  return this.each(function () { var $wrapper = $('> div', this).css('overflow', 'hidden'), $slider = $wrapper.find('> ul'), $items = $slider.find('> li'), $single = $items.filter(':first'),  singleWidth = $single.outerWidth(),  visible = Math.ceil($wrapper.innerWidth() / singleWidth), currentPage = 1, pages = Math.ceil($items.length / visible);   if (($items.length % visible) != 0) { $slider.append(repeat('<li class="empty" />', visible - ($items.length % visible))); $items = $slider.find('> li'); }  $items.filter(':first').before($items.slice(- visible).clone().addClass('cloned')); $items.filter(':last').after($items.slice(0, visible).clone().addClass('cloned')); $items = $slider.find('> li');   $wrapper.scrollLeft(singleWidth * visible);  function gotoPage(page) { var dir = page < currentPage ? -1 : 1, n = Math.abs(currentPage - page), left = singleWidth * dir * visible * n;  $wrapper.filter(':not(:animated)').animate({ scrollLeft : '+=' + left }, 500, function () { if (page == 0) { $wrapper.scrollLeft(singleWidth * visible * pages); page = pages; } else if (page > pages) { $wrapper.scrollLeft(singleWidth * visible); page = 1; }  currentPage = page; });  return false; }  $wrapper.after('<a class="icon-angle-left"></a><a class="icon-angle-right"></a>');  $('a.icon-angle-left', this).click(function () { return gotoPage(currentPage - 1);  });  $('a.icon-angle-right', this).click(function () { return gotoPage(currentPage + 1); });  $(this).bind('goto', function (event, page) { gotoPage(page); }); });  }; $(document).ready(function () { $('.infiniteCarousel').infiniteCarousel(); }); </script>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
jetarapro
0viewers