javascript - Unslider not working on website

This / for some reason is not appearing on my site, only the li text is showing and it is sliding but there is no appearance of the slider, just the text.

I have included the js files along with the css and markup but its somehow not showing me the full slider.

Here is my code:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" ".dtd">
<html xmlns="">

<head>
    <title>Webpage</title>
    <link rel = "stylesheet" type = "text/css" href = "1style.css"/>
    <script src="//code.jquery/jquery-latest.min.js"></script>
    <script src="//unslider/unslider.min.js"></script>
    <script>

        $(function() {
            $('.banner').unslider();
        });

    </script>
</head>

<body>
    <br/>
    <h1 style="font-family:verdana; font-size:50px; font-weigth:bold; font-style:italic;" align="center" > Logo </h1>

    <div class="banner">
        <ul>
            <li>This is a slide.</li>
            <li>This is another slide.</li>
            <li>This is a final slide.</li>
        </ul>
    </div>


    <div id = "footer">
        <div class = "container">
            <ul>
                <li><a href = "?">Terms of use</a></li>
                <li><a href = "?">Privacy</a></li>
                <li><a href = "?">Cookies</a></li>
                <li><a href = "?">Accessibility</a></li>
            </ul>
        </div>
    </div>

</body>
</html>

CSS:

.banner { position: relative; overflow: auto; }
.banner li { list-style: none; }
.banner ul li { float: left; }

Can someone check the link i provided above and tell me where i'm going wrong?

Thanks

Seems like none of the answers fix the problem at all, I guess i'll have to find a new slider.

Thanks for the help

This http://unslider./ for some reason is not appearing on my site, only the li text is showing and it is sliding but there is no appearance of the slider, just the text.

I have included the js files along with the css and markup but its somehow not showing me the full slider.

Here is my code:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3/1999/xhtml">

<head>
    <title>Webpage</title>
    <link rel = "stylesheet" type = "text/css" href = "1style.css"/>
    <script src="//code.jquery./jquery-latest.min.js"></script>
    <script src="//unslider./unslider.min.js"></script>
    <script>

        $(function() {
            $('.banner').unslider();
        });

    </script>
</head>

<body>
    <br/>
    <h1 style="font-family:verdana; font-size:50px; font-weigth:bold; font-style:italic;" align="center" > Logo </h1>

    <div class="banner">
        <ul>
            <li>This is a slide.</li>
            <li>This is another slide.</li>
            <li>This is a final slide.</li>
        </ul>
    </div>


    <div id = "footer">
        <div class = "container">
            <ul>
                <li><a href = "?">Terms of use</a></li>
                <li><a href = "?">Privacy</a></li>
                <li><a href = "?">Cookies</a></li>
                <li><a href = "?">Accessibility</a></li>
            </ul>
        </div>
    </div>

</body>
</html>

CSS:

.banner { position: relative; overflow: auto; }
.banner li { list-style: none; }
.banner ul li { float: left; }

Can someone check the link i provided above and tell me where i'm going wrong?

Thanks

Seems like none of the answers fix the problem at all, I guess i'll have to find a new slider.

Thanks for the help

Share Improve this question edited Dec 9, 2015 at 1:52 asedsami 6797 silver badges26 bronze badges asked Jun 29, 2013 at 16:32 Ryman Holmes 7563 gold badges23 silver badges40 bronze badges

Why you dont add http: or https: in script src? – Shaddow Commented Jun 29, 2013 at 16:37
Doesn't make a difference really – Ryman Holmes Commented Jun 29, 2013 at 16:39
@Mooseman - not sure if its working in all browsers – Shaddow Commented Jun 29, 2013 at 16:40
He deleted his ment, but he said something like you ... but I read somewhere safari has problem with this, but im rly not sure – Shaddow Commented Jun 29, 2013 at 16:51

Add a ment |

5 Answers 5

Sorted by: Reset to default 4

Unslider picks the height from first list item (<li>) from your list (<ul>). Hence to make it work perfectly fine just add the height to first element.

Hey The problem is with the height of the container.

Because of the low height it isn't capable of displaying the overflow.

So i have made little changes to your code.

And they are :

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3/1999/xhtml">

<head>
<title>Webpage</title>
<style type = "text/css">
.banner { position: relative; overflow: auto; 
  background: #0f0; 
  min-height: 100px; }
.banner li { list-style: none; }
.banner ul li { float: left; }
</style>
<script src="http://code.jquery./jquery-latest.min.js"></script>

<script src="http://unslider./unslider.min.js"></script>

<script>
$(document).ready(function(){
$(function() {
$('.banner').unslider();
});
});
</script>

</head>


<body>
<br/>
<h1 style="font-family:verdana; font-size:50px; font-weigth:bold; font-style:italic;" align="center" >Logo</h1>

<div class="banner">
<ul>
<li>This is a slide.</li>
<li>This is another slide.</li>
<li>This is a final slide.</li>
</ul>
</div>


<div id = "footer">
    <div class = "container">
        <ul>
            <li><a href = "?">Terms of use</a></li>
            <li><a href = "?">Privacy</a></li>
            <li><a href = "?">Cookies</a></li>
            <li><a href = "?">Accessibility</a></li>
        </ul>
    </div>
</div>


</body>
</html>

And It works for me !

Check my unslider. help file:

        <!-- The HTML -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

    <head>
    <title>Unslider. example</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="http://ajax.googleapis./ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> 
    <script src="http://unslider./unslider.min.js"type="text/javascript"></script>

        <!-- JavaScript -->

    <script type="text/javascript">

        $(function() {
            $('.banner').unslider({
                speed: 500,               //  The speed to animate each slide (in milliseconds)
                delay: 3000,              //  The delay between slide animations (in milliseconds)
                plete: function() {},  //  A function that gets called after every slide animation
                keys: true,               //  Enable keyboard (left, right) arrow shortcuts
                dots: true,               //  Display dot navigation
                fluid: false              //  Support responsive design. May break non-responsive designs
            });

            var unslider = $('.banner').unslider();

            $('.prev').click(function() {
                unslider.data('unslider').prev();
            });

            $('.next').click(function() {
                unslider.data('unslider').next();
            });

            return false;
        });
    </script>

    <!-- CSS -->
    <style type="text/css">

        * { 
            margin: 0;
            padding: 0;
            -webkit-box-sizing: border-box; 
        }

        .banner {
            position: relative;
            width: 100%;
            overflow: auto;
            top: 50px;
            /*z-index: -1;*/

            font-size: 18px;
            line-height: 24px;
            text-align: center;

            color: #FFFFFF;
            text-shadow: 0 0 1px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.3);

            background: #FFFFFF;
            box-shadow: 0 1px 2px rgba(0,0,0,.25);
        }
        .banner ul {
            list-style: none;
            width: 300%;
        }
        .banner ul li {
            display: block;
            float: left;

            min-height: 500px;

            -o-background-size: 100% 100%;
            -ms-background-size: 100% 100%;
            -moz-background-size: 100% 100%;
            -webkit-background-size: 100% 100%;
            background-size: 100% 100%;

            box-shadow: inset 0 -3px 6px rgba(0,0,0,.1);
        }

        .banner .inner {
            padding: 360px 0 110px;

            float: left;
            vertical-align:-100px;
        }

        .banner h1, .banner h2 {
            font-size: 40px;
            line-height: 52px;
            color: #fff;
        }

        .banner .btn {
            display: inline-block;
            margin: 25px 0 0;
            padding: 9px 22px 7px;
            clear: both;

            color: #fff;
            font-size: 12px;
            font-weight: bold;
            text-transform: uppercase;
            text-decoration: none;
            border : rgba(255, 255, 255, 0.4) solid 2px;
            border-radius: 5px;
        }
        .banner .btn:hover {
            background : rgba(255, 255, 255, 0.05);
        }
        .banner .btn:active {
            -webkit-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));
            -moz-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));
            -ms-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));
            -o-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));
            filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));
        }

        .banner .btn, .banner .dot {
            -webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
            -moz-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
            -ms-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
            -o-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
            filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
        }

        .banner .dots {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 20px;
            width: 100%;
        }
        .banner .dots li {
            display: inline-block;

            width: 10px;
            height: 10px;
            line-height: 10px;
            margin: 0 4px;

            text-indent: -999em;

            border: 2px solid #fff;
            border-radius: 6px;
            cursor: pointer;
            opacity: .4;

            -webkit-transition: background .5s, opacity .5s;
            -moz-transition: background .5s, opacity .5s;
            transition: background .5s, opacity .5s;
        }
        .banner .dots li.active {
            background: #fff;
            opacity: 1;
        }  

        .unslider-arrow {
            font-family: Expressway;
            font-size: 50px;
            text-decoration: none;
            color: #3d3d3d;
            background: rgba(255,255,255,0.7);
            padding: 0 20px 5px 20px;
        }

        .next {
            position: absolute;
            top: 65%;
            right: 0  
        }

        .prev {
            position: absolute;
            top: 65%;
            right: 90 /* change to left:0; if u wanna have arrow on left side */ 
        }
    </style>
    </head>
    <!-- Body of HTML document -->

    <body>
        <div class="slider">
        <div class="banner">
          <ul>
          <li style="background-image: url('http://lorempixel./1200/600/');">
            <div class="inner">
              <h1>Some h1 text</h1>
              <p>smaller p text</p>

                <a class="btn" href="http://www.yourlink.">Hyperlink</a>
            </div>
          </li>

          <li style="background-image: url('http://lorempixel./1200/600/');">
            <div class="inner">
              <h1>Some h1 text</h1>
              <p>smaller p text</p>

              <a class="btn" href="http://www.yourlink.">Hyperlink</a>
              </div>
              </li>

           <li style="background-image: url('http://lorempixel./1200/600/');">
             <div class="inner">
              <h1>Some h1 text</h1>
              <p>smaller p text</p>

              <a class="btn" href="http://www.yourlink.">Hyperlink</a>
              </div>
          </li>

          <li style="background-image: url('http://lorempixel./1200/600/');">
          <div class="inner">
              <h1>Some h1 text</h1>
              <p>smaller p text</p>

              <a class="btn" href="http://www.yourlink.">Hyperlink</a>
            </div>
          </li>
      </ul>


        </div>
          <a href="#" class="unslider-arrow prev">&larr;</a>
          <a href="#" class="unslider-arrow next">&rarr;</a>
        </div>
   </body>  

</html>

Your code is good. Slider is created, but slides are outside the box and overflow is hidden so you don't see them. Add this css

.banner ul { margin: 0; padding: 0; }

You need to specify dots:true in your javascript code, for example, apply this, and you will see it works fine.

Here is working jsfiddle link for you.

LINK JSFIDDLE

$(function() {
    $('.banner').unslider({
        speed: 500,               //  The speed to animate each slide (in milliseconds)
        delay: 3000,              //  The delay between slide animations (in milliseconds)
        plete: function() {},  //  A function that gets called after every slide animation
        keys: true,               //  Enable keyboard (left, right) arrow shortcuts
        dots: true,               //  Display dot navigation
        fluid: false              //  Support responsive design. May break non-responsive designs
    });

});

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Unslider not working on website - Stack Overflow

5 Answers 5

与本文相关的文章

评论列表(0)