Question

我想在这里使用Javascript Image Slider HERE（因为右边的缩略图适合我想要做的事情，但它没有响应.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

你确实可以做出回应。

以下是您在响应式操作中幻灯片显示的Fiddle

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

使用media queries 并保持简单！
宽度，宽度宽度！这决定了事物的堆叠方式。鉴于您不知道查看内容的屏幕有多大，请指定宽度，填充和百分比边距。这确保了一致性。
选择一个结束开始，然后再回来。这意味着要么首先开始设计和设计移动版本，然后按照 up 的方式工作，要么首先设计桌面版本并按照向下的方式工作。最佳做法是 mobile first

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

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

如果你做得对，你可以只使用2个主要媒体查询创建一个完全响应的网站，分为max-width:480px（移动）和max-width:780px（平板电脑）。其他任何东西都是桌面。在次要查询中需要添加一些调整，或bug fixes for certain devices。

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

1 个答案: