title: HTML Slideshow Width
body: <p>I was working on a homepage for my band and wanted to add an slideshow element from an external source, but I discovered a problem which I was not able to fix. </p>
  
  <p>The slideshow I am using has an absolute size of <code>600 x 300px</code> and I'm not able to change that. Neither can I adjust the position of the slideshow. I want it to be centered in the middle of the side and to have a width of about 75% of the site. The height should be 50% of the width. In the following I'll add the HTML-Text.</p>
  
  <p>I won't add the JavaScripts as it would be too much, but you can find them <a href="http://www.jssor.com/download.html" rel="nofollow">here</a>. I used <code>jssor.slider.js</code>, <code>jssor.js</code> and <code>jquery-1.9.1.min.js</code>.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>  jQuery(document).ready(function ($) {
                  //Reference http://www.jssor.com/development/slider-with-slideshow-jquery.html
                  //Reference http://www.jssor.com/development/tool-slideshow-transition-viewer.html
  
                  var _SlideshowTransitions = [
                  //Fade in R
                  {$Duration: 1200, x: -0.3, $During: { $Left: [0.3, 0.7] }, $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2 }
                  //Fade out L
                  , { $Duration: 1200, x: 0.3, $SlideOut: true, $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2 }
                  ];
  
                  var options = {
                      $AutoPlay: true,                                    //[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: 4000,                            //[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, 4 freeze for desktop, 8 freeze for touch device, 12 freeze for desktop and touch device, default value is 1
  
                      $ArrowKeyNavigation: true,                    //[Optional] Allows keyboard (arrow key) navigation or not, default value is false
                      $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: 600,                                 //[Optional] Width of every slide in pixels, default value is width of 'slides' container
                      //$SlideHeight: 300,                                //[Optional] Height of every slide in pixels, default value is height of 'slides' container
                      $SlideSpacing: 0,                           //[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: 1,                                   //[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: 1,                                //[Optional] Orientation to play slide (for auto play, navigation), 1 horizental, 2 vertical, 5 horizental reverse, 6 vertical reverse, default value is 1
                      $DragOrientation: 3,                                //[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)
  
                      $SlideshowOptions: {                                //[Optional] Options to specify and enable slideshow or not
                          $Class: $JssorSlideshowRunner$,                 //[Required] Class to create instance of slideshow
                          $Transitions: _SlideshowTransitions,            //[Required] An array of slideshow transitions to play slideshow
                          $TransitionsOrder: 1,                           //[Optional] The way to choose transition to play slide, 1 Sequence, 0 Random
                          $ShowLink: true                                    //[Optional] Whether to bring slide link on top of the slider when slideshow is running, default value is false
                      },
  
                      $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
                          $Lanes: 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: 10                                    //[Optional] Vertical space between each item in pixel, default value is 0
                      },
  
                      $ArrowNavigatorOptions: {
                          $Class: $JssorArrowNavigator$,              //[Requried] Class to create arrow navigator instance
                          $ChanceToShow: 2,                                //[Required] 0 Never, 1 Mouse Over, 2 Always
                          $AutoCenter: 2                                 //[Optional] Auto center navigator in parent container, 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
                      },
  
                      $ThumbnailNavigatorOptions: {
                          $Class: $JssorThumbnailNavigator$,              //[Required] Class to create thumbnail navigator instance
                          $ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always
                          $ActionMode: 0,                                 //[Optional] 0 None, 1 act by click, 2 act by mouse hover, 3 both, default value is 1
                          $DisableDrag: true                              //[Optional] Disable drag or not, default value is false
                      }
                  };
  
                  var jssor_sliderb = new $JssorSlider$("sliderb_container", options);
                  //responsive code begin
                  //you can remove responsive code if you don't want the slider scales while window resizes
                  function ScaleSlider() {
                      var parentWidth = jssor_sliderb.$Elmt.parentNode.clientWidth;
                      if (parentWidth)
                          jssor_sliderb.$ScaleWidth(Math.min(parentWidth, 600));
                      else
                          window.setTimeout(ScaleSlider, 30);
                  }
                  ScaleSlider();
  
                  $(window).bind("load", ScaleSlider);
                  $(window).bind("resize", ScaleSlider);
                  $(window).bind("orientationchange", ScaleSlider);
                  //responsive code end
              });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.captionOrange, .captionBlack
              {
                  color: #fff;
                  font-size: 20px;
                  line-height: 30px;
                  text-align: center;
                  border-radius: 4px;
              }
              .captionOrange
              {
                  background: #EB5100;
                  background-color: rgba(235, 81, 0, 0.6);
              }
              .captionBlack
              {
                font-size:16px;
                  background: #000;
                  background-color: rgba(0, 0, 0, 0.4);
              }
              a.captionOrange, A.captionOrange:active, A.captionOrange:visited
              {
                color: #ffffff;
                text-decoration: none;
              }
              a.captionOrange:hover
              {
                  color: #eb5100;
                  text-decoration: underline;
                  background-color: #eeeeee;
                  background-color: rgba(238, 238, 238, 0.7);
              }
              .bricon
              {
                  background: url(../img/browser-icons.png);
              }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;img id="Tlogo" src="placeholder.jpg" alt="Something went badly wrong, sorry :-("
      &lt;div id="Tmenu"&gt;
        &lt;ul id="Navigation"&gt;
          &lt;li&gt;&lt;a id="aktuell" href="index.html"&gt;Home&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="UeberUns.html"&gt;&amp;Uuml;ber Uns&lt;/a&gt;
       &lt;ul&gt;
         &lt;li&gt;&lt;a href="DieBand.html"&gt;Die Band&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="Equipment.html"&gt;Equipment&lt;/a&gt;&lt;/li&gt;
       &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="Musik.html"&gt;Musik&lt;/a&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;a href="Album1.html"&gt;Musik1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="Album2.html"&gt;Musik2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="Album3.html"&gt;Musik3&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;[Coming Soon]&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="Kontakt.html"&gt;Kontakt&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;[Intern]&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
        &lt;div&gt;&lt;/div&gt;
      &lt;/div&gt;
  
          &lt;!-- Jssor Slider Begin --&gt;
          &lt;!-- You can move inline styles to css file or css block. --&gt;
          &lt;div id="sliderb_container" style="position: relative; width: 600px;
              height: 300px; overflow: hidden;"&gt;
  
              &lt;!-- Loading Screen --&gt;
              &lt;div u="loading" style="position: absolute; top: 0px; left: 0px;"&gt;
                  &lt;div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block;
                      background-color: #000; top: 0px; left: 0px;width: 100%;height:100%;"&gt;
                  &lt;/div&gt;
                  &lt;div style="position: absolute; display: block; background: url(../img/loading.gif) no-repeat center center;
                      top: 0px; left: 0px;width: 100%;height:100%;"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;!-- Slides Container --&gt;
              &lt;div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
                  overflow: hidden;"&gt;
                  &lt;div&gt;
                      &lt;img u=image src="placeholder.jpg" /&gt;
                      &lt;div u="thumb"&gt;Awesome News&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                      &lt;img u=image src="placeholder.jpg" /&gt;
                      &lt;div u="thumb"&gt;More News!&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                      &lt;img u=image src="placeholder.jpg" /&gt;
                      &lt;div u="thumb"&gt;Cool Stuff Happening out there!&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                      &lt;img u=image src="placeholder.jpg" /&gt;
                      &lt;div u="thumb"&gt;Eat all the Grass that you want!!!&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;!-- ThumbnailNavigator Skin Begin --&gt;
              &lt;div u="thumbnavigator" class="sliderb-T" style="position: absolute; bottom: 0px; left: 0px; height:45px; width:600px;"&gt;
                  &lt;div style="filter: alpha(opacity=40); opacity:0.4; position: absolute; display: block;
                      background-color: #000000; top: 0px; left: 0px; width: 100%; height: 100%;"&gt;
                  &lt;/div&gt;
                  &lt;!-- Thumbnail Item Skin Begin --&gt;
                  &lt;div u="slides"&gt;
                      &lt;div u="prototype" style="POSITION: absolute; WIDTH: 600px; HEIGHT: 45px; TOP: 0; LEFT: 0;"&gt;
                          &lt;div u="thumbnailtemplate" style="font-family: verdana; font-weight: normal; POSITION: absolute; WIDTH: 100%; HEIGHT: 100%; TOP: 0; LEFT: 0; color:#fff; line-height: 45px; font-size:20px; padding-left:10px;"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;!-- Thumbnail Item Skin End --&gt;
              &lt;/div&gt;
              &lt;!-- ThumbnailNavigator Skin End --&gt;
              
              &lt;!-- Bullet Navigator Skin Begin --&gt;
              &lt;!-- jssor slider bullet navigator skin 01 --&gt;
              &lt;style&gt;
                  /*
                  .jssorb01 div           (normal)
                  .jssorb01 div:hover     (normal mouseover)
                  .jssorb01 .av           (active)
                  .jssorb01 .av:hover     (active mouseover)
                  .jssorb01 .dn           (mousedown)
                  */
                  .jssorb01 div, .jssorb01 div:hover, .jssorb01 .av
                  {
                      filter: alpha(opacity=70);
                      opacity: .7;
                      overflow:hidden;
                      cursor: pointer;
                      border: #000 1px solid;
                  }
                  .jssorb01 div { background-color: gray; }
                  .jssorb01 div:hover, .jssorb01 .av:hover { background-color: #d3d3d3; }
                  .jssorb01 .av { background-color: #fff; }
                  .jssorb01 .dn, .jssorb01 .dn:hover { background-color: #555555; }
              &lt;/style&gt;
              &lt;!-- bullet navigator container --&gt;
              &lt;div u="navigator" class="jssorb01" style="position: absolute; bottom: 16px; right: 10px;"&gt;
                  &lt;!-- bullet navigator item prototype --&gt;
                  &lt;div u="prototype" style="POSITION: absolute; WIDTH: 12px; HEIGHT: 12px;"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;!-- Bullet Navigator Skin End --&gt;
              
              &lt;!-- Arrow Navigator Skin Begin --&gt;
              &lt;style&gt;
                  /* jssor slider arrow navigator skin 05 css */
                  /*
                  .jssora05l              (normal)
                  .jssora05r              (normal)
                  .jssora05l:hover        (normal mouseover)
                  .jssora05r:hover        (normal mouseover)
                  .jssora05ldn            (mousedown)
                  .jssora05rdn            (mousedown)
                  */
                  .jssora05l, .jssora05r, .jssora05ldn, .jssora05rdn
                  {
                    position: absolute;
                    cursor: pointer;
                    display: block;
                      background: url(../img/a17.png) no-repeat;
                      overflow:hidden;
                  }
                  .jssora05l { background-position: -10px -40px; }
                  .jssora05r { background-position: -70px -40px; }
                  .jssora05l:hover { background-position: -130px -40px; }
                  .jssora05r:hover { background-position: -190px -40px; }
                  .jssora05ldn { background-position: -250px -40px; }
                  .jssora05rdn { background-position: -310px -40px; }
              &lt;/style&gt;
              &lt;!-- Arrow Left --&gt;
              &lt;span u="arrowleft" class="jssora05l" style="width: 40px; height: 40px; top: 123px; left: 8px;"&gt;
              &lt;/span&gt;
              &lt;!-- Arrow Right --&gt;
              &lt;span u="arrowright" class="jssora05r" style="width: 40px; height: 40px; top: 123px; right: 8px"&gt;
              &lt;/span&gt;
              &lt;!-- Arrow Navigator Skin End --&gt;
              &lt;a style="display: none" href="http://www.jssor.com"&gt;Image Slider&lt;/a&gt;
              &lt;!-- Trigger --&gt;
          &lt;/div&gt;
          &lt;!-- Jssor Slider End --&gt;</code></pre>
  </div>
  </div>
  </p>