我正在使用SlidesJS。图像滑块在桌面上工作正常,但现在我想为移动设备加载不同的图像集。我浏览了SlidesJS论坛及其网站,但在那里找不到任何提示,我还查看了关于SO的各种问题,但均无济于事。由于slidesJS提供了这样的默认代码
Javascript
<!-- SlidesJS Required: Initialize SlidesJS with a jQuery doc ready -->
<script>
$(function() {
$('#gallery-slides').slidesjs({
width: 800,
height: 450,
play: {
active: true,
auto: true,
interval: 4000,
swap: true
}
});
});
</script>
HTML
<div id="gallery-slides">
<img src="images/nearby_page_concept.jpg" >
<img src="images/location_gif2-min.gif" >
<img src="images/smart_search_page.jpg" >
<img src="images/privacy_control_concept.jpg" >
<img src="images/messaging_page_concept.jpg" >
<img src="images/user_search_page_concept.jpg" >
</div>
CSS
#gallery-slides {
display: none
}
#gallery-slides .slidesjs-navigation {
margin-top:5px;
}
a.slidesjs-next,
a.slidesjs-previous,
a.slidesjs-play,
a.slidesjs-stop {
background-image: url(../images/btns-next-prev.png);
background-repeat: no-repeat;
display:block;
width:12px;
height:18px;
overflow: hidden;
text-indent: -9999px;
float: left;
margin-right:5px;
}
a.slidesjs-next {
margin-right:10px;
background-position: -12px 0;
}
a:hover.slidesjs-next {
background-position: -12px -18px;
}
a.slidesjs-previous {
background-position: 0 0;
}
a:hover.slidesjs-previous {
background-position: 0 -18px;
}
a.slidesjs-play {
width:15px;
background-position: -25px 0;
}
a:hover.slidesjs-play {
background-position: -25px -18px;
}
a.slidesjs-stop {
width:18px;
background-position: -41px 0;
}
a:hover.slidesjs-stop {
background-position: -41px -18px;
}
.slidesjs-pagination {
margin: 7px 0 0;
float: right;
list-style: none;
}
.slidesjs-pagination li {
float: left;
margin: 0 1px;
}
.slidesjs-pagination li a {
display: block;
width: 13px;
height: 0;
padding-top: 13px;
background-image: url(../images/pagination.png);
background-position: 0 0;
float: left;
overflow: hidden;
}
.slidesjs-pagination li a.active,
.slidesjs-pagination li a:hover.active {
background-position: 0 -13px
}
.slidesjs-pagination li a:hover {
background-position: 0 -26px
}
#gallery-slides a:link,
#gallery-slides a:visited {
color: #333
}
#gallery-slides a:hover,
#gallery-slides a:active {
color: #9e2020
}
.gallery-navbar {
overflow: hidden
}
#gallery-slides {
display: none
}
.containerslides {
margin: 0 auto
}
我尝试了其他方法来使滑块在移动设备上更改图像,例如
将类名替换为<img src="xyz.jpg">
并借助CSS中的媒体请求声明不同的图像
已尝试HTML中的javascript的else语句
我还需要弄清楚是否可以更改图像,然后还需要更改SlidesJS的JS部件的默认高度和宽度。
请指导我如何更改图像滑块的不同屏幕尺寸的不同图像。
请注意,当我不显示图像时,我不想加载所有不同分辨率的图像。它影响网站的性能。