Increase height and width of slider using jQuery jssor.slider plugin in ASP.Net

Hi jordan,

You can assign height and width of Slider using below two options of it

$SlideWidth: 600
$SlideHeight: 300

jordan says:

var jssor_1_options = {

                $AutoPlay: true,

                $SlideDuration: 800,

                $SlideEasing: $Jease$.$OutQuint,

                $ArrowNavigatorOptions: {

                    $Class: $JssorArrowNavigator$

                },

                $BulletNavigatorOptions: {

                    $Class: $JssorBulletNavigator$

                }

            };

 you need to add the options to above code like below

var jssor_1_options = {
    $AutoPlay: true,
    $SlideDuration: 800,
    $SlideWidth: 600, //assign width
    $SlideHeight: 300, //assign height
    $SlideEasing: $Jease$.$OutQuint,
    $ArrowNavigatorOptions: {
        $Class: $JssorArrowNavigator$
    },
    $BulletNavigatorOptions: {
        $Class: $JssorBulletNavigator$
    }
};

Hi jordan,

Its working at my side please refer below sample and make the changes according to your need

HTML

<div>
    <div class="slider-content parallax" style="background-position: 50% 35px;">
        <div class="container">
            <div class="row">
                <div id="jssor_1" style="position: relative; margin: 0 auto; top: 0px; left: 0px;
                    width: 1500px; height: 600px; overflow: hidden; visibility: hidden;">
                    <!-- Loading Screen -->
                    <div data-u="loading" class="jssorl-oval" style="position: absolute; top: 0px; left: 0px;
                        text-align: center; background-color: rgba(0,0,0,0.7);">
                        <img style="margin-top: -19.0px; position: relative; top: 50%; width: 38px; height: 38px;"
                            src="Backoffice/images/Gallery/Jellyfish.jpg" />
                    </div>
                    <div id="slider" runat="server" data-u="slides" style="cursor: default; position: relative;
                        top: 0px; left: 0px; width: 1500px; height: 600px; overflow: hidden;">
                    </div>
                    <!-- Bullet Navigator -->
                    <div data-u="navigator" class="jssorb05" style="bottom: 16px; right: 16px;" data-autocenter="1">
                        <!-- bullet navigator item prototype -->
                        <div data-u="prototype" style="width: 16px; height: 16px;">
                        </div>
                    </div>
                    <!-- Arrow Navigator -->
                    <span data-u="arrowleft" class="jssora22l" style="top: 0px; left: 8px; width: 40px;
                        height: 58px;" data-autocenter="2"></span><span data-u="arrowright" class="jssora22r"
                            style="top: 0px; right: 8px; width: 40px; height: 58px;" data-autocenter="2">
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>
<div>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jssor-slider/22.1.8/jssor.slider.min.js"
        type="text/javascript"></script>
    <script type="text/javascript">
        jQuery(document).ready(function ($) {
            var jssor_1_options = {
                $AutoPlay: true,
                $SlideDuration: 100,
                $SlideWidth: 600, //assign width
                $SlideHeight: 600, //assign height
                $SlideEasing: $Jease$.$OutQuint,
                $ArrowNavigatorOptions: {
                    $Class: $JssorArrowNavigator$
                },
                $BulletNavigatorOptions: {
                    $Class: $JssorBulletNavigator$
                }
            };
            var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);

            /*responsive code begin*/
            /*remove responsive code if you don't want the slider scales while window resizing*/
            function ScaleSlider() {
                var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
                if (refSize) {
                    refSize = Math.min(refSize, 1920);
                    jssor_1_slider.$ScaleWidth(refSize);
                }
                else {
                    window.setTimeout(ScaleSlider, 30);
                }
            }
            ScaleSlider();
            $(window).bind("load", ScaleSlider);
            $(window).bind("resize", ScaleSlider);
            $(window).bind("orientationchange", ScaleSlider);
            /*responsive code end*/
        });
    </script>
    <style type="text/css">
/* jssor slider loading skin oval css */ 
.jssorl-oval img 
{
    animation-name: jssorl-oval;
    animation-duration: 1.2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
 
@keyframes jssorl-oval {
    from {
        transform: rotate(0deg);
    } 
    to {
        transform: rotate(360deg);
    }
} 
/* jssor slider bullet navigator skin 05 css */
/*
.jssorb05 div           (normal)
.jssorb05 div:hover     (normal mouseover)
.jssorb05 .av           (active)
.jssorb05 .av:hover     (active mouseover)
.jssorb05 .dn           (mousedown)
*/
.jssorb05 {
    position: absolute;
}
.jssorb05 div, .jssorb05 div:hover, .jssorb05 .av {
    position: absolute;
    /* size of bullet elment */
    width: 16px;
    height: 16px;
    background: url('img/b05.png') no-repeat;
    overflow: hidden;
    cursor: pointer;
}
.jssorb05 div { background-position: -7px -7px; }
.jssorb05 div:hover, .jssorb05 .av:hover { background-position: -37px -7px; }
.jssorb05 .av { background-position: -67px -7px; }
.jssorb05 .dn, .jssorb05 .dn:hover { background-position: -97px -7px; }
 
/* jssor slider arrow navigator skin 22 css */
/*
.jssora22l                  (normal)
.jssora22r                  (normal)
.jssora22l:hover            (normal mouseover)
.jssora22r:hover            (normal mouseover)
.jssora22l.jssora22ldn      (mousedown)
.jssora22r.jssora22rdn      (mousedown)
.jssora22l.jssora22lds      (disabled)
.jssora22r.jssora22rds      (disabled)
*/
.jssora22l, .jssora22r {
    display: block;
    position: absolute;
    /* size of arrow element */
    width: 40px;
    height: 58px;
    cursor: pointer;
    background: url('img/a22.png') center center no-repeat;
    overflow: hidden;
}
.jssora22l { background-position: -10px -31px; }
.jssora22r { background-position: -70px -31px; }
.jssora22l:hover { background-position: -130px -31px; }
.jssora22r:hover { background-position: -190px -31px; }
.jssora22l.jssora22ldn { background-position: -250px -31px; }
.jssora22r.jssora22rdn { background-position: -310px -31px; }
.jssora22l.jssora22lds { background-position: -10px -31px; opacity: .3; pointer-events: none; }
.jssora22r.jssora22rds { background-position: -70px -31px; opacity: .3; pointer-events: none; }
.welcome-about .read-more > a {
background: #e54c2a none repeat scroll 0 0;
color: #fff;
display: inline-block;
font-weight: 600;
padding: 16px 38px;
text-transform: uppercase;
} 
</style>
</div>

C#

protected void Page_Load(object sender, EventArgs e)
{
    getSlider();
}

public void getSlider()
{
    DataTable dtProductTable = new DataTable();
    dtProductTable.Columns.Add("ProductID");
    dtProductTable.Columns.Add("ColorID");
    dtProductTable.Columns.Add("ProductName");

    dtProductTable.Rows.Add(1, 1, "Chrysanthemum");
    dtProductTable.Rows.Add(2, 2, "Desert");
    dtProductTable.Rows.Add(3, 3, "Hydrangeas");
    dtProductTable.Rows.Add(4, 4, "Jellyfish");
    dtProductTable.Rows.Add(5, 5, "Koala");
    dtProductTable.Rows.Add(6, 1, "Lighthouse");
    dtProductTable.Rows.Add(7, 2, "Penguins");
    dtProductTable.Rows.Add(8, 3, "Tulips");
    dtProductTable.Rows.Add(9, 4, "Product10");
    dtProductTable.Rows.Add(10, 5, "Product1");
    dtProductTable.Rows.Add(11, 1, "Product2");
    dtProductTable.Rows.Add(12, 2, "Product3");
    dtProductTable.Rows.Add(13, 3, "Product4");
    dtProductTable.Rows.Add(14, 4, "Product5");
    dtProductTable.Rows.Add(15, 5, "Product6");
    dtProductTable.Rows.Add(16, 1, "Product7");
    dtProductTable.Rows.Add(17, 2, "Product8");
    dtProductTable.Rows.Add(18, 3, "Product9");
    string str = string.Empty;
    int i = 0;

    for (i = 0; i < dtProductTable.Rows.Count; i++)
    {
        str += @" <div>
            <img data-u='image' src='Backoffice/images/Category/" + dtProductTable.Rows[i]["ProductName"].ToString() + ".jpg" + @"'  />              
        </div>";
    }

    slider.InnerHtml = str;
}

ScreenShot