Dreamweaver CS6- jquery and jquery cycle to have 5 images slide (as a fade) in a banner code failure- help?

Question

Dreamweaver CS6- I am trying to use jquery and jquery cycle to have 5 images slide (as a fade) in a banner. I thought I got the code right but it stacked the images. I suspect I have the incorrect code for the position or I haven't properly added cycle.
my head code:
<title>slider</title>
<script type="text/javascript" src="JS/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="JS/jquery.cycle2.min.js"></script>
<script type="text/javascript">
$('#slider').cycle({
</script>
<style type="text/CSS">
#slider {margin:auto;}
</style>
My div code:
<div id="slider">
  <p> 
    <img src="Leather web page/DSC_0531_4925.JPG"/>
    <img src="Leather web page/DSC_0035_edited-1.JPG"/>
    <img src="Leather web page/DSC_1593_edited-1.jpg"/>
    <img src="Leather web page/DSC_1595_edited-1.jpg"/>
    <img src="Leather web page/DSC_1821.jpg"/>
    </div>
Any help would be greatly appreciated.

Answer 1

1. You can use a constructor to change the defaults. The default values can be seen in jquery.cycle2.js starting at line 659 as per the following. As you can see at the bottom, the code automatically runs the slideshow(s)
// @see: http://jquery.malsup.com/cycle2/api
$.fn.cycle.defaults = {
    allowWrap:        true,
    autoSelector:     '.cycle-slideshow[data-cycle-auto-init!=false]',
    delay:            0,
    easing:           null,
    fx:              'fade',
    hideNonActive:    true,
    loop:             0,
    manualFx:         undefined,
    manualSpeed:      undefined,
    manualTrump:      true,
    maxZ:             100,
    pauseOnHover:     false,
    reverse:          false,
    slideActiveClass: 'cycle-slide-active',
    slideClass:       'cycle-slide',
    slideCss:         { position: 'absolute', top: 0, left: 0 },
    slides:          '> img',
    speed:            500,
    startingSlide:    0,
    sync:             true,
    timeout:          4000,
    updateView:       0
// automatically find and run slideshows
$(document).ready(function() {
    $( $.fn.cycle.defaults.autoSelector ).cycle();
2. To center the slideshow, merely center the container as in
div.cycle-slideshow {
    width: 1000px;
    margin: auto;