Question

我对jssor来说是全新的，而且不是新手编码器。我今天刚刚发现了jssor carousel滑块，我一直在玩它大概10个小时。

我通过查看本网站上的其他问题设法解决了我的大多数问题，但过去几个小时我一直在圈子里跑来跑去。

首先澄清一下，我喜欢Slider及其扩展能力，但我需要它更基本，并且有点保持我所说的。 :)我想我经过几个小时后才能在我的导航下停留在一个地方，而且它似乎很好（虽然我可能做得更糟糕。

我现在的主要问题是它似乎在IE中完美运行，在我原生的Android手机上浏览器，但在Chrome和Safari上，旋转木马不会保持高度。我的照片是@ 200x180，而在IE11中，它们看起来是合适的尺寸。在其他浏览器中，滑块仅显示为大约1/2＆＃34;高。

我的页面是PHP，我将滑块页面调用到我的主页上，其中包含＆＃34; Include＆＃34;声明（对不起，我认真的绿色）。现在我从jssor.com中删除的代码确实有一些HTML引用，所以这也可能给我一些问题。

你可以在（SilverScreenCollectibles.com）现场查看。我还粘贴了下面的代码（我在PHP页面上使用的代码），以便您可以看到我在这方面有多糟糕。

我真的很感激任何人都能提供的任何帮助。

谢谢，

比尔

<!DOCTYPE html>
<html>
<head>
<div class="span9">  
    <script src="assets/js/jquery-1.8.2.min.js" type="text/javascript">     </script>
    <script src="assets/js/jquery.carouFredSel-6.0.4-packed.js"     type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {

            //  create carousel
            $('#carousel').carouFredSel({
            responsive: false,
                items: {
                    width: 200,
                    height: '90%',
                    visible: 8
                },
                auto: {
                    items: 1
                },
                prev: '#prev',
                next: '#next'
            });

            // re-position the carousel, vertically centered
            var $elems = $('#wrapper, #prev, #next'),
                $image = $('#carousel img:first')

            $(window).bind( 'resize.example', function() {
                var height = $image.outerHeight( true );

                $elems
                    .height( height )
                    // .css( 'marginTop', -( height/2 ) );

             }).trigger( 'resize.example' );

        });
    </script>
    <style type="text/css">
        html, body {
            height: 100%;
            padding: 0;
            margin: 0;
        }
        body {
            min-height: 50px;
            position: relative;
        }
        body h3 {
            font-family: Arial, Geneva, SunSans-Regular, sans-serif;
            font-size: 20px;
            text-align: center;
            color: #999;
            margin: 0;
            padding-top: 50px;
        }
        body * {
            font-family: Arial, Geneva, SunSans-Regular, sans-serif;
            font-size: 14px;
            color: #333;
            line-height: 22px;
        }

        #wrapper, #prev, #next {
            border-top: 1px solid #999;
            border-bottom: 1px solid #999;
            height: 170px;
            position: absolute;
            /* top: 35%;*/
            margin-top: 0px;
        }
        #wrapper {
            width: 80%;
            left: 10%;
            overflow: hidden;
            box-shadow: 0 0 10px #ccc;
        }

        #carousel img {
            margin: 10px 5px;
            border: none;
            display: block;
            float: left;
        }

        #prev, #next {
            background: center center no-repeat #ccc;
            width: 5%;
        }
        #prev:hover, #next:hover {
            background-color: #bbb;
        }
        #prev {
            background-image: url( assets/slide-imgs/form/gui-prev.png );
            left: 0;
        }
        #next {
            background-image: url( assets/slide-imgs/form/gui-next.png );
            right: 0;
        }
    </style>
</head>
<body>
        <div id="wrapper">
        <div id="carousel">
            <img src="cw4/images/product_full/LC-ChainedFrt.jpg" alt="Image1" width="212" height="180" onclick="window.location.replace('http://silverscreencollectibles.com/product.php?product=110');" />
        </div>
    </div>
    <a id="prev" href="#"></a>
    <a id="next" href="#"></a>

    </div>
</body>

jssor - 尺寸和稳定性问题

比尔

0 个答案: