jssorスライダーで画像サイズを変更するには？

jssorスライダーの画像サイズを変更したいと思います。スライダの幅を1920ピクセルに変更しましたが、画像のサイズには影響しません。 Jssor Sliderで画像のサイズを変更する方法私はjssorのウェブサイトで利用可能なスライダーの名前別のサイズの写真スライダーを使用しています。この問題については、以下のコードを確認してください。jssorスライダーで画像サイズを変更するには？

<body style="padding:0px; margin:0px; background-color:#fff;font-family:'Open Sans',sans-serif,arial,helvetica,verdana"> 

<!-- #region Jssor Slider Begin --> 
<script src="js/jssor.slider-23.1.6.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    jssor_1_slider_init = function() { 

     var jssor_1_SlideshowTransitions = [ 
      {$Duration:1200,$Zoom:11,$Rotate:-1,$Easing:{$Zoom:$Jease$.$InQuad,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$InQuad},$Opacity:2,$Round:{$Rotate:0.5},$Brother:{$Duration:1200,$Zoom:1,$Rotate:1,$Easing:$Jease$.$Swing,$Opacity:2,$Round:{$Rotate:0.5},$Shift:90}}, 
      {$Duration:1400,x:0.25,$Zoom:1.5,$Easing:{$Left:$Jease$.$InWave,$Zoom:$Jease$.$InSine},$Opacity:2,$ZIndex:-10,$Brother:{$Duration:1400,x:-0.25,$Zoom:1.5,$Easing:{$Left:$Jease$.$InWave,$Zoom:$Jease$.$InSine},$Opacity:2,$ZIndex:-10}}, 
      {$Duration:1200,$Zoom:11,$Rotate:1,$Easing:{$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$InQuad},$Opacity:2,$Round:{$Rotate:1},$ZIndex:-10,$Brother:{$Duration:1200,$Zoom:11,$Rotate:-1,$Easing:{$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$InQuad},$Opacity:2,$Round:{$Rotate:1},$ZIndex:-10,$Shift:600}}, 
      {$Duration:1500,x:0.5,$Cols:2,$ChessMode:{$Column:3},$Easing:{$Left:$Jease$.$InOutCubic},$Opacity:2,$Brother:{$Duration:1500,$Opacity:2}}, 
      {$Duration:1500,x:-0.3,y:0.5,$Zoom:1,$Rotate:0.1,$During:{$Left:[0.6,0.4],$Top:[0.6,0.4],$Rotate:[0.6,0.4],$Zoom:[0.6,0.4]},$Easing:{$Left:$Jease$.$InQuad,$Top:$Jease$.$InQuad,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$InQuad},$Opacity:2,$Brother:{$Duration:1000,$Zoom:11,$Rotate:-0.5,$Easing:{$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$InQuad},$Opacity:2,$Shift:200}}, 
      {$Duration:1500,$Zoom:11,$Rotate:0.5,$During:{$Left:[0.4,0.6],$Top:[0.4,0.6],$Rotate:[0.4,0.6],$Zoom:[0.4,0.6]},$Easing:{$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$InQuad},$Opacity:2,$Brother:{$Duration:1000,$Zoom:1,$Rotate:-0.5,$Easing:{$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$InQuad},$Opacity:2,$Shift:200}}, 
      {$Duration:1500,x:0.3,$During:{$Left:[0.6,0.4]},$Easing:{$Left:$Jease$.$InQuad,$Opacity:$Jease$.$Linear},$Opacity:2,$Outside:true,$Brother:{$Duration:1000,x:-0.3,$Easing:{$Left:$Jease$.$InQuad,$Opacity:$Jease$.$Linear},$Opacity:2}}, 
      {$Duration:1200,x:0.25,y:0.5,$Rotate:-0.1,$Easing:{$Left:$Jease$.$InQuad,$Top:$Jease$.$InQuad,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$InQuad},$Opacity:2,$Brother:{$Duration:1200,x:-0.1,y:-0.7,$Rotate:0.1,$Easing:{$Left:$Jease$.$InQuad,$Top:$Jease$.$InQuad,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$InQuad},$Opacity:2}}, 
      {$Duration:1600,x:1,$Rows:2,$ChessMode:{$Row:3},$Easing:{$Left:$Jease$.$InOutQuart,$Opacity:$Jease$.$Linear},$Opacity:2,$Brother:{$Duration:1600,x:-1,$Rows:2,$ChessMode:{$Row:3},$Easing:{$Left:$Jease$.$InOutQuart,$Opacity:$Jease$.$Linear},$Opacity:2}}, 
      {$Duration:1600,x:1,$Rows:2,$ChessMode:{$Row:3},$Easing:{$Left:$Jease$.$InOutQuart,$Opacity:$Jease$.$Linear},$Opacity:2,$Brother:{$Duration:1600,x:-1,$Rows:2,$ChessMode:{$Row:3},$Easing:{$Left:$Jease$.$InOutQuart,$Opacity:$Jease$.$Linear},$Opacity:2}}, 
      {$Duration:1600,y:-1,$Cols:2,$ChessMode:{$Column:12},$Easing:{$Top:$Jease$.$InOutQuart,$Opacity:$Jease$.$Linear},$Opacity:2,$Brother:{$Duration:1600,y:1,$Cols:2,$ChessMode:{$Column:12},$Easing:{$Top:$Jease$.$InOutQuart,$Opacity:$Jease$.$Linear},$Opacity:2}}, 
      {$Duration:1200,y:1,$Easing:{$Top:$Jease$.$InOutQuart,$Opacity:$Jease$.$Linear},$Opacity:2,$Brother:{$Duration:1200,y:-1,$Easing:{$Top:$Jease$.$InOutQuart,$Opacity:$Jease$.$Linear},$Opacity:2}}, 
      {$Duration:1200,x:1,$Easing:{$Left:$Jease$.$InOutQuart,$Opacity:$Jease$.$Linear},$Opacity:2,$Brother:{$Duration:1200,x:-1,$Easing:{$Left:$Jease$.$InOutQuart,$Opacity:$Jease$.$Linear},$Opacity:2}}, 
      {$Duration:1200,y:-1,$Easing:{$Top:$Jease$.$InOutQuart,$Opacity:$Jease$.$Linear},$Opacity:2,$ZIndex:-10,$Brother:{$Duration:1200,y:-1,$Easing:{$Top:$Jease$.$InOutQuart,$Opacity:$Jease$.$Linear},$Opacity:2,$ZIndex:-10,$Shift:-100}}, 
      {$Duration:1200,x:1,$Delay:40,$Cols:6,$Formation:$JssorSlideshowFormations$.$FormationStraight,$Easing:{$Left:$Jease$.$InOutQuart,$Opacity:$Jease$.$Linear},$Opacity:2,$ZIndex:-10,$Brother:{$Duration:1200,x:1,$Delay:40,$Cols:6,$Formation:$JssorSlideshowFormations$.$FormationStraight,$Easing:{$Top:$Jease$.$InOutQuart,$Opacity:$Jease$.$Linear},$Opacity:2,$ZIndex:-10,$Shift:-100}}, 
      {$Duration:1500,x:-0.1,y:-0.7,$Rotate:0.1,$During:{$Left:[0.6,0.4],$Top:[0.6,0.4],$Rotate:[0.6,0.4]},$Easing:{$Left:$Jease$.$InQuad,$Top:$Jease$.$InQuad,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$InQuad},$Opacity:2,$Brother:{$Duration:1000,x:0.2,y:0.5,$Rotate:-0.1,$Easing:{$Left:$Jease$.$InQuad,$Top:$Jease$.$InQuad,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$InQuad},$Opacity:2}}, 
      {$Duration:1600,x:-0.2,$Delay:40,$Cols:12,$During:{$Left:[0.4,0.6]},$SlideOut:true,$Formation:$JssorSlideshowFormations$.$FormationStraight,$Assembly:260,$Easing:{$Left:$Jease$.$InOutExpo,$Opacity:$Jease$.$InOutQuad},$Opacity:2,$Outside:true,$Round:{$Top:0.5},$Brother:{$Duration:1000,x:0.2,$Delay:40,$Cols:12,$Formation:$JssorSlideshowFormations$.$FormationStraight,$Assembly:1028,$Easing:{$Left:$Jease$.$InOutExpo,$Opacity:$Jease$.$InOutQuad},$Opacity:2,$Round:{$Top:0.5}}} 
     ]; 

     var jssor_1_options = { 
      $AutoPlay: 1, 
      $FillMode: 5, 
      $SlideshowOptions: { 
      $Class: $JssorSlideshowRunner$, 
      $Transitions: jssor_1_SlideshowTransitions, 
      $TransitionsOrder: 1 
      }, 
      $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 bodywidth = jssor_1_slider.body.clientWidth; 
      if (bodywidth) 
       jssor_1_slider.$ScaleWidth(Math.min(bodyWidth, 1920)); 

      else 
       window.setTimeout(ScaleSlider, 30); 
      } 

      ScaleSlider(); 
      $(window).bind("load", ScaleSlider); 
      $(window).bind("resize", ScaleSlider); 
      $(window).bind("orientationchange", ScaleSlider); 
     /*responsive code end*/ 
    }; 
</script> 
<style> 
    /* jssor slider bullet navigator skin 13 css */ 
    /* 
    .jssorb13 div   (normal) 
    .jssorb13 div:hover  (normal mouseover) 
    .jssorb13 .av   (active) 
    .jssorb13 .av:hover  (active mouseover) 
    .jssorb13 .dn   (mousedown) 
    */ 
    .jssorb13 { 
     position: absolute; 
    } 
    .jssorb13 div, .jssorb13 div:hover, .jssorb13 .av { 
     position: absolute; 
     /* size of bullet elment */ 
     width: 21px; 
     height: 21px; 
     background: url('img/b13.png') no-repeat; 
     overflow: hidden; 
     cursor: pointer; 
    } 
    .jssorb13 div { background-position: -5px -5px; } 
    .jssorb13 div:hover, .jssorb13 .av:hover { background-position: -35px -5px; } 
    .jssorb13 .av { background-position: -65px -5px; } 
    .jssorb13 .dn, .jssorb13 .dn:hover { background-position: -95px -5px; } 
</style> 
<div id="jssor_1" style="position:relative;margin:0 auto;top:0px;left:0px;width:1345px;height:500px;overflow:hidden;visibility:hidden;"> 
    <!-- Loading Screen --> 
    <div data-u="loading" style="position:absolute;top:0px;left:0px;background:url('img/loading.gif') no-repeat 50% 50%;background-color:rgba(0, 0, 0, 0.7);"></div> 
    <div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:1345px;height:500px;overflow:hidden;"> 
     <div> 
      <img data-u="image" src="img/3.jpg" /> 
     </div> 
     <div> 
      <img data-u="image" src="img/02.jpg" /> 
     </div> 
     <div> 
      <img data-u="image" src="img/03.jpg" /> 
     </div> 
     <div> 
      <img data-u="image" src="img/04.jpg" /> 
     </div> 
     <div> 
      <img data-u="image" src="img/05.jpg" /> 
     </div> 
     <div> 
      <img data-u="image" src="img/06.jpg" /> 
     </div> 
     <div> 
      <img data-u="image" src="img/07.jpg" /> 
     </div> 
     <div> 
      <img data-u="image" src="img/08.jpg" /> 
     </div> 
     <div> 
      <img data-u="image" src="img/09.jpg" /> 
     </div> 
     <div> 
      <img data-u="image" src="img/10.jpg" /> 
     </div> 
     <div> 
      <img data-u="image" src="img/11.jpg" /> 
     </div> 
     <a data-u="any" href="https://www.jssor.com" style="display:none">slider bootstrap</a> 
    </div> 
    <!-- Bullet Navigator --> 
    <div data-u="navigator" class="jssorb13" style="bottom:16px;right:16px;" data-autocenter="1"> 
     <!-- bullet navigator item prototype --> 
     <div data-u="prototype" style="width:21px;height:21px;"></div> 
    </div> 
</div> 
<script type="text/javascript">jssor_1_slider_init();</script> 
<!-- #endregion Jssor Slider End -->

出典

2017-05-17 Nitesh Malviya

あなたが – Kuru

を使用しているコードを提供し、再び –

をポストを確認してください、私はこのスライダーに取り組んでいますhttps://www.jssor.com/demos/different-size-photo-slider.slider plzは私が推測するリンク –

必要なもの$FillMode: 0へ$FillMode: 5を変更することです。これはスライドの全領域を満たすように画像を伸ばします。また、width：1345pxのdivは1920年になるはずです。詳細はこちらhttps://www.jssor.com/help/layout.htmlの「Fill Mode（Slide）」の下にあります。これが助けてくれるといいなあ

出典

2017-05-17 14:25:38 Zero

その作業.....非常にありがとう –

素晴らしい！お力になれて、嬉しいです！ – Zero

jssorスライダーで画像サイズを変更するには？

答えて

関連する問題