一个页面上有多个bxSlider实例

我在一个页面上有四个幻灯片，我想使用bxSlider在循环中运行

我很擅长标记和CSS，但还不是很精通javascript。 我想我必须错过一个关键元素，因为目前没有任何幻灯片正在运行。 我希望得到一些帮助让所有四个人都能工作。 谢谢！

JS：

  $('#slider1').bxSlider({ auto: true, autoControls: true, pause: 3000, slideMargin: 20 }); $('#slider2').bxSlider({ auto: true, autoControls: true, pause: 3000, slideMargin: 20 }); $('#slider3').bxSlider({ auto: true, autoControls: true, pause: 3000, slideMargin: 20 }); $('#slider4').bxSlider({ auto: true, autoControls: true, pause: 3000, slideMargin: 20 });  

CSS：

 .slider { position: relative; float: right; padding-right: 400px; margin-left: 40px; height: 350px; } .slider img { position: absolute; max-width: 350px; height: auto; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; top: 0; left: 0; z-index: 8; } 

加价：