jssor slider width issues

Question

Super confused on how to adjust the width of this slider...

I've tried editing the jquery where you see it commented out:

jQuery(document).ready(function ($) {

        var nestedSliders = [];

        $.each(["sliderh1_container", "sliderh2_container", "sliderh3_container"], function (index, containerId) {
            var nestedSliderOptions = {
                $PauseOnHover: 1,                               //[Optional] Whether to pause when mouse over if a slider is auto playing, 0 no pause, 1 pause for desktop, 2 pause for touch device, 3 pause for desktop and touch device, default value is 1
                $SlideDuration: 500,                                //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
                $MinDragOffsetToSlide: 20,                          //[Optional] Minimum drag offset to trigger slide , default value is 20
                //$SlideWidth: 200,                                   //[Optional] Width of every slide in pixels, default value is width of 'slides' container
                //$SlideHeight: 150,                                //[Optional] Height of every slide in pixels, default value is height of 'slides' container
                $SlideSpacing: 3,                                   //[Optional] Space between each slide in pixels, default value is 0
                $DisplayPieces: 1,                                  //[Optional] Number of pieces to display (the slideshow would be disabled if the value is set to greater than 1), the default value is 1
                $ParkingPosition: 0,                              //[Optional] The offset position to park slide (this options applys only when slideshow disabled), default value is 0.
                $UISearchMode: 0,     


var options = {
            $AutoPlay: false,                                    //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
            $AutoPlaySteps: 1,                                  //[Optional] Steps to go for each navigation request (this options applys only when slideshow disabled), the default value is 1
            $AutoPlayInterval: 2000,                            //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
            $PauseOnHover: 1,                               //[Optional] Whether to pause when mouse over if a slider is auto playing, 0 no pause, 1 pause for desktop, 2 pause for touch device, 3 pause for desktop and touch device, default value is 1

            $ArrowKeyNavigation: true,                          //[Optional] Allows keyboard (arrow key) navigation or not, default value is false
            $SlideDuration: 300,                                //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
            $MinDragOffsetToSlide: 80,                          //[Optional] Minimum drag offset to trigger slide , default value is 20
            //$SlideWidth: 600,                                 //[Optional] Width of every slide in pixels, default value is width of 'slides' container
            //$SlideHeight: 150,                                //[Optional] Height of every slide in pixels, default value is height of 'slides' container
            $SlideSpacing: 3,                                   //[Optional] Space between each slide in pixels, default value is 0
            $DisplayPieces: 1,                                  //[Optional] Number of pieces to display (the slideshow would be disabled if the value is set to greater than 1), the default value is 1
            $ParkingPosition: 0,                                //[Optional] The offset position to park slide (this options applys only when slideshow disabled), default value is 0.
            $UISearchMode: 0,                                   //[Optional] The way (0 parellel, 1 recursive, default value is 1) to search UI components (slides container, loading screen, navigator container, arrow navigator container, thumbnail navigator container etc).
            $PlayOrientation: 2,                                //[Optional] Orientation to play slide (for auto play, navigation), 1 horizental, 2 vertical, default value is 1
            $DragOrientation: 0,                                //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0),

I've tried editing the CSS and when i make it bigger.. say 900 pixels.. it actually get's smaller:

 <!-- Slides Container -->
    <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
        overflow: hidden;">
        <div>
            <div id="sliderh1_container" class="sliderh1" style="position: relative; top: 0px; left: 0px; width: 600px;
                height: 300px;">

                <!-- Slides Container -->
                <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
                    overflow: hidden;">
                    <div><img u="image" src="/jssor/img/landscape/05.jpg" /></div>
                    <div><img u="image" src="/jssor/img/landscape/06.jpg" /></div>
                    <div><img u="image" src="/jssor/img/landscape/07.jpg" /></div>
                    <div><img u="image" src="/jssor/img/landscape/01.jpg" /></div>
                    <div><img u="image" src="/jssor/img/landscape/02.jpg" /></div>
                    <div><img u="image" src="/jssor/img/landscape/03.jpg" /></div>
                    <div><img u="image" src="/jssor/img/landscape/04.jpg" /></div>
                </div>
                <!-- Bullet Navigator Skin Begin -->
                <!-- bullet navigator container -->
                <div u="navigator" class="jssorb03" style="position: absolute; bottom: 10px; right: 10px;">
                    <!-- bullet navigator item prototype -->
                    <div u="prototype" style="position: absolute; width: 21px; height: 21px; text-align:center; line-height:21px; color:white; font-size:12px;"><NumberTemplate></NumberTemplate></div>
                </div>
                <!-- Bullet Navigator Skin End -->
            </div>
            <div u="thumb">
                <img src="/jssor/img/nested-thumb/landscape.jpg" />
                <div class="title_back"></div>
                <div class="title">
                    Landscape
                </div>
            </div>
        </div>
        <div>
            <div id="sliderh2_container" class="sliderh2" style="position: relative; top: 0px; left: 0px; width: 600px;
                height: 300px;">

                <!-- Slides Container -->
                <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
                    overflow: hidden;">
                    <div><img u="image" src="/jssor/img/motor/001.jpg" /></div>
                    <div><img u="image" src="/jssor/img/motor/002.jpg" /></div>
                    <div><img u="image" src="/jssor/img/motor/003.jpg" /></div>
                    <div><img u="image" src="/jssor/img/motor/004.jpg" /></div>
                    <div><img u="image" src="/jssor/img/motor/005.jpg" /></div>
                    <div><img u="image" src="/jssor/img/motor/006.jpg" /></div>
                    <div><img u="image" src="/jssor/img/motor/007.jpg" /></div>
                    <div><img u="image" src="/jssor/img/motor/008.jpg" /></div>
                </div>
                <!-- Bullet Navigator Skin Begin -->
                <!-- bullet navigator container -->
                <div u="navigator" class="jssorb03" style="position: absolute; bottom: 10px; right: 10px;">
                    <!-- bullet navigator item prototype -->
                    <div u="prototype" style="position: absolute; width: 21px; height: 21px; text-align:center; line-height:21px; color:white; font-size:12px;"><NumberTemplate></NumberTemplate></div>
                </div>
                <!-- Bullet Navigator Skin End -->

@jssor is really good at comments but I'm certain that I can't figure this out now..

As usual.. any help would be greatly appreciated. Thank you.

Additionally, here is a link to look at it here:

http://phpbuilds.com/Jssor.Slider.FullPack/demos-jquery/nested-slider.source.html

score 3 · Answer 1 · edited Mar 03 '15 at 09:03

3

You can change the width by changing the min body width in scalesSlider(), which is written in the script tag in your html page: jssor_slider1.$ScaleWidth(Math.min(bodyWidth, 960));

edited Mar 03 '15 at 09:03

jssor

6,995
2
18
21

answered Jul 27 '14 at 03:46

Zishan Mohsin

828
1
9
22

score 2 · Accepted Answer · edited Jul 05 '17 at 02:58

I believe you're looking for this line:

<div id="sliderh1_container" class="sliderh1" style="position: 
  relative; top: 0px; left:0px; width: 600px; height: 300px;">

EDIT

Here is one example of a slider that I have on a website.

<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 285px; height: 285px; ">

            <!-- Slides Container -->
            <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 285px; height: 285px; overflow: hidden;">
                ...

Also, I am not sure as to why you have this twice:

<!-- Slides Container -->
...

EDIT2 - The good one

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Nested Slider Demo - Jssor Slider, Slideshow with Javascript Source Code</title>
</head>
<body style="font-family:Arial, Verdana;background-color:#fff;">
    <!-- it works the same with all jquery version from 1.x to 2.x -->
    <script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../js/jssor.slider.min.js"></script>
    <script>

        jQuery(document).ready(function ($) {

            var nestedSliders = [];

            $.each(["sliderh1_container", "sliderh2_container", "sliderh3_container"], function (index, containerId) {
                var nestedSliderOptions = {
                    $PauseOnHover: 1,                               //[Optional] Whether to pause when mouse over if a slider is auto playing, 0 no pause, 1 pause for desktop, 2 pause for touch device, 3 pause for desktop and touch device, default value is 1
                    $SlideDuration: 500,                                //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
                    $MinDragOffsetToSlide: 20,                          //[Optional] Minimum drag offset to trigger slide , default value is 20
                    //$SlideWidth: 200,                                   //[Optional] Width of every slide in pixels, default value is width of 'slides' container
                    //$SlideHeight: 150,                                //[Optional] Height of every slide in pixels, default value is height of 'slides' container
                    $SlideSpacing: 3,                                   //[Optional] Space between each slide in pixels, default value is 0
                    $Cols: 1,                                  //[Optional] Number of pieces to display (the slideshow would be disabled if the value is set to greater than 1), the default value is 1
                    $Align: 0,                              //[Optional] The offset position to park slide (this options applys only when slideshow disabled), default value is 0.
                    $UISearchMode: 0,                                   //[Optional] The way (0 parellel, 1 recursive, default value is 1) to search UI components (slides container, loading screen, navigator container, arrow navigator container, thumbnail navigator container etc).

                    $BulletNavigatorOptions: {                                //[Optional] Options to specify and enable navigator or not
                        $Class: $JssorBulletNavigator$,                       //[Required] Class to create navigator instance
                        $ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always
                        $Steps: 1,                                      //[Optional] Steps to go for each navigation request, default value is 1
                        $Rows: 1,                                      //[Optional] Specify lanes to arrange items, default value is 1
                        $SpacingX: 10,                                   //[Optional] Horizontal space between each item in pixel, default value is 0
                        $SpacingY: 0,                                   //[Optional] Vertical space between each item in pixel, default value is 0
                        $Orientation: 1                                 //[Optional] The orientation of the navigator, 1 horizontal, 2 vertical, default value is 1
                    }
                };

                nestedSliders.push(new $JssorSlider$(containerId, nestedSliderOptions));
            });

            var options = {
                $AutoPlay: false,                                    //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
                $AutoPlaySteps: 1,                                  //[Optional] Steps to go for each navigation request (this options applys only when slideshow disabled), the default value is 1
                $AutoPlayInterval: 2000,                            //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
                $PauseOnHover: 1,                               //[Optional] Whether to pause when mouse over if a slider is auto playing, 0 no pause, 1 pause for desktop, 2 pause for touch device, 3 pause for desktop and touch device, default value is 1

                $ArrowKeyNavigation: true,                          //[Optional] Allows keyboard (arrow key) navigation or not, default value is false
                $SlideDuration: 300,                                //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
                $MinDragOffsetToSlide: 80,                          //[Optional] Minimum drag offset to trigger slide , default value is 20
                //$SlideWidth: 600,                                 //[Optional] Width of every slide in pixels, default value is width of 'slides' container
                //$SlideHeight: 150,                                //[Optional] Height of every slide in pixels, default value is height of 'slides' container
                $SlideSpacing: 3,                                   //[Optional] Space between each slide in pixels, default value is 0
                $Cols: 1,                                  //[Optional] Number of pieces to display (the slideshow would be disabled if the value is set to greater than 1), the default value is 1
                $Align: 0,                                //[Optional] The offset position to park slide (this options applys only when slideshow disabled), default value is 0.
                $UISearchMode: 0,                                   //[Optional] The way (0 parellel, 1 recursive, default value is 1) to search UI components (slides container, loading screen, navigator container, arrow navigator container, thumbnail navigator container etc).
                $PlayOrientation: 2,                                //[Optional] Orientation to play slide (for auto play, navigation), 1 horizental, 2 vertical, default value is 1
                $DragOrientation: 0,                                //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $Cols is greater than 1, or parking position is not 0),

                $ThumbnailNavigatorOptions: {
                    $Class: $JssorThumbnailNavigator$,              //[Required] Class to create thumbnail navigator instance
                    $ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always

                    $ActionMode: 1,                                 //[Optional] 0 None, 1 act by click, 2 act by mouse hover, 3 both, default value is 1
                    $AutoCenter: 3,                                 //[Optional] Auto center thumbnail items in the thumbnail navigator container, 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 3
                    $Rows: 1,                                      //[Optional] Specify lanes to arrange thumbnails, default value is 1
                    $SpacingX: 0,                                   //[Optional] Horizontal space between each thumbnail in pixel, default value is 0
                    $SpacingY: 0,                                   //[Optional] Vertical space between each thumbnail in pixel, default value is 0
                    $Cols: 3,                              //[Optional] Number of pieces to display, default value is 1
                    $Align: 0,                          //[Optional] The offset position to park thumbnail
                    $Orientation: 1,                                //[Optional] Orientation to arrange thumbnails, 1 horizental, 2 vertical, default value is 1
                    $DisableDrag: false                            //[Optional] Disable drag or not, default value is false
                }
            };

            var jssor_slider1 = new $JssorSlider$("slider1_container", options);

            function OnMainSliderPark(currentIndex, fromIndex) {
                $.each(nestedSliders, function (index, nestedSlider) {
                    nestedSlider.$Pause();
                });

                setTimeout(function () {
                    nestedSliders[currentIndex].$Play();
                }, 2000);
            }

            jssor_slider1.$On($JssorSlider$.$EVT_PARK, OnMainSliderPark);
            OnMainSliderPark(0, 0);

            //responsive code begin
            //you can remove responsive code if you don't want the slider scales while window resizes
            function ScaleSlider() {
                var bodyWidth = document.body.clientWidth;
                if (bodyWidth)
                    jssor_slider1.$ScaleWidth(Math.min(bodyWidth, 960));
                else
                    window.setTimeout(ScaleSlider, 30);
            }

            ScaleSlider();

            $(window).bind("load", ScaleSlider);
            $(window).bind("resize", ScaleSlider);
            $(window).bind("orientationchange", ScaleSlider);
            //responsive code end
        });
    </script>
    <!-- sliderh style begin -->
    <style>
        /* jssor slider bullet navigator skin 03 css */
        /*
        .jssorb03 div           (normal)
        .jssorb03 div:hover     (normal mouseover)
        .jssorb03 .av           (active)
        .jssorb03 .av:hover     (active mouseover)
        .jssorb03 .dn           (mousedown)
        */
        .jssorb03 div, .jssorb03 div:hover, .jssorb03 .av
        {
            background: url(../img/b03.png) no-repeat;
            overflow:hidden;
            cursor: pointer;
        }
        .jssorb03 div { background-position: -5px -4px; }
        .jssorb03 div:hover, .jssorb03 .av:hover { background-position: -35px -4px; }
        .jssorb03 .av { background-position: -65px -4px; }
        .jssorb03 .dn, .jssorb03 .dn:hover { background-position: -95px -4px; }
    </style>
    <!-- sliderh style end -->
    <!-- Jssor Slider Begin -->
    <!-- You can move inline styles to css file or css block. -->
    <div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 960px; height: 400px; overflow: hidden; ">

        <!-- Loading Screen -->
        <div u="loading" style="position: absolute; top: 0px; left: 0px;">
            <div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block;
                background-color: #000; top: 0px; left: 0px;width: 100%;height:100%;">
            </div>
            <div style="position: absolute; display: block; background: url(../img/loading.gif) no-repeat center center;
                top: 0px; left: 0px;width: 100%;height:100%;">
            </div>
        </div>

        <!-- Slides Container -->
        <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 960px; height: 400px;
            overflow: hidden;">
            <div>
                <div id="sliderh1_container" class="sliderh1" style="position: relative; top: 0px; left: 0px; width: 960px;
                    height: 400px;">

                    <!-- Slides Container -->
                    <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 960px; height: 400px;
                        overflow: hidden;">
                        <div><img u="image" src="../img/landscape/05.jpg" /></div>
                        <div><img u="image" src="../img/landscape/06.jpg" /></div>
                        <div><img u="image" src="../img/landscape/07.jpg" /></div>
                        <div><img u="image" src="../img/landscape/01.jpg" /></div>
                        <div><img u="image" src="../img/landscape/02.jpg" /></div>
                        <div><img u="image" src="../img/landscape/03.jpg" /></div>
                        <div><img u="image" src="../img/landscape/04.jpg" /></div>
                    </div>
                    <!-- Bullet Navigator Skin Begin -->
                    <!-- bullet navigator container -->
                    <div u="navigator" class="jssorb03" style="position: absolute; bottom: 110px; right: 10px;">
                        <!-- bullet navigator item prototype -->
                        <div u="prototype" style="position: absolute; width: 21px; height: 21px; text-align:center; line-height:21px; color:white; font-size:12px;"><NumberTemplate></NumberTemplate></div>
                    </div>
                    <!-- Bullet Navigator Skin End -->
                </div>
                <div u="thumb">
                    <img src="holder.js/320x160">
                    <div class="title_back"></div>
                    <div class="title">
                        Landscape
                    </div>
                </div>
            </div>
            <div>
                <div id="sliderh2_container" class="sliderh2" style="position: relative; top: 0px; left: 0px; width: 960px;
                    height: 400px;">

                    <!-- Slides Container -->
                    <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 960px; height: 400px;
                        overflow: hidden;">
                        <div><img u="image" src="../img/motor/001.jpg" /></div>
                        <div><img u="image" src="../img/motor/002.jpg" /></div>
                        <div><img u="image" src="../img/motor/003.jpg" /></div>
                        <div><img u="image" src="../img/motor/004.jpg" /></div>
                        <div><img u="image" src="../img/motor/005.jpg" /></div>
                        <div><img u="image" src="../img/motor/006.jpg" /></div>
                        <div><img u="image" src="../img/motor/007.jpg" /></div>
                        <div><img u="image" src="../img/motor/008.jpg" /></div>
                    </div>
                    <!-- Bullet Navigator Skin Begin -->
                    <!-- bullet navigator container -->
                    <div u="navigator" class="jssorb03" style="position: absolute; bottom: 110px; right: 10px;">
                        <!-- bullet navigator item prototype -->
                        <div u="prototype" style="position: absolute; width: 21px; height: 21px; text-align:center; line-height:21px; color:white; font-size:12px;"><NumberTemplate></NumberTemplate></div>
                    </div>
                    <!-- Bullet Navigator Skin End -->
                </div>
                <div u="thumb">
                    <img src="holder.js/320x160">
                    <div class="title_back"></div>
                    <div class="title">
                        Motor
                    </div>
                </div>
            </div>
            <div>
                <div id="sliderh3_container" class="sliderh3" style="position: relative; top: 0px; left: 0px; width: 960px;
                    height: 400px;">

                    <!-- Slides Container -->
                    <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 960px; height: 400px;
                        overflow: hidden;">
                        <div><img u="image" src="../img/photography/004.jpg" /></div>
                        <div><img u="image" src="../img/photography/005.jpg" /></div>
                        <div><img u="image" src="../img/photography/006.jpg" /></div>
                        <div><img u="image" src="../img/photography/007.jpg" /></div>
                        <div><img u="image" src="../img/photography/008.jpg" /></div>
                        <div><img u="image" src="../img/photography/009.jpg" /></div>
                        <div><img u="image" src="../img/photography/010.jpg" /></div>
                        <div><img u="image" src="../img/photography/011.jpg" /></div>
                        <div><img u="image" src="../img/photography/012.jpg" /></div>
                    </div>
                    <!-- Bullet Navigator Skin Begin -->
                    <!-- bullet navigator container -->
                    <div u="navigator" class="jssorb03" style="position: absolute; bottom: 110px; right: 10px;">
                        <!-- bullet navigator item prototype -->
                        <div u="prototype" style="position: absolute; width: 21px; height: 21px; text-align:center; line-height:21px; color:white; font-size:12px;"><NumberTemplate></NumberTemplate></div>
                    </div>
                    <!-- Bullet Navigator Skin End -->
                </div>
                <div u="thumb">
                    <img src="holder.js/320x160">
                    <div class="title_back"></div>
                    <div class="title">
                        Photography
                    </div>
                </div>
            </div>
        </div>
        <!-- ThumbnailNavigator Skin Begin -->
        <div u="thumbnavigator" class="jssort12" style="cursor: default; position: absolute; width: 960px; height: 100px; left:0px; bottom: 0px;">

            <!-- Thumbnail Item Skin Begin -->
            <style>
                /* jssor slider thumbnail Navigator Skin 12 css */
                /*
                .jssort12 .p            (normal)
                .jssort12 .p:hover      (normal mouseover)
                .jssort12 .pav          (active)
                .jssort12 .pav:hover    (active mouseover)
                .jssort12 .pdn          (mousedown)
                */
                .jssort12 .p img {
                    FILTER: alpha(opacity=55);
                    opacity: .55;
                    transition: opacity .6s;
                    -moz-transition: opacity .6s;
                    -webkit-transition: opacity .6s;
                    -o-transition: opacity .6s;
                }

                .jssort12 .pav img, .jssort12 .pav:hover img, .jssort12 .p:hover img {
                    FILTER: alpha(opacity=100);
                    opacity: 1;
                    transition: none;
                    -moz-transition: none;
                    -webkit-transition: none;
                    -o-transition: none;
                }

                .jssort12 .pav:hover img, .jssort12 .p:hover img {
                    FILTER: alpha(opacity=70);
                    opacity: .7;
                }

                .jssort12 .title, .jssort12 .title_back {
                    position: absolute;
                    top: 70px;
                    left: 0px;
                    width: 320px;
                    height: 30px;
                    line-height: 30px;
                    text-align: center;
                    color: #000;
                    font-size: 20px;
                }

                .jssort12 .title_back {
                    background-color: #fff;
                    filter: alpha(opacity=50);
                    opacity: .5;
                }

                .jssort12 .pav:hover .title_back, .jssort12 .p:hover .title_back {
                    filter: alpha(opacity=40);
                    opacity: .4;
                }

                .jssort12 .pav .title_back {
                    background-color: #000;
                    filter: alpha(opacity=50);
                    opacity: .5;
                }

                .jssort12 .pav .title {
                    color: #fff;
                }
            </style>
            <div u="slides" style="cursor: move;">
                <div u="prototype" class=p style="POSITION: absolute; WIDTH: 320px; HEIGHT: 100px; TOP: 0; LEFT: 0;">
                    <thumbnailtemplate style="WIDTH: 320px; HEIGHT: 100px; border: none; position: absolute; TOP: 0; LEFT: 0; "></thumbnailtemplate>
                </div>
            </div>
            <!-- Thumbnail Item Skin End -->
        </div>
        <!-- ThumbnailNavigator Skin End -->

        <a style="display: none" href="http://www.jssor.com">slideshow html</a>
    </div>
    <!-- Jssor Slider End --></body>
    <script src="holder.js"></script>
</html>

Ok so: - Modified the width from 600px to 960px and height from 300px to 400px. - Modified thumbnail sizes from 200x100 to 320x160 (320 because they fit in 960 and 160 to respect the ratio). - Had to modify the <div u="navigator"> bottom to 110px instead of 10px. - Used holder.js to replace thumbnail images (place the holder.js file at the same level of your htlm file if you want to test using this code).

Use a diff tool to check the difference between this code and the content of the original nested-slider.source.html file.

Hope this helps!

It didn't work, nothing actually changed when i changed the width on that. — Timothy Radzikowski, Jun 18 '14 at 18:30
Did you change both the **slider_container** div and the **slides** div? Also, as I mentionned, I am not sure why you have the slides div twice, on the sliders I use I only have one slider_container and then one slides container inside. — Antoine Cloutier, Jun 18 '14 at 18:36
Yes, if you would like to look at it, you may here: http://phpbuilds.com/Jssor.Slider.FullPack/demos-jquery/nested-slider.source.html .... When i increase the pixel width it actually makes it smaller. weird @jssor — Timothy Radzikowski, Jun 18 '14 at 18:49
Antoine is right. And you are doing right as well. One thing to be clear, if you see the responsive codes that begin from '//responsive code begin', you will see it always scales the slider to width of 600. So, if you set the width of slider to 900, but it scales to 600, child sliders would look even smaller then. — jssor, Jun 18 '14 at 23:18
Thanks for chiming in @jssor, i'll give it a go again but it doesn't seem to be working.. i'm looking to make it 960 x 400. — Timothy Radzikowski, Jun 19 '14 at 17:31
I still need help gentleman... you can look at my code on that page to see that i'm doing it correctly. Please help. — Timothy Radzikowski, Jun 19 '14 at 17:52
That appears to be perfect Antione, thanks for your help.. the only problem is the loading gif isn't functioning correctly.. have a look on phpbuilds.. although i can comment it out.. no biggie.. and i'll move around the numbers for the slides because some of them are hiding behind the thumbs.. Thank you for all your time and effort. — Timothy Radzikowski, Jun 19 '14 at 19:24
oopss. nevermind.. didn't realize how many holder.js links were needed. Thank you thank you thank you. — Timothy Radzikowski, Jun 19 '14 at 19:27
@TimothyRadzikowski For the bullets hiding behind the pictures, I had forgotton to change bottom: 110px at 2 other places. I edited my code to reflect that change. Also, you seem to have javascript errors with holder.js (did you download holder.js and place it at the same level with your html file?). Cheers :) — Antoine Cloutier, Jun 19 '14 at 19:27
not at the same level but i linked it correctly... should be fine now. — Timothy Radzikowski, Jun 19 '14 at 19:28
Actually i just put it at the same level now.. It's super smooth looking. I'll go review the code now. — Timothy Radzikowski, Jun 19 '14 at 19:30
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/55937/discussion-between-timothy-radzikowski-and-antoine-cloutier). — Timothy Radzikowski, Jun 19 '14 at 19:50

score 0 · Answer 3 · edited Jun 22 '15 at 20:58

0

You need to edit the JavaScript file, not the CSS, as the width is an element.

Open the JavaScript jssor.slider.mini.js and find (c.max(c.min(b,1081),300).

1081 is max-width and 300 is min-width.

This is what I did, and it worked fine.

edited Jun 22 '15 at 20:58

ZygD

22,092
39
79
102

answered Jun 22 '15 at 19:57

bob green

1
1

jssor slider width issues

3 Answers3

Linked