jQueryプラグインUnslider - フェードオプションが機能しない

プラグインUnslider（http://unslider.com/）を使用して、非常に簡単なスライドショーを実装しようとしています。今は、率直に言って、私はただ消したいだけですが、私はこのオプションをうまく動作させることができず、理由を理解できません。水平アニメーションと垂直アニメーションの両方が機能します。フェードではありません。jQueryプラグインUnslider - フェードオプションが機能しない

スライドショーを表示する代わりに、1px程度の薄い画像が表示されます。私は間違って何をしていますか？

footer.php

<?php if($isHotel != 0) { 
    echo "<script src='/MidAmCorp/includes/scripts/unslider.js'></script>"; 
} 
?> 

     <script src='/MidAmCorp/includes/scripts/base.js'></script> 
</body> 
</html>

の部分header.phpの部分

<html> 
    <head> 
     <link rel='stylesheet' href='/MidAmCorp/includes/styles/bootstrap.css'> 
       <link rel='stylesheet' href='/MidAmCorp/includes/styles/base.css'> 
       <link rel='stylesheet' href='/MidAmCor/includes/styles/slicknav.css'> 
     <link rel='stylesheet' href='/MidAmCorp/includes/styles/unslider.css'> 
     <script src='/MidAmCorp/includes/scripts/jquery.js'></script> 
     <script src='/MidAmCorp/includes/scripts/bootstrap.js'></script> 
         <script src='/MidAmCorp/includes/scripts/slicknav.js'></script> 

      <?php if($isTeam != false) { 
        echo "<link rel='stylesheet' href='/MidAmCorp/includes/styles/team.css'> 
          <script src='/MidAmCorp/includes/scripts/picturehover.js'></script>"; 
       } ?> 
    </head> 
    <body> 
     <div class="container"> 
      <header class="container-fluid"> 
      <nav class="navbar"> 
        <div class="navbar-header"> 

       <a class = "navbar-brand" href = "index.php"><img class = "img-responsive" src = "/MidAmCorp/includes/img/logo.png" alt = "Mid-America Logo"></a> 
        </div> 

        <div class='row'> <div class="col-md-12"> <ul class = 'nav navbar-nav navbar-right'>

実際スライドショーマークアップ生成機能：

public function printHotelHeader($hotel) { 
     $htmlString = "<div class='row topSection'><div class='col-md-12'><h2>$hotel->name</h2></div></div>"; 
     $htmlString .= "<div class='row container-fluid'><div class='col-md-12' id='homeSlider'><ul>"; 
     foreach ($hotel->sliderImages as $image) { 
      $htmlString .= "<li><img class='img-responsive' src='" . IMAGEPATH . "/hotels/" . $image->path . "' /></li>"; 
     } 
     $htmlString .= "</ul></div></div>"; 

$htmlString .= $this->hotelNav($hotel); 
     return $htmlString; 
    }

一つを実際に表示されるはずのWebページのヘッダ：

<?php 
include("../includes/header.php"); 
echo $cmsInstance->printHotelHeader($hotel); 
echo $cmsInstance->printHotelSidebar($hotel); 
?> 

<div class='col-md-6 hotelBody'> 


/* some content here */ 

    <?php 
include("../includes/footer.php"); 
?>

画像がうまくデータベースから引き出され、他の2つの設定のいずれかでのスライドショー機能、私は問題が何であるかについてのビット困惑していますされています。私はjQueryのUI CDNにリンクしようとしましたが、これで修正されませんでした。

ありがとうございました。

出典

2016-09-19 KellyMarchewa

GitHub URL：https://github.com/idiot/unslider/issuesによると、それは馬鹿によって書かれたので、あなたは知っています...;）。真剣に、私は最初にそのURLを尋ねるだろう。 –

これは「フェード」効果を持つバグです。スライダーに固定された高さを設定する必要があります。

.carousel{height: 800px} // Just an example

しかし、それは良い解決策ではありません。私はこの1つを好む：今、あなたは "フェード" 効果を持っている

.carousel ul li { 
    opacity: 0; 
    -webkit-transition: opacity .75s; // you can change this, for example 1s 
    transition: opacity .75s; // you can change this 
} 

.carousel ul li.unslider-active { 
    opacity: 1; 
}

そして、それはそれだ：

$('.carousel').unslider({ 
    autoplay: true, 
    speed: 0, //don't change this line 
    delay: 3000, 
    nav: false, 
    infinite: true, 
    arrows: { 
    prev: '<div class="prev-btn"></div>', 
    next: '<div class="next-btn"></div>' 
} 
})

とCSSにこれを追加します。このようなあなたのjavascriptを変更。楽しい！

出典

2017-07-14 08:38:06 denic

jQueryプラグインUnslider - フェードオプションが機能しない

答えて

関連する問題