jquery - 硬币 slider 调整大小问题

Question

我有使用硬币 slider 的画廊

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

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

假设您有以下硬币 slider 面板:

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

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

它实际上删除了 <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;
}