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; 
    }

和一個實際上應該顯示的網頁標題：

<?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"); 
?>

的圖像正在從數據庫中蠻好的，與任何其他兩個設置幻燈片播放功能，拉，所以我有點困惑，是什麼問題。我甚至嘗試鏈接到jQuery UI CDN，但是這並沒有解決它。

非常感謝。

來源

2016-09-19 KellyMarchewa

那麼，根據GitHub網址：https：//github.com/idiot/unslider/issues它是由白癡寫的，所以你知道......;）。說真的，我會先問那個網址。 –

這是一個具有「淡入淡出」效果的錯誤。你應該給你的滑塊一個固定的高度。像這樣的東西：

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

但是，這不是一個好的解決方案。我喜歡這一個：更改您的JavaScript這樣的：

$('.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：

.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; 
}

就是這樣，現在你有「變臉」的效果。請享用！

來源

2017-07-14 08:38:06 denic

jQuery插件Unslider - 淡入淡出選項不起作用

回答

相關問題