-1

添付した画像に似たコンテンツスライダーを作成したいと思います。通常のコンテンツスライダーを使用してオーバーフローを表示に設定することで、3つのスライドを表示できるかどうか疑問に思っています。しかし、スライダーで、通常は表示される領域にslide2を配置することは可能ですか？

スライダー画像http://img835.imageshack.us/img835/3994/sliderew.jpg

jsfiddle.net/craigie2204/WMF2N/2

jQuery(document).ready(function($){
// Setup Variables
var slides = $('#slider_mask .slide_container').children();
var total_slides = slides.length; // ***CHANGED***
var slide_width = $('#slider_mask').width();
var current_slide = 0;

// ***REMOVED*** slides.not(':first').hide();
// Set the width of the slide_container to total width of all slides
$('#slider_mask .slide_container').width(slide_width*total_slides);

slides.width(slide_width); // ***ADDED***

// Handle Right Arrow Click
$('#slider_mask .right_button').on('click', function() {

current_slide++;

if(current_slide == total_slides){ current_slide = 0; }

var negative_margin_required = current_slide*slide_width;
$('#slider_mask .slide_container').stop().animate({marginLeft:-      negative_margin_required+'px'},'fast');


});

// Handle Left Arrow Click
$('#slider_mask .left_button').on('click', function() {

current_slide--;

if(current_slide < 0){ current_slide = total_slides-1; }

var negative_margin_required = current_slide*slide_width;
$('#slider_mask .slide_container').stop().animate({marginLeft:-    negative_margin_required+'px'},'fast');

});
});
4

2 に答える 2

4

あなたのフィドルによると、そしてコードに深く入り込むことなく、あなたはこれを使うことができます：

var current_slide = 1;
$('#slider_mask .slide_container').css('marginLeft', -current_slide*slide_width+'px');

これを使用すると、の初期値を設定することで、任意のスライドから開始できますcurrent_slide。

これがデモです：

http://jsfiddle.net/bMv6P/

于 2013-03-13T15:17:40.570 に答える
3

スライド幅を取得した後、これをJavaScriptに追加できます。

    $('#slider_mask .slide_container').css({marginLeft:-slide_width+'px'});

または、cssのmarginプロパティを固定スライド幅に設定するだけです。

ここにフィドルがあります：http： //jsfiddle.net/WMF2N/3/

于 2013-03-13T15:17:57.443 に答える