Problema com slide
Bom dia, bem galera eu sou um completo noob em Javascript e eu to quebrando a cabeça pra resolver esse problema.Estou fazendo um site pro meu pai e ele me enviou umas foto pra colocar em um slide até ai blz,a imagem fica toda desconfigurada e eu acho que o problema é a divisão do slide (O espaço pra cada imagem) porque cada imagem é grande e fica desconfigurado,resumindo eu só queria saber como tirar isso esse espaço,acho que eu não fui bem direto,não estou conseguindo upar as imagens...em fim o código é esse aqui quem poder ajudar...
<!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 = 1980;
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:100px;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="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>
</div>
<script type="text/javascript">jssor_1_slider_init();</script>
<!-- #endregion Jssor Slider End -->
</body>
</html>Discussão (0)
Carregando comentários...