将无响应滑块转换为响应滑块

Question

我想使用Javascript这里的这里 (作为缩略图在正确的西服，但我试图做的，但它没有反应。Menucool确实有一个响应滑块在那里，但它是一个直接向前的图像滑块。

是否有可能采取这个滑块，并使其响应？在手机上，就像预期的那样，它现在只显示滑块的左手边，然后离开屏幕。

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;}

这是一个小提琴，虽然我不能得到主要的图像出现在这个，我没有复制所有的JS在这里，因为有很多。http://jsfiddle.net/wSGFG/

Answer 1

你确实可以做出反应。

这里是您的幻灯片在响应动作中的 小提琴

要使内容响应，有几个基本步骤：

1. 使用媒体查询并保持简单！
2. 宽度，宽度！这决定了事情将如何堆叠。如果您不知道查看内容的屏幕有多大，请使用百分比指定宽度、填充和页边距。这确保了一致性。
3. 选择一个结束开始，然后回去工作。这意味着要么开始设计和设计你的移动版本，然后按你的方式工作，要么你的桌面版本先设计，然后向下工作。最佳实践是移动第一

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

对于宽度，请确保不检查任何水平填充，边距和宽度使用相对值(如% )，因为这允许一些基本数学来预测如何显示内容。它也要整洁得多，因为您不需要每20个像素就有一个新的媒体查询来调整元素的大小。一切都会为你做的。

如果你做得对，你可以创建一个完全响应的网站，只使用两个主要的媒体查询，打破max-width:480px (移动)和max-width:780px (平板电脑)。其他任何东西都是桌面。在小查询中或作为某些设备的错误修复，在需要时添加一些调整是很常见的。