Question

JSSOR Banner滑块是否可能： http://www.jssor.com/demos/banner-slider.html

在调整大小时不缩放缩略图旁边的文字？

在开发中查看我的网站： http://www.hansdietze.com/2014/diamant.php?taal=nl

文字没有缩放，在iPad纵向上无法读取，我害怕....

Answer 1

我猜你可以用css来增加文字的字体大小。怎么样替换

    <!-- ThumbnailNavigator Skin Begin -->
    <div u="thumbnavigator" class="sliderb-T" style="position: absolute; bottom: 0px; left: 0px; height:45px; width:860px;">
        <div style="filter: alpha(opacity=40); opacity:0.4; position: absolute; display: block;
            background-color: #000000; top: 0px; left: 0px; width: 100%; height: 100%;">
        </div>
        <!-- Thumbnail Item Skin Begin -->
        <div u="slides">
            <div u="prototype" style="POSITION: absolute; WIDTH: 860px; HEIGHT: 45px; TOP: 0; LEFT: 0;">
                <thumbnailtemplate style="font-family: 'News Cycle', sans-serif;
font-size:16px;
font-weight:700;
 POSITION: absolute; WIDTH: 100%; HEIGHT: 100%; TOP: 0; LEFT: 0; color:#fff; line-height: 36px; padding-left:10px;"></thumbnailtemplate>
            </div>
        </div>
        <!-- Thumbnail Item Skin End -->
    </div>
    <!-- ThumbnailNavigator Skin End -->

与

    <!-- ThumbnailNavigator Skin Begin -->
    <style>
        .thumb_text {
            font-family: 'News Cycle', sans-serif;
            font-size: 16px;
            font-weight: 700;
            POSITION: absolute;
            WIDTH: 100%;
            HEIGHT: 100%;
            TOP: 0;
            LEFT: 0;
            color: #fff;
            line-height: 36px;
            padding-left: 10px;
        }

        @media only screen and (max-width: 768px) {
            .thumb_text {
                font-size: 20px;
            }
        }
    </style>

    <div u="thumbnavigator" class="sliderb-T" style="position: absolute; bottom: 0px; left: 0px; height:45px; width:860px;">
        <div style="filter: alpha(opacity=40); opacity:0.4; position: absolute; display: block;
            background-color: #000000; top: 0px; left: 0px; width: 100%; height: 100%;">
        </div>
        <!-- Thumbnail Item Skin Begin -->
        <div u="slides">
            <div u="prototype" style="POSITION: absolute; WIDTH: 860px; HEIGHT: 45px; TOP: 0; LEFT: 0;">
                <thumbnailtemplate class="thumb_text"></thumbnailtemplate>
            </div>
        </div>
        <!-- Thumbnail Item Skin End -->
    </div>
    <!-- ThumbnailNavigator Skin End -->

Answer 2

此外，缩略图导航器还有一个$ Scale选项，但调整大小会有点复杂。

            $ThumbnailNavigatorOptions: {
                ...
                $Scale: false,
                ...
            }

JSSOR Banner Slider Thumb Text没有比例

2 个答案: