Imagem mal ajustada jquery

Luck_. · Janeiro 12, 2018

Opa e ai blz ? bem galera eu não tenho a minima noção de como mexe com javascript muito menos jquery kk mas pra fazer um slideshow que preciso é necessário eu usar o jquery,porém a imagem do slideshow está fora da forma ,eu não sei como resolver se alguem poder ajudar.

Código:


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<body style="padding:0px; margin:0px; background-color:#fff;font-family:arial,helvetica,sans-serif,verdana,'Open Sans'">

    <!-- #region Jssor Slider Begin -->
    <!-- Generator: Jssor Slider Maker -->
    <!-- Source: https://www.jssor.com -->
    <script src="js2/jssor.slider-26.9.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        jssor_1_slider_init = function() {

            var jssor_1_options = {
              $AutoPlay: 1,
              $Idle: 0,
              $SlideDuration: 5000,
              $SlideEasing: $Jease$.$Linear,
              $PauseOnHover: 4,
              $SlideWidth: 140,
              $Cols: 7,
              $Align: 0
            };

            var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);

            /*#region responsive code begin*/

            var MAX_WIDTH = 980;

            function ScaleSlider() {
                var containerElement = jssor_1_slider.$Elmt.parentNode;
                var containerWidth = containerElement.clientWidth;

                if (containerWidth) {

                    var expectedWidth = Math.min(MAX_WIDTH || containerWidth, containerWidth);

                    jssor_1_slider.$ScaleWidth(expectedWidth);
                }
                else {
                    window.setTimeout(ScaleSlider, 30);
                }
            }

            ScaleSlider();

            $Jssor$.$AddEvent(window, "load", ScaleSlider);
            $Jssor$.$AddEvent(window, "resize", ScaleSlider);
            $Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
            /*#endregion responsive code end*/
        };
    </script>
    <style>
        /* jssor slider loading skin spin css */
        .jssorl-009-spin img {
            animation-name: jssorl-009-spin;
            animation-duration: 1.6s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }

        @keyframes jssorl-009-spin {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

    </style>
    <div id="jssor_1" style="position:relative;margin:0 auto;top:0px;left:0px;width:980px;height:300px;overflow:hidden;visibility:hidden;">
        <!-- Loading Screen -->
        <div data-u="loading" class="jssorl-009-spin" style="position:absolute;top:0px;left:0px;width:100%;height:100%;text-align:center;background-color:rgba(0,0,0,0.7);">
            <img style="margin-top:-19px;position:relative;top:50%;width:38px;height:38px;" src="img/spin.svg" />
        </div>
        <div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:980px;height:100px;overflow:hidden;">
           <!-- <div data-p="30.00">
                <img data-u="image" src="imgs/001.jpg" />
            </div>
            <div data-p="30.00">
                <img data-u="image" src="imgs/002.jpg" />
            </div>
            <div data-p="30.00">
                <img data-u="image" src="imgs/003.jpg" />
            </div>
            <div data-p="30.00">
                <img data-u="image" src="imgs/004.jpg" />
            </div>
            <div data-p="30.00">
                <img data-u="image" src="imgs/009.jpg" />
            </div>
            <div data-p="30.00">
                <img data-u="image" src="imgs/010.jpg" />
            </div>
            <div data-p="30.00">
                <img data-u="image" src="imgs/019.jpg" />
            </div>
            <div data-p="30.00">
                <img data-u="image" src="imgs/020.jpg" />
            </div>
            <div data-p="30.00">
                <img data-u="image" src="imgs/021.jpg" />
            </div>
            <div data-p="30.00">
                <img data-u="image" src="imgs/022.jpg" />
            </div>
            <div data-p="30.00">
                <img data-u="image" src="imgs/024.jpg" />
            </div>
        </div>-->
	
		<div data-p="30.00">
                <img data-u="image" src="Imagens/3.png" />
            </div>
            <div data-p="30.00">
                <img data-u="image" src="Imagens/4.png" />
            </div>
            <div data-p="30.00">
                <img data-u="image" src="Imagens/5.png" />
            </div>
            <div data-p="30.00">
                <img data-u="image" src="Imagens/6.png" />
            </div>
            <div data-p="30.00">
                <img data-u="image" src="Imagens/7.png" />
            </div>
            <div data-p="30.00">
                <img data-u="image" src="Imagens/8.png" />
            </div>
            <div data-p="30.00">
                <img data-u="image" src="Imagens/9.png" />
            </div>
            <div data-p="30.00">
                <img data-u="image" src="Imagens/10.png" />
            </div>
            <div data-p="30.00">
                <img data-u="image" src="Imagens/11.png" />
            </div>
            <div data-p="30.00">
                <img data-u="image" src="Imagens/12.png" />
            </div>
            <div data-p="30.00">
                <img data-u="image" src="Imagens/13.png" />
            </div>
			<div data-p="30.00">
                <img data-u="image" src="Imagens/14.png" />
            </div>
        </div>
		
    </div>
    <script type="text/javascript">jssor_1_slider_init();</script>
    <!-- #endregion Jssor Slider End -->
</body>
</html>