var setup = function(){
   // wrap el in a wrapper
   el.wrap('<div class="' + slider.settings.wrapperClass + '"><div class="bx-viewport"></div></div>');
   // store a namspace reference to .bx-viewport
   slider.viewport = el.parent();
   // add a loading div to display while images are loading
   slider.loader = $('<div class="bx-loading" />');
   slider.viewport.prepend(slider.loader);
   // set el to a massive width, to hold any needed slides
   // also strip any margin and padding from el
   el.css({
    width: slider.settings.mode == 'horizontal' ? (slider.children.length * 100 + 215) + '%' : 'auto',
    position: 'relative'
   });
   // if using CSS, add the easing property
   if(slider.usingCSS && slider.settings.easing){
    el.css('-' + slider.cssPrefix + '-transition-timing-function', slider.settings.easing);
   // if not using CSS and no easing value was supplied, use the default JS animation easing (swing)
   }else if(!slider.settings.easing){
    slider.settings.easing = 'swing';
   }
   var slidesShowing = getNumberSlidesShowing();
   // make modifications to the viewport (.bx-viewport)
   slider.viewport.css({
    width: '100%',
    overflow: 'hidden',
    position: 'relative'
   });
   slider.viewport.parent().css({
    maxWidth: getViewportMaxWidth()
   });
   // make modification to the wrapper (.bx-wrapper)
   if(!slider.settings.pager) {
    slider.viewport.parent().css({
    margin: '0 auto 0px'
    });
   }
   // apply css to all slider children
   slider.children.css({
    'float': slider.settings.mode == 'horizontal' ? 'left' : 'none',
    listStyle: 'none',
    position: 'relative'
   });
   // apply the calculated width after the float is applied to prevent scrollbar interference
   slider.children.css('width', getSlideWidth());
   // if slideMargin is supplied, add the css
   if(slider.settings.mode == 'horizontal' && slider.settings.slideMargin > 0) slider.children.css('marginRight', slider.settings.slideMargin);
   if(slider.settings.mode == 'vertical' && slider.settings.slideMargin > 0) slider.children.css('marginBottom', slider.settings.slideMargin);
   // if "fade" mode, add positioning and z-index CSS
   if(slider.settings.mode == 'fade'){
    slider.children.css({
     position: 'absolute',
     zIndex: 0,
     display: 'none'
    });
    // prepare the z-index on the showing element
    slider.children.eq(slider.settings.startSlide).css({zIndex: slider.settings.slideZIndex, display: 'block'});
   }
   // create an element to contain all slider controls (pager, start / stop, etc)
   slider.controls.el = $('<div class="bx-controls" />');
   // if captions are requested, add them
   if(slider.settings.captions) appendCaptions();
   // check if startSlide is last slide
   slider.active.last = slider.settings.startSlide == getPagerQty() - 1;
   // if video is true, set up the fitVids plugin
   if(slider.settings.video) el.fitVids();
   // set the default preload selector (visible)
   var preloadSelector = slider.children.eq(slider.settings.startSlide);
   if (slider.settings.preloadImages == "all") preloadSelector = slider.children;
   // only check for control addition if not in "ticker" mode
   if(!slider.settings.ticker){
    // if pager is requested, add it
    if(slider.settings.pager) appendPager();
    // if controls are requested, add them
    if(slider.settings.controls) appendControls();
    // if auto is true, and auto controls are requested, add them
    if(slider.settings.auto && slider.settings.autoControls) appendControlsAuto();
    // if any control option is requested, add the controls wrapper
    if(slider.settings.controls || slider.settings.autoControls || slider.settings.pager) slider.viewport.after(slider.controls.el);
   // if ticker mode, do not allow a pager
   }else{
    slider.settings.pager = false;
   }
   // preload all images, then perform final DOM / CSS modifications that depend on images being loaded
   loadElements(preloadSelector, start);
  }