Question

我的滑块有问题，JS的宽度设置为1366，但我试图将其更改为自动，但它无法正常工作。我怎么能实现这一目标？当在宽屏幕上打开网站时，宽度与之匹配，除滑块外一切都很好，它没有调整大小

＆＃13;

effectsDemo2 = 'rain,stairs,fade';
var demoSlider_2 = Sliderman.slider({
  container: 'SliderName_2',
  width: 1366,
  height: 630,
  effects: effectsDemo2,
  display: {
    autoplay: 3000,
    loading: {
      background: '#000000',
      opacity: 0.5,
      image: 'img/loading.gif'
    },
    buttons: {
      hide: true,
      opacity: 1,
      prev: {
        className: 'SliderNamePrev_2',
        label: ''
      },
      next: {
        className: 'SliderNameNext_2',
        label: ''
      }
    },
    description: {
      hide: true,
      background: '#000000',
      opacity: 0.4,
      height: 50,
      position: 'bottom'
    },
    navigation: {
      container: 'SliderNameNavigation_2',
      label: '<img src="img/clear.gif" />'
    }
  }
});

＆＃13;

<div id="SliderName_2" class="SliderName_2">
  <img src="img/1.jpg" usemap="#img1map" />
  <map name="img1map">
						<area href="#img1map-area1" shape="rect" coords="100,100,200,200" />
						<area href="#img1map-area2" shape="rect" coords="300,100,400,200" />
					</map>
  <div class="SliderName_2Description"></div>
  <img src="img/2.jpg" />
  <div class="SliderName_2Description"></div>
  <img src="img/3.jpg" />
  <div class="SliderName_2Description"></div>
  <img src="img/4.jpg" />
  <div class="SliderName_2Description"></div>
</div>
<div class="c"></div>
<div id="SliderNameNavigation_2"></div>
<div class="c"></div>

＆＃13;

Answer 1

如果您用于滑块支持宽度值的插件为“100％”，则可以传递此值并将滑块包装在另一个HTML元素中。然后在HTML元素上应用CSS并使用媒体查询相应地缩放到视口宽度。

以下代码未经过测试，但应该适用于您的问题

HTML

<div class="sliderWrapper">
     ... Your slider code
</div>

CSS

.sliderWrapper {
    width: 350px
}

@media (min-width: 769px) {
   .sliderWrapper {
       width: 700px
  }
}

在JS CSS中将滑块widtth设置为auto

1 个答案: