Home/ Questions/Q 6318941
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T15:43:02+00:00

I’m making a little jQuery plugin that creates a slider for images and content.

  • 0

I’m making a little jQuery plugin that creates a slider for images and content. However, the spans generated for the images/content are stacking ontop of another and overflowing vertically instead of sitting beside each other and overflowing horizontally. I’ve tried numerous ways using css and it doesn’t work… The code I’m using is below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<!--<script src="http://code.jquery.com/jquery-latest.min.js"></script>-->
<script src="jquery.js"></script>
</head>
<body>
<script type="text/javascript">
(function($) {
    $.fn.slider = function(options) {
        var settings = {
            'delay': '5',
            'height': '500px',
            'width': '500px',
            'anim': 'slide',
            'slidedir':'right',
        };
        var options = $.extend(settings, options);
        return this.each(function() {
            var o = options;
            var slidenum=0;
            $(this).hide();
            $(this).before('<div id="jqueryslider" style="overflow:scroll;max-height:'+o.height+';height:'+o.height+';width:'+o.width+'"></div>');
            $(this).find('li').each(function(){
                slidenum++;
                var title=$(this).attr('title');
                var html=$(this).html();
                $('#jqueryslider').append('<span class="slidercont">'+html+'</span>');
                $('.slidercont img').css('width',o.width).css('height',o.height);
            });

                     });
    };
})(jQuery);
$(document).ready(function(){
    $('#slider').slider();
});
</script>
<ul id="slider">
<li title="Tulips"><img src="Tulips.jpg" /></li>
<li title="Penguin"><img src="Penguins.jpg" /></li>
</ul>
</body>
</html>

IMPORTANT! IT has nothing to do with the li‘s. Those are only there for organizational purposes. The actual thing that is displayed is in spans that have the html of the li‘s. The UL and LI‘s are hidden when the script is run.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The other answers at this point are just looking at the pre-js HTML markup. The post-jquery markup is quite different, so those won’t fix your problem..

    • Changed the .slidercont wrapper from <span> to <div>
    • Added display: inline-block; to .slidercont
    • Changed settings width/height to int from string (no ‘px’, added that to function)
    • After looping, set the width of #jqueryslider to options.width * slidenum

    This is how I usually approach this problem with sliders. Favorited this so I can see if I’m doing this wrong…

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<!--<script src="jquery.js"></script>-->
</head>
<body>
    <style tyle="text/css">
        .slidercont {
            display:inline-block; 
        }
    </style>
<script type="text/javascript">
(function($) {
    $.fn.slider = function(options) {
        var settings = {
            'delay': '5',
            'height': 500,
            'width': 500,
            'anim': 'slide',
            'slidedir':'right',
        };
        var options = $.extend(settings, options);
        return this.each(function() {
            var o = options;
            var slidenum=0;
            $(this).hide();
            $(this).before('<div style="overflow:scroll;max-height:'+o.height+'px;height:'+o.height+'px;width:'+o.width+'px;"><div id="jqueryslider"></div></div>');
            $(this).find('li').each(function(){
                slidenum++;
                var title=$(this).attr('title');
                var html=$(this).html();
                $('#jqueryslider').append('<div class="slidercont">'+html+'</div>');
                $('.slidercont img').css('width',o.width + 'px').css('height',o.height + 'px');
            });
            $('#jqueryslider').css("width", slidenum*o.width);
        });
    };
})(jQuery);
$(document).ready(function(){
    $('#slider').slider();
});
</script>
<ul id="slider">
<li title="Tulips"><img src="Tulips.jpg" /></li>
<li title="Penguin"><img src="Penguins.jpg" /></li>
</ul>
</body>
</html>
    • 0