html - 将非响应式 slider 变成响应式 slider

Question

我想在这里使用 Javascript Image Slider HERE (因为右边的缩略图适合我正在尝试做的事情，但它没有响应。Menucool 确实有一个响应 slider ，但它是一个直接的图像 slider 。

是否可以采用此 slider 并使其响应？在移动设备上，正如预期的那样，它目前只显示 slider 的左侧，然后从屏幕上消失。

HTML

<div id="sliderFrame">
    <div id="slider">
        <a href="http://www.menucool.com/jquery-slider" target="_blank">
            <img src="http://s21.postimg.org/hx350x0kz/image_slider_1.jpg" alt="Welcome to  jQuery Slider" />
        </a>
        <a class="lazyImage" href="http://s21.postimg.org/buviafc4z/image_slider_2.jpg"  title="Pure Javascript. No jQuery. No Flash.">Pure JavaScript</a>
        <a href="http://www.menucool.com/javascript-image-slider"><b data- src="http://s21.postimg.org/645bwp44z/image_slider_3.jpg">Image Slider</b></a>
        <a class="lazyImage" href="http://s21.postimg.org/755kltl4j/image_slider_4.jpg"  title="">Slide 4</a>
    </div>
    <!--thumbnails-->
    <div id="thumbs">
        <div class="thumb">
            <div class="frame"><img src="http://s21.postimg.org/teewemr77/thumb1.jpg" />  </div>
            <div class="thumb-content"><p>HTML Content</p>Thumbnails allows any HTML content</div>
            <div style="clear:both;"></div>
        </div>
        <div class="thumb">
            <div class="frame"><img src="http://s21.postimg.org/hdy1rn96b/thumb2.jpg" /> </div>
            <div class="thumb-content"><p>Customizable</p>Thumbnail style is customizable</div>
            <div style="clear:both;"></div>
        </div>
        <div class="thumb">
            <div class="frame"><img src="http://s21.postimg.org/yiargkroz/thumb3.jpg" /></div>
            <div class="thumb-content"><p>Variety of Layouts</p>Just a CSS tweak.</div>
            <div style="clear:both;"></div>
        </div>
        <div class="thumb">
            <div class="frame"><img src="http://s21.postimg.org/w4stpkd9v/thumb4.jpg" /></div>
            <div class="thumb-content"><p>Integration</p>Built-in functions for the thumbnails</div>
            <div style="clear:both;"></div>
        </div>
    </div>
    <!--clear above float:left elements. It is required if above #slider is styled as float:left. -->
    <div style="clear:both;height:0;"></div>
</div>

CSS

/* http://www.menucool.com */

/*slider frame*/
#sliderFrame 
{
width:920px;
margin:0 auto; /*center-aligned*/
padding:20px;
box-shadow: 0 0 5px #BBB;border:1px solid #CCC; background-color:#FFF;
}

#slider, #slider div.sliderInner {
width:680px;height:306px;/* Must be the same size as the slider images */
}

#slider {
float:left;
background:#fff url(loading.gif) no-repeat 50% 50%;
position:relative;
transform: translate3d(0,0,0);
}

/* the link style (if an image is wrapped in a link) */
#slider a.imgLink, #slider .video {
z-index:2;
position:absolute;
top:0px;left:0px;border:0;padding:0;margin:0;
width:100%;height:100%;
}
#slider .video {
background:transparent url(video.png) no-repeat 50% 50%;
}

/* Caption styles */
#slider div.mc-caption-bg, #slider div.mc-caption-bg2 {
position:absolute;
width:400px;
height:auto;
padding:10px 0;/* 10px will increase height.*/
left:120px; /*if the caption needs to be aligned from right, specify by right instead  of left. i.e. right:20px;*/
bottom:10px;/*if the caption needs to be aligned from top, specify by top instead of  bottom. i.e. top:150px;*/
z-index:3;
overflow:hidden;
font-size:0;
}
#slider div.mc-caption-bg {
/* NOTE: Its opacity is to be set through the sliderOptions.captionOpacity setting in the   js-image-slider.js file.*/
background:#DDD;/* or any other colors such as Black, or: background:none; */
border:1px solid white;
border-radius: 5px;
}
#slider div.mc-caption-bg2 {
background:none;
}
#slider div.mc-caption {
font:bold 13px/16px Arial;
color:#069;
z-index:4;
text-align:center;
background:none;
}
#slider div.mc-caption a { 
color:#060;
}


/* ------ built-in navigation bullets wrapper that is relative to the #slider ------*/
#slider div.navBulletsWrapper  {
display:none;
}

/* --------- Others ------- */

#slider div.loading 
{
width:100%; height:100%;
background:transparent url(loading.gif) no-repeat 50% 50%;
filter: alpha(opacity=60);
opacity:0.6;
position:absolute;
left:0;
top:0; 
z-index:9;
}

#slider img, #slider>b, #slider a>b {
position:absolute; border:none; display:none;
}

#slider div.sliderInner {
overflow:hidden; 
-webkit-transform: rotate(0.000001deg);/* fixed the Chrome not crop border-radius   bug*/
position:absolute; top:0; left:0;
}

#slider>a, #slider video, #slider audio {display:none;}



/* -- thumbnails -- */
#thumbs 
{
float:left;
margin-left:10px;
width:230px;
font:normal 11px/13px Arial;
border-top:1px solid #CCC;
color:#666;
}
#thumbs .thumb 
{
border:1px solid #CCC;
border-top:1px solid #FFF;
padding:11px 8px;
background:#EEE;
}
#thumbs .thumb-on 
{
background:#FFF;
}

#thumbs img{border:1px solid #DDD; cursor:pointer; width:70px; height:44px;}

#thumbs .frame {float:left;padding:2px;border:1px solid #CCC;background:white;border-    radius:3px;box-shadow:0 0 3px #BBB;font-size:0;line-height:0;}
#thumbs .thumb-content {float:left;width:110px;padding-left:18px;}

/* Captions in #thumbs .thumb-content */
#thumbs .thumb-content p {font-weight:bold; color:#BF5D9B; margin:0 0 3px;padding:0;}
#thumbs .thumb-on .thumb-content p {color:#BB0000;}

这是一个 fiddle ，虽然我无法让主图像出现在上面，但我没有复制所有的 JS，因为有很多。 http://jsfiddle.net/wSGFG/

Answer 1

你确实可以让它响应。

这是 Fiddle响应式操作中的幻灯片

要使内容具有响应性，有几个基本步骤:

1. 使用media queries 并保持简单!
2. 宽度，宽度宽度!这决定了事情将如何堆叠。如果您不知道查看内容的屏幕有多大，请指定宽度、填充和边距的百分比。这确保了一致性。
3. 选择一个起点，然后重新开始。这意味着要么先开始设计和设计您的移动版本，然后按向上的方式设计，要么先设计您的桌面版本，然后按向下的方式设计。最佳实践是 mobile first

CSS 像往常一样通过媒体查询进行级联，因此您只需指定要更改的内容。当两个查询都适用时，不要两次写入相同的属性。

对于宽度，请务必检查水平内边距、边距和宽度均未使用诸如 % 之类的相对值，因为这允许一些基本数学来预测如何显示您的内容。它也更整洁，因为您不需要每 20 个像素进行一次新的媒体查询来调整元素的大小。这一切都会为你完成。

如果操作正确，您可以仅使用 2 个主要媒体查询创建一个完全响应的网站，突破 max-width:480px(移动)和 max-width:780px (平板电脑)。其他任何东西都是桌面。在小查询中需要的地方添加一些调整是很常见的，或者作为 bug fixes for certain devices .