问题
I haveimplemented a Jssor slider using devexpress listboxes. I am not able to slide the listboxes when i click on the previous and next arrows. Need help to make the listboxes slide.
Jquery for the Jssor slider
< script type = "text/javascript" >
jQuery(document).ready(function($) {
var jssor_2_options = {
$AutoPlay: false,
$AutoPlaySteps: 1,
//$SlideDuration: 160,
$SlideWidth: 1300,
$SlideSpacing: 0,
$Cols: 5,
$Captions: true,
$ShowLink: true,
$SlidesCount: true,
//$MinDragOffsetToSlide: 20,
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$,
$Steps: 1
},
};
var jssor_3_slider = new $JssorSlider$("jssor_3", jssor_3_options);
}); < /script>CSS for jssor slider
.jssora03l1 {
display: block !important;
position: relative;
width: 65px;
height: 65px;
cursor: pointer;
background: url('../../Content/Images/previousslides.png') no-repeat;
overflow: hidden;
top: 100px !important;
left: 0px;
width: 55px;
height: 55px;
}
.jssora03r1 {
display: block !important;
position: absolute;
width: 65px;
height: 65px;
cursor: pointer;
background: url('../../Content/Images/nextslides.png') no-repeat;
overflow: hidden;
top: 150px !important;
right: -5px;
width: 55px !important;
height: 55px;
-webkit-right: -5px !important;
}
.jssora03l1.jssora03ldn {
background-position: -243px -33px;
}
.jssora03r1.jssora03rdn {
background-position: -303px -33px;
}Html code for Jssor slider with listbox
<div id="listBox" class="listboxSlider">
<div id="jssor_2" style="position: relative; margin: 0 auto; top: -18px; left: 0px ! important; width: 1010px !important; height: 390px; overflow: hidden; visibility: hidden; background: #fff; box-shadow: 0px 5px 5px 0px #d3d3d3;">
<div class="dvModHeader">
<p class="modheadr">CLINICAL <span class="name">REPORTS</span>
</p>
</div>
<!-- Loading Screen -->
<div data-u="loading" style="position: absolute; top: 0px; left: 0px;">
<div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;">
</div>
<%-- <div style="position: absolute; display: block; background: url('img/loading.gif') no-repeat center center; top: 0px; left: 0px; width: 100%; height: 100%;">
</div>--%>
</div>
<div data-u="slides" style="cursor: default; position: relative; top: 20px; left: 9px; width: 1010px; height: 320px; overflow: hidden;">
<div style=" width: 1010px; margin-left: -50px; margin-top: 30px">
<table>
<tr>
<td>
<dx:ASPxListBox ID="ASPxListBox1" runat="server" Width="250px" Height="280px" CssClass="listBox3" ClientInstanceName="lbModels" DataSourceID="" ValueField="item_id" TextField="name" Caption="" EnableTheming="true" SelectedIndex="1" Theme="Office2003Silver"
AutoPostBack="true" OnValueChanged="lstReport_Selected" Cursor="pointer">
<Items>
<dx:ListEditItem Selected="True" Text="Utilization Studies" Value="Top Procedure Report" />
<dx:ListEditItem Selected="True" Text="Top Procedure Report" Value="Top Procedure Report" />
<dx:ListEditItem Selected="True" Text="Top Procedure Report" Value="Top Procedure Report" />
</Items>
</dx:ASPxListBox>
</td>
<td>
<dx:ASPxListBox ID="ASPxListBox2" runat="server" Width="250px" Height="280px" CssClass="listBox2" ClientInstanceName="lbModels" DataSourceID="" ValueField="ID" EnableTheming="True" SelectedIndex="1" Theme="Office2003Silver">
<Items>
<dx:ListEditItem Selected="True" Text="Top Procedure Report" Value="Top Procedure Report" />
<dx:ListEditItem Selected="True" Text="Top Procedure Report" Value="Top Procedure Report" />
<dx:ListEditItem Selected="True" Text="Top Procedure Report" Value="Top Procedure Report" />
<dx:ListEditItem Selected="True" Text="Top Procedure Report" Value="Top Procedure Report" />
</Items>
</dx:ASPxListBox>
</td>
<td>
<dx:ASPxListBox ID="ASPxListBox3" runat="server" Width="250px" Height="280px" CssClass="listBox1" ClientInstanceName="lbModels" DataSourceID="" ValueField="ID" EnableTheming="True" SelectedIndex="2" Theme="Office2003Silver">
<CaptionSettings Position="Top" />
<Items>
<dx:ListEditItem Selected="True" Text="Physician Productivity" Value="Top Procedure Report" />
<dx:ListEditItem Selected="True" Text="Top Procedure Report" Value="Top Procedure Report" />
<dx:ListEditItem Selected="True" Text="Top Procedure Report" Value="Top Procedure Report" />
</Items>
</dx:ASPxListBox>
</td>
<td>
<dx:ASPxListBox ID="ASPxListBox4" runat="server" Width="250px" Height="280px" CssClass="listBox3" ClientInstanceName="lbModels" DataSourceID="" ValueField="ID" EnableTheming="True" SelectedIndex="1" Theme="Office2003Silver">
<ClientSideEvents BeginCallback="function(s, e) { window.location = "./gridview.aspx";} " ItemDoubleClick="function(s, e) {}" />
<CaptionSettings Position="Top" />
<Items>
<dx:ListEditItem Selected="True" Text="Operational Control" Value="Operational Control" />
<dx:ListEditItem Selected="True" Text="Top Procedure Report" Value="Top Procedure Report" />
<dx:ListEditItem Selected="True" Text="Top Procedure Report" Value="Top Procedure Report" />
</Items>
</dx:ASPxListBox>
</td>
<td>
<dx:ASPxListBox ID="ASPxListBox5" runat="server" Width="250px" Height="280px" CssClass="listBox3" ClientInstanceName="lbModels" DataSourceID="" ValueField="ID" EnableTheming="True" SelectedIndex="1" Theme="Office2003Silver">
<ClientSideEvents BeginCallback="function(s, e) { window.location = "./gridview.aspx";} " ItemDoubleClick="function(s, e) {}" />
<CaptionSettings Position="Top" />
<Items>
<dx:ListEditItem Selected="True" Text="Top Procedure Report" Value="Top Procedure Report" />
<dx:ListEditItem Selected="True" Text="Top Procedure Report" Value="Top Procedure Report" />
<dx:ListEditItem Selected="True" Text="Top Procedure Report" Value="Top Procedure Report" />
</Items>
</dx:ASPxListBox>
</td>
</tr>
</table>
</div>
</div>
<span data-u="arrowleft" class="jssora03l1" data-autocenter="2"></span>
<span data-u="arrowright" class="jssora03r1" data-autocenter="2"></span>
</div>
</div>
来源：https://stackoverflow.com/questions/37940201/jssor-slider-not-working-for-devexpress-listboxes