CODEWITHSUNDEEP
jquery
KellyM
KellyM

Reputation: 2532

jQuery plugin Unslider - Fade option not working

I am attempting to use the plugin Unslider (http://unslider.com/) to implement a very simple slideshow. Right now, quite frankly, I just want it to fade, but I am having trouble getting this option to work, and I just do not understand why. Both horizontal and vertical animations work, just not the fade.

Instead of displaying a slideshow, there is just a thin 1px or so line of the image(s) showing. What am I doing wrong?

A portion of 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>

A portion of 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'>

The function that actually generates the slideshow markup:

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

and one of the web pages that is actually supposed to display the header:

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

The images are being pulled from the database just fine, and the slideshow functions with either of the other two settings, so I am a bit perplexed as to what the issue is. I even tried linking to the jQuery UI CDN, but this did not fix it either.

Thanks much.

Upvotes: 0

Views: 248

Answers (1)

user6023290
user6023290

Reputation:

THere is a bug with "fade" effect. You should give your slider a fixed height.Something like:

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

But, that is not a good solution. I prefer this one: Change your javascript like this:

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

And add this to 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;
}

And that's it, now you have "fade" effect. Enjoy!

Upvotes: 1

Related Questions