根据所选链接显示页面加载时的特定幻灯片

Question

我使用的是一个JQuery滑块，可以在一张幻灯片中显示4个相邻的Wordpress帖子。帖子显示的是用户可以点击以查看所选服务的服务。每张幻灯片中有2张幻灯片显示了这些服务。每个服务页面都包括顶部的滑块，其下方是服务描述。

http://www.richmindonline.com/virtual/service-options/

问题是，我想先加载第二张幻灯片-只有当用户选择第二张幻灯片上的产品时。

我该如何设置？这是用于加载滑块的脚本-它位于Wordpress中的一个插件中。

我会上传额外的代码，如果需要。

   //$upload_dir = wp_upload_dir();
$output = '<!--Automatic Image Slider w/ CSS & jQuery with some customization-->';
$output .='<script type="text/javascript">
$j = jQuery.noConflict();
$j(document).ready(function() {';

//Set Default State of each portfolio piece
if ($pagination_style != '3' ){
    $output .='$j("#rps .paging").show();';
}
$output .='$j("#rps .paging a:first").addClass("active");

$j(".slide").css({"width" : '.$width.'});
$j("#rps .window").css({"width" : '.($width).'});
$j("#rps .window").css({"height" : '.$height.'});

$j("#rps .col").css({"width" : '.(($width/$post_per_slide)-2).'});
$j("#rps .col").css({"height" : '.($height-4).'});
$j("#rps .col p.post-title span").css({"color" : "'.($post_title_color).'"});
$j("#rps .post-date").css({"top" : '.($height-20).'});
$j("#rps .post-date").css({"width" : '.(($width/$post_per_slide)-12).'});';

if (!empty($post_title_bg_color_js)){
    $output .='$j("#rps .col p.post-title").css({"background-color" : "'.($post_title_bg_color_js).'"});';
}

$output .='var imageWidth = $j("#rps .window").width();
//var imageSum = $j("#rps .slider div").size();
var imageReelWidth = imageWidth * '.$paging.';

//Adjust the image reel to its new size
$j("#rps .slider").css({"width" : imageReelWidth});

//Paging + Slider Function
rotate = function(){    
    var triggerID = $active.attr("rel") - 1; //Get number of times to slide
    //alert(triggerID);
    var sliderPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

    $j("#rps .paging a").removeClass("active"); 
    $active.addClass("active");

    //Slider Animation
    $j("#rps .slider").stop(true,false).animate({ 
        left: -sliderPosition
    }, 500 );
}; 
var play;
//Rotation + Timing Event
rotateSwitch = function(){      
    play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
        $active = $j("#rps .paging a.active").next();
        if ( $active.length === 0) { //If paging reaches the end...
            $active = $j("#rps .paging a:first"); //go back to first
        }
        rotate(); //Trigger the paging and slider function
    }, '.$slider_speed.');
};

rotateSwitch(); //Run function on launch

//On Hover
$j("#rps .slider a").hover(function() {
    clearInterval(play); //Stop the rotation
}, function() {
    rotateSwitch(); //Resume rotation
}); 

//On Click
$j("#rps .paging a").click(function() { 
    $active = $j(this); //Activate the clicked paging
    //Reset Timer
    clearInterval(play); //Stop the rotation
    rotate(); //Trigger rotation immediately
    rotateSwitch(); // Resume rotation
    return false; //Prevent browser jump to link anchor
}); 
});

</script>';

Answer 1

将此jQuery添加到页面将使滑块移动，以便当前产品可见

jQuery(".slider").css("left", jQuery("a[href='" + document.location.pathname + "']").parents().find(".slide").index() * -955);

确保你的.slide的宽度始终是955px，否则你应该将955设置为变量。

(它不是最漂亮的，也不是使用代码片段的最少资源，但它将以最小的努力完成工作;-)