jquery merry-go-round slide carousel effect _jquery

This article is for you to share Anoslide is a super light response to the jquery rotary Trojan slide plug-in, it is suitable for the PC side and mobile end of the implementation of the Merry-go-slide effect. The specific contents are as follows

Characteristics

• Response--Fits the width of any window
• Mixed content
• No CSS Required
• Lightweight (< 8 KB uncompressed)
• Based on jquery architecture
• Integrated image Pre-loading
• callback function--onconstruct Onstart,onend
• Multiple configurable options
• Lazy Load Picture
• Automatic rotation
• Easy to expand

jquery Example: How to use Anoslide

Introducing Core Files

<script src= "Js/jquery/1.10.2/jquery.min.js" ></script>
<script type= "Text/javascript" src= "js/" Jquery.anoslide.js "></script>

Write the underlying CSS style, which can be fully customized according to the project

. carousel {position:relative;
  min-height:20px;
  Height:auto!important;
  height:20px;
Background:url (images/loader.gif) Center Center no-repeat;
  }. Carousel. Next,. Carousel. prev {display:none;
  width:56px;
  height:56px;
  Position:absolute;
  bottom:20px;
  left:50%;
  Margin-top: -28px;
  z-index:9999;
Cursor:pointer;
  }. Carousel. prev {margin-left: -60px;
Background:url (images/prev.png) 0 0 no-repeat;
  }. Carousel. Next {margin-right: -60px;
Background:url (images/next.png) 0 0 no-repeat;
  }. Carousel Li {display:none; Carousel li img {width:100%;
Height:auto;
  }. Paging {position:absolute;
z-index:9998;
  }. Paging > a {display:block;
  Cursor:pointer;
  width:40px;
  height:40px;
  Float:left;
Background:url (images/dots.png) 0px-40px no-repeat; }. Paging > A:hover,. Paging > A.current {background:url (images/dots.png) 0px 0px no-repeat; badge {Displa
  Y:block;
  width:104px;
  height:104px;Background:url (images/badge.png) 0 0 no-repeat;
  z-index:9000;
  Position:absolute;
  Top: -3px;
Left: -3px;   IMG {-webkit-user-select:none/* Chrome All/safari all */-moz-user-select:none;   /* Firefox all */-ms-user-select:none;
  /* IE 10+ * *-o-user-select:none;
User-select:none;
 }

jquery Carousel Anoslide Mixed display

Js

$ ('. Carousel ul '). Anoslide (
{
  items:1,
  speed:500,
  prev: ' A.prev ',
  Next: ' A.next ',
  lazy: True,
  auto:4000
})
html
<div class= "Carousel" >
  <a class= "prev" ></a>
  <ul>
    <li>content goes here</li>
    <li>content goes here</li>
    < Li>content goes here</li>
  </ul>
  <a class= "Next" ></a>
</div>

jquery Slide Anoslide Multiple graphs

Js

$ ('. Carousel[data-mixed] ul '). Anoslide (
{
  items:5,
  speed:500,
  prev: ' A.prev[data-prev] ',
  next: ' A.next[data-next] ',
  lazy:true,
  delay:100}

Html

<div class= "Carousel" data-mixed= "" > <a class= "prev" data-prev= "" ></a> <ul> <li> < Div class= "wrap" > <figure> </figure> </div> </li> <li> <div class= "wrap" > <figure></figure> </div> </li> <li> <div class= "wrap" > <figure></figure> </div> </li> <li> <div class= "wrap" > <figure></figure> </div> </li> <li&
   Gt <div class= "wrap" > <figure></figure> </div> </li> <li> <div class= "wrap" > <figure></figure> </div> </li> <li> <div class=" Wrap "&G
    T <figure></figure> <
 /div> </li> </ul> <a class= "Next" data-next= "></a> </div>

jquery merry-go-Round anoslide page

Js

$ ('. Carousel ul '). Anoslide ({items:1, speed:500, prev: ' a.prev[data-prev-paging] ', Next: ' A.next[data-next-pag
    ing] ', lazy:true, Onconstruct:function (instance) {var paging = $ (' <div/> '). addclass (' paging fix '). CSS ( {position: ' absolute ', top:1, left:50 + '% ', width:instance.slides.length Nleft:-(Instance.slides.length *)/2})/* Build Paging * * (i = 0, L = instance.slides.length I < L; 
          i++) {var a = $ (' <a/> '). Data (' index ', i). Appendto (Paging). On ({click:function () {
        Instance.stop (). Go ($ (this). Data (' index '));
       
      }
      });
      if (i = = instance.current) {a.addclass (' current ');
  } instance.element.parent (). append (paging);
     
    }, Onstart:function (UI) {var paging = $ ('. Paging '); Paging.find (' a '). EQ (ui.instance.current). addclass ("current"). Siblings (). Removeclass (' current');
 }
})

Html

<div class= "Carousel" >
  <a class= "prev" ></a>
  <ul>
    <li>content goes </li>
    <li>content goes here</li>
    <li>content goes here</li>
  </ul>
  <a class= "Next" ></a>
</div>

jquery Slide Anoslide Title

Js

$ ('. Carousel.captions ul '). Anoslide ({items:1, speed:500, prev: ' a.prev[data-prev-caption] ', Next: ' A.next[dat A-next-caption] ', Lazy:true, Onstart:function (UI) {/* Remove existing caption in Slide */ui.slide.elemen
  T.find ('. Caption '). Remove ();
     
    }, Onend:function (UI) {/* Get caption Content */var content = ui.slide.element.data (' caption '); /* Create A caption Wrap element */var caption = $ (' <div/> '). AddClass (' caption '). css ({position: ' AB
      Solute ', background: ' RGB (0,0,0) ', Color: ' RGB (255,255,255) ', Textshadow: ' RGB (0,0,0) -1px-1px ',
      opacity:0.5, Top: -100, left:50, padding:20, Webkitborderradius:5, Mozborderradius:5,
     
    Borderradius:5}). html (content); /* Append caption to slide and animate it. Animation is really up to you.
  */Caption.appendto (ui.slide.element). Animate ({top:50});
 }
})

HTML

<div class= "Carousel Captions" > <a class= "prev" data-prev-caption></a> <ul> <li data-c aption= "Adding captions are really easy" > <figure></fi
      gure> </li> <li data-caption= "Anoslide ' callback functions can be used for adding captions" > <figure></figure> </li> <li data-caption= "<span style= ' color: #00f0ff ' >html-no problem</span><br/><br/>it ' s really up to/to decide W Hether to use HTML or not. 
      > <figure></figure> </li> <li>
      <figure></figure> </li> <li>
    <figure></figure> </li> <li>  <figure></figure> </li> <li> &L T;figure></figure> </li> </ul> <a class = "Next" data-next-caption></a> <a class= "badge" ></a> </div>

The above is about the jquery merry-go-round slide carousel effect, I hope to help you learn.