Bootstrap implementation of a pause-enabled Carousel component (recommended) _javascript tips

Recently, bloggers in the project to use a carousel component, full-featured, you can set a variety of title style, animation effect, rotation time, beginning to suspend functions, this recommendation to everyone for your reference.

One, the effect shows

Say more useless, see a group of effect show picture, feel!

1, meet everybody first, say hello

2, what? Is the switch too slow? All right, speed up!

3. Add other functions

4, the picture is too small, do not see the effect? Okay, let's get a big picture!

5, if you do not want to the upper right corner of the small icon, still can.

6, if you are not satisfied with the above sliding effect, the component provides several other picture switching mode

Fade in

Horizontal Slide

7, another picture positioning

Ii. Introduction of components

Orbit is a GitHub open source component that needs jquery support, open source address.

Third, code example

It is also quite simple to use, first download the source code, reference required components to the page.

<link href= "~/content/orbit-master/orbit-1.3.0.css" rel= "stylesheet"/> <script src=
"~/content/" Jquery-1.9.1.js "></script>
<script src=" ~/content/orbit-master/jquery.orbit-1.3.0.js "></ Script>

Then HTMLL the code as follows

<div class= "Container" > <div id= "featured" >        </div> <!--captions for Orbit--> <span class=" orbit-caption "id=" HtmlCaption1 ">& lt;strong>1</strong></span> <span class= "orbit-caption" id= "HtmlCaption2" ><strong>2 </strong></span> <span class= "orbit-caption" id= "HtmlCaption3" ><strong>3</strong> </span> <span class= "orbit-caption" id= "HtmlCaption4" ><strong>4</strong></span> <span class= "orbit-caption" id= "HtmlCaption5" ><strong>5</strong></span> < Span class= "orbit-caption" id= "HtmlCaption6" ><strong>6</strong></span> <span class= " Orbit-caption "id=" htmlCaption7 "><strong>7</strong></span> </div>

These are all fixed structures, and the id= "featured" inside the div is used to initialize the component

Last JS initialization

<script type= "Text/javascript" >
$ (function () {
$ (' #featured '). Orbit ();
</script>

The above simple code completes the above example picture 3 effect. Is it easy!?

1, initialization of common properties introduced

The above simple code can complete the initialization of our component, in fact, the initialization method $ (' #featured '). Orbit (); is not fixed, it can pass in multiple parameters to achieve different carousel effect. Because the component documents are not very complete, these properties are found by looking at the source, the following bloggers based on their own attempts and understanding of some common initialization properties.

The Advancespeed property is used to set the transition time for the picture, the default is 4000, and the unit is milliseconds.

The Timer property is used to control whether the start Pause function, which is the small icon in our upper right corner, is controlled by it. The default is True (open).

The animation property is used to control the animation effects of picture transitions, available options include fade (fade in), Horizontal-slide (vertical slide), vertical-slide (horizontal slide), Horizontal-push, Vertical-push A total of 5 species.

The Captions property indicates whether the picture caption is enabled.

The Captionanimation property is used to control the toggle animation of the caption.

The Directionalnav property controls whether the previous page, next page button feature is enabled.

Additional initialization properties allow you to view the source code:

The final usage is as follows:

 $ (' #featured '). Orbit ({
//advancespeed:4000,//picture switch time
//timer:false,//Whether start pause function
//animation: ' fade ', Animation effects: There are fade (fade in), horizontal-slide (vertical sliding), vertical-slide (horizontal sliding), Horizontal-push, Vertical-push
//captions: False,//whether to enable
the title//captionanimation: ' Slideopen ',///Title animation
//directionalnav:false,//Whether the previous page, next page feature
});

2. Components common methods and event resolution

In addition to the initialized properties, the component provides a number of events for us to invoke. View component source can see the following sentence:

This representation binds some of these events to the current label. How do we use them? For example, the function of the location image used by the blogger, we can write this.

$ ("#featured"). Trigger (' Orbit.goto ', 3);//Navigate to the fourth picture. Note that the index here is starting from 0.
$ (' #featured '). Trigger (' orbit.stop ');/Stop picture Poll
$ (' #featured '). Trigger (' Orbit.start '); Enable picture polling

And of course, their events like Orbit.next and Orbit.prev should also be well understood, which means switching to the next and previous pictures.

The above is a small set to introduce the bootstrap implementation with suspend function of the carousel components (recommended), I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!