Jssor滑块无响应

时间:2014-09-08 06:26:33

标签: slider jssor

我的滑块没有响应。当我重新扩展浏览器时,它不会重新调整大小。即使我在平板电脑或手机中使用,我也希望滑块能够响应。

滑块代码位于导航栏下方。

<!DOCTYPE html"">
<html lang="en-US">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />

    <title>Vijay Hemant Finance & Estates Limited</title>
        <link rel="shortcut icon" href="" />
 <link rel='stylesheet' id='page-css'  href='css/bootstrap-shortcodes.css' type='text/css' media='all' />   
  <link rel='stylesheet' id='page-css'  href='css/settings.css' type='text/css' media='all' />  
  <style type="text/css">.tp-caption a{color:#ff7302;text-shadow:none;-webkit-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;-ms-transition:all 0.2s ease-out}.tp-caption a:hover{color:#ffa902}</style>
</style>
  <link rel='stylesheet' id='page-css'  href='css/shortcodes.css' type='text/css' media='all' />  


<link rel='stylesheet' id='bootstrap-css-css'  href='css/bootstrap.css' type='text/css' media='all' />
<link rel='stylesheet' id='bootstrap-responsive-css-css'  href='css/bootstrap-responsive.css' type='text/css' media='all' />
<link rel='stylesheet' id='main_style-css'  href='css/style.css' type='text/css' media='all' />
<!--
<link rel='stylesheet' id='Merriweather-css'  href='http://fonts.googleapis.com/css?family=Merriweather%3A400%2C700%2C900%2C300&#038;ver=3.5.1' type='text/css' media='all' />
<link rel='stylesheet' id='fontawesome-css'  href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css?ver=3.5.1' type='text/css' media='all' />
<link rel='stylesheet' id='google_fonts-css'  href='http://fonts.googleapis.com/css?family&#038;ver=3.5.1' type='text/css' media='all' /> -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
 <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jssor.core.js"></script>
<script type="text/javascript" src="js/jssor.utils.js"></script>
<script type="text/javascript" src="js/jssor.slider.js"></script>
<script type="text/javascript" src="js/slider.js"></script>


<style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>
<style type="text/css" id="custom-background-css">
body.custom-background { background-image: url(''); background-repeat: repeat; background-position: top left; background-attachment: fixed; }
</style>
<link rel='stylesheet' id='page-css'  href='css/page.css' type='text/css' media='all' />
<link rel='stylesheet' id='slider-css'  href='css/slider.css' type='text/css' media='all' />
</head>

<body class="home blog custom-background">


<div id="container">
    <div class="container-narrow">

        <!-- Header -->
        <header>
            <div class="top">
                <div class="container">
                    <div class="row-fluid">
                        <div class="span12">
                            <!-- Logo -->
                            <div class="logo" style="margin-top:20px;margin-bottom:20px;margin-left:0px;">
                                                                <a href="index.html"><img src="img/logo4.png" alt='Vijay Hemant Finance & Estates Limited' title="Vijay Hemant Finance & Estates Limited"/></a>
                            </div>
                            <!-- Site description -->
                            <h2 class="site_heading">Handling Money........   With Devotion And Care</h2>
                            <!-- Contact -->
                                                                                        <div class="header_contact rounded">
                                                                            <div class="phone"><img src="img/phoneicon.png" alt="phone icon" /><span>044-30228855                </span></div>
                                                                                                                <div class="email"><img src="img/mailicon.png" alt="mail icon" /><span><a href="office@vijayhemant.in">office@vijayhemant.in</a></span></div>
                                                                    </div>
                                                    </div>
                    </div>
                </div>
            </div>
       <div> <img src="img/separator.png" style="margin-top: -60px; width:755px;
margin-left: 390px; "></div>

<!-- Menu Navigation -->
            <div class="menu_wrap" style="position:relative; top:-60px;">
                <div class="container">
                    <div class="navbar navbar-inverse navbar-relative-top">
                      <div class="navbar-inner">
                        <div class="container">
                          <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse">

                          </a>
                          <div class="nav-collapse collapse navbar-responsive-collapse" style="height:auto;">


<ul id="menu-menu" class="nav">
<li id="menu-item-284" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home active menu-item-284"><a title="Home" href="index.html">Home</a></li>
<li id="menu-item-9" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-9 dropdown-submenu"><a title="Blog" href="commercial-vehicles.html" data-toggle="dropdown" data-target="#" class="dropdown-toggle">Business<span class="caret"></span></a>
<ul class="dropdown-menu ">
    <li id="menu-item-68" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-68"><a title="Commercial Vehicles" href="commercial-vehicles.html">Commercial Vehicles</a></li>
    <li id="menu-item-82" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-82"><a title="Car / LMV" href="car-finance.html">Car Finance</a></li>
</ul>
</li>
<li id="menu-item-594" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-594"><a title="About Us" href="about-us.html">About Us</a></li>

</li>
<li id="menu-item-275" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-275"><a title="CSR" href="csr.html">CSR</a></li>

</li>
<li id="menu-item-594" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-594"><a title="Investment" href="investment.html">Investment</a></li>

<!-- <li id="menu-item-85" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-85 dropdown-submenu"><a title="Shortcodes" href="" data-toggle="dropdown" data-target="#" class="dropdown-toggle">services<span class="caret"></span></a>
<ul class="dropdown-menu ">
    <li id="menu-item-68" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-68"><a title="Blog Fullwidth" href="">Fixed Deposits</a></li>
    <li id="menu-item-82" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-82"><a title="Blog Sidebar Left" href="">Recurring Deposits</a></li>
    <li id="menu-item-149" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-149"><a title="Standard" href="">Annual Reports</a></li>
</ul>
</li> -->

<li id="menu-item-594" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-594"><a title="Contact Us" href="contact-us.html">Contact Us</a></li>
<li id="menu-item-594" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-594"><a title="Downloads" href="download.html">Downloads</a></li>
</ul>

                            </div>
                        </div>
                      </div>
                    </div>
                </div>
            </div>     



</header>
<section style="margin-top:-75px;">
  <!-- Jssor Slider Begin -->
    <!-- You can move inline styles to css file or css block. -->
    <div id="slider2_container" style="position: relative; width: 600px;
        height: 350px;">

        <!-- Loading Screen -->
        <div u="loading" style="position: absolute; top: 0px; left: 0px;">
            <div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block;
                background-color: #000; top: 0px; left: 0px;width: 100%;height:100%;">
            </div>
            <div style="position: absolute; display: block;  no-repeat center center;
                top: 0px; left: 0px;width: 100%;height:100%;">
            </div>
        </div>

        <!-- Slides Container -->
        <div class="sliderrs" u="slides" style="cursor: move; position: absolute; left: 150px; top: 0px; width: 1000px; height: 372px;
            overflow: hidden;">
            <div>
                <a u=image href="#"><img src="img/slider1.jpg" /></a>
            </div>
            <div>
                <a u=image href="#"><img src="img/slider2.jpg" /></a>
            </div>
            <div>
                <a u=image href="#"><img src="img/slider3.jpg" /></a>
            </div>
        </div>

        <!-- Bullet Navigator Skin Begin -->
        <!-- jssor slider bullet navigator skin 01 -->

        <!-- bullet navigator container -->
        <div u="navigator" class="jssorb01" style="position: absolute; bottom: 30px; left: 620px;">
            <!-- bullet navigator item prototype -->
            <div u="prototype" style="POSITION: absolute; WIDTH: 12px; HEIGHT: 12px;"></div>
        </div>
        <!-- Bullet Navigator Skin End -->

        <!-- Arrow Navigator Skin Begin -->

        <!-- Arrow Left -->
        <span u="arrowleft" class="jssora05l" style="width: 40px; height: 40px; top: 123px; left: 8px;">
        </span>
        <!-- Arrow Right -->
        <span u="arrowright" class="jssora05r" style="width: 40px; height: 40px; top: 123px; right: 8px">
        </span>
        <!-- Arrow Navigator Skin End -->
        <a style="display: none" href="http://www.jssor.com">slideshow</a>
    </div>
    <!-- Jssor Slider End -->

</section>
 <!-- SLIDER ends -->


<!-- CONTENT STARTS -->
<section style="margin-top: 10px;">
<div class="container">
<!--part-1-->
<div class="row-fluid part_home">

<!-- SERVICES LEFT -->
<section>

        <div class="span4 ca-menu left">
            <div class="row-fluid">

                <style type="text/css">
                    .ca-menu .ca-item270:hover {background-color: #FFFFFF}
                    .ca-menu.left .ca-item:hover a.more_link span, .ca-menu.left .ca-item:hover h1, .ca-menu.left .ca-item:hover p{color: #515151 !important;}

                    .ca-menu .ca-item270 {background-color: #D25555}                    
                    .ca-item270 .ca-main {color: #FFFFFF;}
                    .ca-item270 .ca-sub {color: #FFFFFF}
                    .ca-item270 .more_link {color: #FFFFFF;}
                </style>


                <div class="ca-item ca-item270 rounded">
                    <div class="ca-content">
                    <a href="investment.html">
                            <h2 class="ca-main">Secure Future</h2>
                            <p>&nbsp;</p>
                            <p align="justify" class="ca-sub">Become an entrepreneur and grow with the booming and extremely lucrative  logistic sector. We are serving  this segment since 1985 and have turned many dreams into reality.</p>
                     </a>
                    </div>

                </div>
                            </div>
        </div>

<!-- SERVICES CENTER -->      


        <div class="span4 ca-menu center">          
            <div class="row-fluid">             


                <style type="text/css">
                    .ca-menu .ca-item277:hover {background-color: #FFFFFF}
                    .ca-menu.center .ca-item:hover a.more_link span, .ca-menu.center .ca-item:hover h1, .ca-menu.center .ca-item:hover p{color: #515151 !important;}
                    .ca-menu .ca-item277 {background-color: #515151}
                    .ca-item277 .ca-main {color: #FFFFFF;}
                    .ca-item277 .ca-sub {color: #FFFFFF}
                    .ca-item277 .more_link {color: #FFFFFF;}
                </style>


                <div class="ca-item ca-item277  rounded">
                    <div class="ca-content">
                    <a href="about-us.html">
                        <h2 class="ca-main">Strong Values</h2>
                        <p>&nbsp; </p>
                        <p align="justify" class="ca-sub">We value people, culture, tradition, and respect honesty, truth, integrity and experience.</p>
                    </a>
                    </div>
                </div>
             </div>
        </div><!-- span4 -->

<!-- SERVICES RIGHT -->     


        <div class="span4 ca-menu right">
            <div class="row-fluid">


                <style type="text/css">
                    .ca-menu .ca-item279:hover {background-color: #FFFFFF}
                    .ca-menu.right .ca-item:hover a.more_link span, .ca-menu.right .ca-item:hover h1, .ca-menu.right .ca-item:hover p{color: #103042 !important;}

                    .ca-menu .ca-item279 {background-color: #236890}                    
                    .ca-item279 .ca-main {color: #FFFFFF;}
                    .ca-item279 .ca-sub {color: #FFFFFF}
                    .ca-item279 .more_link {color: #FFFFFF;}
                </style>


                <div class="ca-item ca-item279 rounded">
                <a href="commercial-vehicles.html">
                    <div class="ca-content">
                    <a href="commercial-vehicles.html">
                            <h2 class="ca-main"> Dedicated Services </h2>
                            <p>&nbsp;</p>
                            <p align="justify" class="ca-sub">  We have a bunch of loyal associates who have grown with the company and will partner you in all your needs.</p>
                         </a>
                         </a>
                    </div>

                </div>
             </div>
        </div><!-- span4 -->
        <div style="clear:both;"> </div>







<!-- NEWS RIGHT  -->


</div>
<!--part-1-->               
<!--part-2-->                
<!--part-2-->
<!--part-3-->
</div><!-- .container -->
<!--part-3-->

</section>
    <div style="clear:both;"> </div><div style="clear:both;"> </div>
<section  class="homecon">
         <div class="container">
            <div class="row-fluid">
           <ul>
           <p align="justify">

<li>
  <div align="justify"> Vijay Hemant Finance & Estates limited incorporated in the year 1985, listed on the Madras stock exchange serves the small and medium transport sector segment in Tamilnadu.</div>
<li>
  <div align="justify"> We provide loans  from 1 year to 3 years upto 70% value of the vehicle and upto 10 year old vehicle.
  </div>
<li>
  <div align="justify">  We have branches in Ramnad, Madurai, Coimbatore, Trichy & our head office is in Chennai.
  </div>
<li>
  <div align="justify"> A useful life of a vehicle is 15 years and we fund this segment.
  </div>
<li>
  <div align="justify"> We pride ourselves in last mile connectivity with the transport sector throughout Tamilnadu with our loyal staff, committed service and rare dedication.
  </div>
<li>
  <div align="justify">Attractive terms for the deposits and service through our Chennai office with monthly, quarterly and annual interest options.

    </p>
  </div>
</ul>
            </div>
       </div>  
       <br><br><br><br>
       </section>
<!-- Div for styling purpose only -->
            <div class="blank_separator"></div>

               <!--prefooter-->
            <section>
                <div class="row-fluid">
                    <img src="img/shadow-divider.png" class="shadow_divider">
                </div>
                <div class="container">
                    <div class="row-fluid twitter_wrap">                        
                            <div class="span9" style="">
                              <p><a href=""style="color:#900;"> Vijay Hemant Finance & Estates Limited,</a> A trusted financial service group in India.</a></p></div>
                            <style type="text/css">
                            .social:hover {opacity: 0.5; filter: alpha(opacity=30);}
                            </style>



                </div>  
        </section>

        <!-- Footer -->
        <footer>
            <div class="container">
                <div class="row-fluid">
                    <!-- Footer Widget 1 -->
                    <div class="span4">
                        <div class="textwidget"><p><a href="index.html"><img src="img/logo5.png"></a></p></br>
<p>A trusted financial service group in India. The activities of the group span savings products like Deposits, Car and Commercial Vehicle Finance...</p>
</div>
        </li>

                    </div>
  <style type="text/css"> 
  .quicklinks{ }
  </style>
                    <!-- Footer Widget 2 -->


                    <div class="span4">
                        <h3 class="widget_title">Useful Links</h3>
                        <ul id="quicklinks">
                         <li class="quicklinks"><a href="contact-us.html">Branches</a></li>
                        <li class="quicklinks"><a href="download/Deposit Interest Rate.pdf">Deposit Rates</a></li>
                        <li class="quicklinks"><a href="download/Deposit Application.pdf">Deposit Form</a></li>
                        <li class="quicklinks"> <a href="download/Interest Rate Model.pdf">Interest Rate Model</a></li>
                        <li class="quicklinks"> <a href="investment.html">Invester Relations</a></li>
                        <li class="quicklinks"><a href="download/Fair practice Code.pdf">Fair Practice Code</a></li></ul></li>

                    </div>  


                    <!-- Footer Widget 3 -->
                    <div class="span4">
         <h3 class="widget_title">Head Office (Chennai)</h3>
        <p>
          No:110,5th floor,Prakash Presidium,<br />
          Mahatma Gandhi Road,<br />
          Nungabakkam,Chennai-600 034
          Phone:044-3022885</p>
                     </div>
                </div>

                <!-- footer 4-->


                <br>
             <div id="foot">
                    <img src="img/separator.png" alt="separator" />
                    <div class="span8"><p>Copyright 2014&copy;All Rights Reserved by Vijay Hemant Finance & Estates Limited.</p></div>
               </div>    

            </div><!-- /container -->
        </footer>

    </div><!-- container-fluid ends -->






</body>
</html>

1 个答案:

答案 0 :(得分:1)

您可以使用API​​实例。$ ScaleWidth(width)来缩放滑块。

以下是典型的响应代码,

    //responsive code begin
    //you can remove responsive code if you don't want the slider scales
    //while window resizes
    function ScaleSlider() {
        var parentWidth = $('#slider1_container').parent().width();
        if (parentWidth) {
            jssor_slider1.$ScaleWidth(parentWidth);
        }
        else
            window.setTimeout(ScaleSlider, 30);
    }
    //Scale slider after document ready
    ScaleSlider();

    $(window).bind("load", ScaleSlider);
    $(window).bind("resize", ScaleSlider);
    $(window).bind("orientationchange", ScaleSlider);
    //responsive code end

参考:http://www.jssor.com/development/tip-make-responsive-slider.html