从第二张幻灯片开始的jquery滑块

-1

我想创建一个类似于我附加的图片的内容滑块。我想知道如果通过采用正常的内容滑块并将溢出设置为可见，我将能够显示3张幻灯片。但滑块是否可以将slide2放置在通常可见的区域？从第二张幻灯片开始的jquery滑块

slider image 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'); 

}); 
});

来源

2013-03-13 craigie2204

是的，它是可能的。显示你正在处理的代码，以便有人可以改进它。 – insertusernamehere 2013-03-13 14:36:17

你使用的是什么滑块插件？ – Pete 2013-03-13 14:37:07

所有你问的都可能在jquery中，所以你不需要再想知道，并尝试这样做。如果您遇到问题，请向我们显示您的代码，我们会尽力帮助您。 – 2013-03-13 14:37:23

根据你的小提琴，并没有进入代码深，你可以使用这个：

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

有了这个，您可以通过设置初始值current_slide开始您想要的任何幻灯片。

这里有一个演示：

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

或只是在CSS margin属性设置为固定slidewidth：

http://jsfiddle.net/bMv6P/

来源

2013-03-13 15:17:40 insertusernamehere

的小提琴大也感谢 – craigie2204 2013-03-13 15:20:34

你得到slidewidth后，您可以添加到JavaScript本。

这里是小提琴： http://jsfiddle.net/WMF2N/3/

来源

2013-03-13 15:17:57

大谢谢 – craigie2204 2013-03-13 15:22:54

不幸的是，这将不仅仅是工作。你也必须将'current_slide'设置为'1'。在你的小提琴中尝试。滑动从一开始就不正常。 – insertusernamehere 2013-03-13 15:25:34

@insertusername它在我的jsfiddle中工作...它基本上和你的一样，但少了一些代码和操作...因为我只是调用slide_width，并且不会将它乘以幻灯片编号=） – 2013-03-13 15:35:45

从第二张幻灯片开始的jquery滑块

回答

相关问题