Question

我有使用硬币滑块的画廊

var $jq = jQuery.noConflict(); 
    $jq(window).load(function() { 
        var imheight = $jq(window).height()-40;
        var imwidth = imheight / 1.5;
        $jq('#placeholder').css({'width':imwidth+'px','height':imheight+'px','margin-left':'-'+imwidth/2+'px','margin-top':'-'+imheight/2+'px'});
        $jq('#vslider').coinslider({ 
          width:imwidth, 
          height:imheight, 
          spw: 6, 
          sph: 4, 
          delay: 2500, 
          sDelay: 30, 
          opacity: 0.7, 
          titleSpeed: 1500, 
          effect: '', 
          navigation: false, 
          links : true, 
          hoverPause: false, 
          stopAtLastSlide: true 
        });
 })

和HTML：

<div id="placeholder">
  <div id="vslider">
    <a href="/main"><img src="/preload/2.jpg" alt="701" /></a>
    <a href="/main"><img src="/preload/1.jpg" alt="563" /></a>
  </div> 
</div>

占位符div加载正确的宽度和高度。
但是vslider并没有改变它的大小它能是什么？

Answer 1

我在试图做同样的事情时遇到了一些麻烦。经过大量的挖掘，我发现了如何做到这一点。

假设您有以下硬币滑块面板：

            <div id="banner_slideshow">
                <a href="#1">
                    <img src="header-image-bg1.jpg" alt="" />
                </a>
            </div>

coin-slider将为每个用于动画绘制的“square”生成一个名为cs-<container-id>的类，在本例中为cs-banner_slideshow。

它实际上删除了您放置的<img>，并将其替换为背景等效图像。

所以基本上你需要做的就是把它放在你的 .js 中：

$('#banner_slideshow').coinslider({
    width: 1000, // width of slider panel
    height: 350, // height of slider panel
});

// Resize picture.
$('.cs-banner_slideshow').css('background-size', '1000px 350px');

（您也可以在.css文件中执行此操作，但我发现它更适合javascript文件，因为它访问coin-slider的内部实现，我不希望在我的样式表文件中）。

在您的 .css ：

中

#banner_slideshow {
    background-repeat: no-repeat;
    background-size: 1000px 350px;
}

用硬币滑块调整问题大小

1 个答案: