javascript
  • jquery
  • html
  • css
  • 2016-04-14 58 views 0 likes 
    0

    我的代碼:油滑旋轉木馬無法正常工作瓦特/默認樣式

    <html> 
    <head> 
        <link rel="stylesheet" type='text/css' href='../style.css'> 
        <link rel="stylesheet" type='text/css' href='//cdn.unreal-designs.co.uk/cont/cdnjslatest/?lib=slick-carousel&file=slick.css'> 
        <link rel="stylesheet" type='text/css' href='//cdn.unreal-designs.co.uk/cont/cdnjslatest/?lib=slick-carousel&file=slick-theme.css'> 
    </head> 
    <body> 
    
    <div class="slideCont"> 
    
    <div class="slider-info"> 
        <div>Info</div> 
        <div>Info2</div> 
        <div>Info3</div> 
        <div>Info4</div> 
    </div> 
    <div class="slider-img"> 
        <div>Img</div> 
        <div>Img2</div> 
        <div>Img3</div> 
        <div>Img4</div> 
    </div> 
    
    </div> 
    
    <script src="//cdn.unreal-designs.co.uk/cont/cdnjslatest/?lib=jquery&file=jquery.min.js"></script> 
    <script src="//cdn.unreal-designs.co.uk/cont/cdnjslatest/?lib=jquery-migrate&file=jquery-migrate.min.js"></script> 
    <script src="//cdn.unreal-designs.co.uk/cont/cdnjslatest/?lib=slick-carousel&file=slick.min.js"></script> 
    
    <script> 
    $(document).ready(function(){ 
    $('.slider-info').slick({ 
        slidesToShow: 1, 
        slidesToScroll: 1, 
        arrows: false, 
        fade: true, 
        asNavFor: '.slider-img' 
    }); 
    $('.slider-img').slick({ 
        slidesToShow: 3, 
        slidesToScroll: 1, 
        asNavFor: '.slider-info', 
        dots: true, 
        centerMode: true, 
        focusOnSelect: true 
    }); 
    }); 
    </script> 
    
    </body> 
    </html> 
    

    這意味着是像這裏的滑塊同步處理樣品:http://kenwheeler.github.io/slick/(近的例子底部)

    我的代碼可以看到住在這裏:http://new.unreal-designs.co.uk/portfolio/但每張幻燈片都是全寬,使其顯得毫無用處。

    Style.css只包含基本內容,不應以任何方式影響滑塊。

    回答

    0

    好吧,所以在玩過之後,我想我已經找到了問題。 Slick不會改變幻燈片的高度以適應內容,因此幻燈片會填充頁面.-

    不知道如何解決這個問題,儘管在JS中。

    相關問題