【jQuery】jQuery Feature Carousel Options
http://www.bkosborne.com/jquery-feature-carousel/options
HTML
<script src="https://raw.github.com/bkosborne/jQuery-Feature-Carousel/master/js/jquery.featureCarousel.min.js"></script>
<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<div id="carousel">
<div class="carousel-feature"><img class="carousel-image" src="http://placekitten.com/g/150/100" alt="" /></div>
<div class="carousel-feature"><img class="carousel-image" src="http://placekitten.com/150/100" alt="" /></div>
<div class="carousel-feature"><img class="carousel-image" src="http://placekitten.com/g/150/100" alt="" /></div>
<div class="carousel-feature"><img class="carousel-image" src="http://placekitten.com/150/100" alt="" /></div>
<div class="carousel-feature"><img class="carousel-image" src="http://placekitten.com/g/150/100" alt="" /></div>
<div class="carousel-feature"><img class="carousel-image" src="http://placekitten.com/150/100" alt="" /></div>
</div>
<div id="carousel-left"><<prev</div>
<div id="carousel-right">next>></div>
CSS
#carousel {
width: 600px;
height: 200px;
}
#carousel li {
position: absolute;
}
#carousel-left,
#carousel-right {
cursor: pointer;
}
.carousel-feature {
position:absolute;
top:-1000px;
left:-1000px;
border:2px solid #5d5d5d;
cursor:pointer;
}
.tracker-individual-container {
position: absolute;
right: 10px;
}
.tracker-individual-container li {
float: left;
display: block;
}
JavaScript
$(document).ready(function() {
var carousel = $("#carousel").featureCarousel({
smallFeatureWidth: 150,
smallFeatureHeight: 100,
animationEasing: 'easeInOutCubic',
smallFeatureOffset: 0
});
});