Jssor Slider not working for devexpress listboxes

2019-09-09 05:24发布

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 = &quot;./gridview.aspx&quot;;} " 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 = &quot;./gridview.aspx&quot;;} " 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>

Jssor Slider

0条回答
登录 后发表回答