Pick a doll

Which one do you like?

  • Doll01
  • Doll02
  • Doll03

How it works

1. Get your graphics ready.
2. Download the plugin here.
3. Code HTML/CSS.
4. Insert jquery.cbpFWSlider.min.js and javascript into HTML.
5. Customize the style in the CSS coding.

The HTML
<div id="cbp-fwslider" class="cbp-fwslider">
    <ul>
        <li><a href="#"><img src="images/1.jpg" alt="img01"></a></li>
        <li><a href="#"><img src="images/2.jpg" alt="img02"></a></li>
        <li><a href="#"><img src="images/3.jpg" alt="img03"></a></li>
        <li><a href="#"><img src="images/4.jpg" alt="img04"></a></li>
        <li><a href="#"><img src="images/5.jpg" alt="img05"></a></li>
    </ul>
</div>
The CSS
.cbp-fwslider {
    position: relative;
    margin: 0 0 10px;
    overflow: hidden;
    padding: 40px 0 60px;
}
 
.cbp-fwslider ul {
    margin: 0;
    padding: 0;
    white-space: nowrap;
    list-style-type: none;
}
 
.cbp-fwslider ul li {
    transform: translateZ(0);
    float: left;
    display: block;
    margin: 0;
    padding: 0;
}
 
.cbp-fwslider ul li > a,
.cbp-fwslider ul li > div {
    display: block;
    text-align: center;
    outline: none;
}
 
.cbp-fwslider ul li > a img {
    border: none;
    display: block;
    margin: 0 auto;
    max-width: 75%;
}
 
.cbp-fwslider nav span {
    position: absolute;
    top: 50%;
    width: 50px;
    height: 100px;
    background: #47a3da;
    color: #fff;
    font-size: 50px;
    text-align: center;
    margin-top: -50px;
    line-height: 100px;
    cursor: pointer;
    font-weight: normal;
}
 
.cbp-fwslider nav span:hover {
    background: #378fc3;
}
 
.cbp-fwslider nav span.cbp-fwnext {
    right: 0px;
}
 
.cbp-fwslider nav span.cbp-fwprev {
    left: 0px;
}
 
.cbp-fwdots {
    position: absolute;
    bottom: 0px;
    white-space: nowrap;
    text-align: center;
    width: 100%;
}
 
.cbp-fwdots span {
    display: inline-block;
    width: 18px;
    height: 18px;
    background: #ddd;
    margin: 4px;
    border-radius: 50%;
    cursor: pointer;
}
 
.cbp-fwdots span:hover {
    background: #999;
}
 
.cbp-fwdots span.cbp-fwcurrent {
    background: #47a3da;
    box-shadow: 0 0 0 2px #47a3da;
    transition: box-shadow 0.2s ease-in-out;
}
The Javascript
$( function() {
    /*
	- how to call the plugin:
	$( selector ).cbpFWSlider( [options] );
	- options:
	{
		// default transition speed (ms)
		speed : 500,
		// default transition easing
		easing : 'ease'
	}
	- destroy:
	$( selector ).cbpFWSlider( 'destroy' );
	*/

	$( '#cbp-fwslider' ).cbpFWSlider();

} );