Question

我正在尝试使用插件Unslider（http://unslider.com/）来实现一个非常简单的幻灯片。现在，坦率地说，我只是想让它消失，但我无法让这个选项工作，我只是不明白为什么。水平和垂直动画都有效，而不是褪色。

不是显示幻灯片，而是只显示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，但这也没有解决它。

非常感谢。

Answer 1

这是一个“淡化”效果的错误。你应该给你的滑块一个固定的高度。例如：

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

就是这样，现在你有“淡化”效果。享受！

jQuery插件Unslider - 淡化选项不起作用

1 个答案: