简体   繁体   中英

Javascript Slideshow Issue. Getting Blank Screen

I am using the following code to place a javascript slideshow on my website - http://leemark.github.io/better-simple-slideshow/ . I am trying to implement example 2 given on the link. I must be doing something wrong because all I get is blank screen. No images and the caption.

This is the code that I have on my website.

    <div class="bss-slides num2" tabindex="2">
           <figure>
              <img src="bodhgaya.jpg" width="100%" /><figcaption>"Snowying" by <a href="http://www.flickr.com/photos/fiddleoak/8511209344/">fiddleoak</a>.</figcaption> 
           </figure>
            <figure>
                <img src="chardham.jpg" width="100%" /><figcaption>"Starlight" by <a href="http://www.flickr.com/photos/chaoticmind75/10738494123/in/set-72157626146319517">ChaoticMind75</a>.</figcaption> 
           </figure>
           <figure>
              <img src="taj.jpg" width="100%" /><figcaption>"Snowstorm" by <a href="http://www.flickr.com/photos/tylerbeaulawrence/8539457508/">Beaulawrence</a>.</figcaption> 
           </figure>
            <figure>
              <img src="konarksuntemple.jpg" width="100%" /><figcaption>"Misty winter afternoon" by <a href="http://www.flickr.com/photos/22746515@N02/5277611659/">Bert Kaufmann</a>.</figcaption> 
           </figure>
            <figure>
              <img src="http://themarklee.com/wp-content/uploads/2013/12/good-morning.jpg" width="100%" /><figcaption>"Good Morning!" by <a href="http://www.flickr.com/photos/frank_wuestefeld/4306107546/">Frank Wuestefeld</a>.</figcaption> 
           </figure>
        </div>
<script src="hammer.min.js"></script><!-- for swipe support on touch interfaces -->
<script src="better-simple-slideshow.min.js"></script>
<script>
var opts = {
    auto : {
        speed : 3500, 
        pauseOnHover : true
    },
    fullScreen : false, 
    swipe : true
};
makeBSS('.num1', opts);
var opts2 = {
    auto : false,
    fullScreen : true,
    swipe : true
};
makeBSS('.num2', opts2);
</script>

I clone the repo and check your code.The only difference is the source of the picture.So I put you code on this fiddle .

I just add the css code

Of course you can't see any pictures,but you can see the slide caption. So did you add the css style in your code?

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM