Where should I put my slider on page?

This is how my page is looking. Slider works, but my main menu doesn't. What is causing the conflict and how do I resolve it? Thanks

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile page</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.icons.min.css">
<link rel="stylesheet" type="text/css" href="css/royalcolours.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js">
</script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130409/jquery.cycle2.min.js"></script>
<style type="text/css">
body {
margin-left: 0px;
margin-right: 0px;
}
.ui-btn {font-size: 2.0em;
text-align: center!important;
}
</style>
<body>
<div id="page" data-role="page" data-theme="a">
<div data-role="header">
  <p class="font">Tower Bridge</p>
</div>
    
    <div>

<section>
<div class="cycle-slideshow"
data-cycle-fx=scrollHorz
data-cycle-timeout=2700
>
<img src="images/p3.jpg"/>
<img src="images/p2.jpg"/>
<img src="images/p1.jpg"/>
<img src="images/p4.jpg"/>
<div class="cycle-pager"></div>
</div>
      
<div data-role="content">
  <ul data-role="listview">
   <li><a href="#history"><p class="font">History</p></a></li>
            <li><a href="#gallery"><p class="font">Gallery</p></a></li>
   <li><a href="#exhibition"><p class="font">Exibition</p></a></li>
            <li><a href="#lifting"><p class="font">Bridge Lifting Times</p></a></li>
  </ul>
</div>
<div data-role="footer">
  <h4>Tower Bridge © 2015</h4>
</div>
</div>

<div data-role="page" id="history" >
<div data-role="header">
  <p class="font"> History</p>
<a href="index.html" class="ui-btn ui-icon-home ui-btn-icon-left">Back</a>
</div>
<div data-role="content">

      <h1>Intresting Facts about Tower Bridge</h1>
      <p>1910 - the high-level Walkways, which were designed so that the public could still cross the bridge when it was raised, were closed down due to lack of use.        </p>
      <p>1912 - during an emergency, Frank McClean had to fly between the bascules and the high-level walkways in his Short biplane, to avoid an accident.        </p>
      <p>1952 - a London bus driven by Albert Gunton had to leap from one bascule to the other when the bridge began to rise with the number 78 bus still on it.        </p>
      <p>1977 - Tower Bridge was painted red, white and blue to celebrate the Queen's Silver Jubilee. (Before that, it was painted a chocolate brown colour).        </p>
      <p>1982 - Tower Bridge opened to the public for the first time since 1910, with a permanent exhibition inside called The Tower Bridge Experience. </p>

   <h2>History</h2>
     <p>Over 50 designs were submitted for consideration, some of which are on display at Tower Bridge Exhibition. It wasn't until October 1884 however, that Horace Jones, the City Architect, in collaboration with John Wolfe Barry, offered the chosen design for Tower Bridge as a solution.</p>
     <p>It took eight years, five major contractors and the relentless labour of 432 construction workers to build Tower Bridge.</p>
     <p>When it was built, Tower Bridge was the largest and most sophisticated bascule bridge ever completed ("bascule" comes from the French for "see-saw"). These bascules were operated by hydraulics, using steam to power the enormous pumping engines. The energy created was stored in six massive accumulators, as soon as power was required to lift the Bridge, it was always readily available. The accumulators fed the driving engines, which drove the bascules up and down. Despite the complexity of the system, the bascules only took about a minute to raise to their maximum angle of 86 degrees.</p>
<p>Today, the bascules are still operated by hydraulic power, but since 1976 they have been driven by oil and electricity rather than steam. The original pumping engines, accumulators and boilers are now exhibits within Tower Bridge Exhibition’s Engine Rooms.</p>



</div>
<div data-role="footer" data-position="fixed">
  <h4>Tower Bridge © 2015</h4>
</div>
</div>

<div data-role="page" id="gallery">
<div data-role="header">
  <p class="font">Gallery</p>
<a href="index.html" class="ui-btn ui-icon-home ui-btn-icon-left">Back</a>
</div>
<div data-role="content">


<img src="images/p3.jpg"/>
<img src="images/p2.jpg"/>
<img src="images/p1.jpg"/>
<img src="images/p4.jpg"/>
<img src="images/p5.jpg"/>
<img src="images/p6.jpg"/>
<img src="images/p7.jpg"/>
<img src="images/p8.jpg"/>
<img src="images/p9.jpg"/>
<img src="images/p10.jpg"/>
</video>
</div>
<div data-role="footer" data-position="fixed">
  <h4>Tower Bridge © 2015</h4>
</div>
</div>

<div data-role="page" id="exhibition">
<div data-role="header">
  <p class="font">Exibition</p>
<a href="index.html" class="ui-btn ui-icon-home ui-btn-icon-left">Back</a>
</div>
<div data-role="content">
  <h1>Exciting Exibition</h1>
  <p>What to expect when you step inside the most famous bridge in the world!    </p>
  <p>From the modern high-level Walkways and its spectacular new glass floor to the historic Engine Rooms and Towers, Tower Bridge Exhibition tells the history of the bridge and why it came into existence through animations and digital displays. </p>
  <h2>Tower Bridge Glass Floor
    Experience</h2>
  <p> our newest spectacular feature in the high-level Walkways!

    See London life through a glass floor, from a unique viewpoint 42 metres above the River Thames. And if you're lucky, enjoy the magic of the bridge lifting below your feet! </p>

          <h2>Yoga On the Glass Floor</h2>

<p>Experience something truly unique in our one-off programme of sunrise yoga classes across the new glass floor, along the high-level Walkways, 42 metres above the River Thames.</p>
<h2>Engineering Tours</h2>
<p>Discover the inner workings of the most famous bridge in the world with the Bridge’s illustrious engineering tours. Step inside to learn about the history of the Bridge from one of experienced guides, spy London life through the high-level Walkways’ new glass floor and view the original machinery in the Victorian Engine Rooms. Then, follow one of the Bridge’s Senior Technical Officers down below the river bed to those areas normally out of bounds to the public.</p>


</div>
<div data-role="footer" data-position="fixed">
  <h4>Tower Bridge © 2015</h4>
</div>
</div>

<div data-role="page" id="lifting">
<div data-role="header">
  <p class="font">Bridge Lifting Times</p>
<a href="index.html" class="ui-btn ui-icon-home ui-btn-icon-left">Back</a>
</div>
<div data-role="content">
    <img src="images/table.jpg"/>



<iframe width="560" height="315" src="https://www.youtube.com/embed/dVRsep9xPpA" frameborder="0" allowfullscreen></iframe>
</div>
<div data-role="footer" data-position="fixed">
  <h4>Tower Bridge © 2015</h4>
</div>
</div>
</body>
</html>

Where should I put my slider on page?

Where should I put my slider on page?

Topic Participants

chapmanstewart

jakecigar

jtara-jquery

hkjackjoke