title: Image carousel breaks pushing image out of slider when adding href
body: <p>I added an image carousel to my site and everything worked great until I tried to add a href tag around the img scr link. it pushes the image out of the slider I have put a link to what it looks like below. I did think it was some css pushing it out but after removing all the surrounding tags the image just stayed the same. I need this so i can add a lightbox to the image when clicked.</p>
  
  <hr>
  
  <p>Link to image of slider</p>
  
  <p><a href="https://dl.dropboxusercontent.com/u/9833562/caratest.png" rel="nofollow">https://dl.dropboxusercontent.com/u/9833562/caratest.png</a></p>
  
  <p>I couldn't get it to work on JSFiddle so here is a link to download my files</p>
  
  <p><a href="http://jonathanlowe.co.uk/ws/download/carousel_file.zip" rel="nofollow">http://jonathanlowe.co.uk/ws/download/carousel_file.zip</a></p>
  
  <hr>
  
  <pre><code> &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"&gt;
      &lt;link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon"&gt;
        &lt;link rel="icon" href="img/favicon.ico" type="image/x-icon"&gt;  
      &lt;title&gt;TEST&lt;/title&gt;
      &lt;!-- Bootstrap --&gt;
      &lt;link href="css/bootstrap.min.css" rel="stylesheet"&gt;
      &lt;link rel="stylesheet" href="css/styles.css"&gt;
      &lt;link rel="stylesheet" href="css/queries.css"&gt;
  
      &lt;link rel="stylesheet" type="text/css" href="css/common.css" /&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/normalize.css" /&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/chgrid.css" /&gt;
  
        &lt;!-- Fonts --&gt;
      &lt;link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"&gt;
      &lt;link href='http://fonts.googleapis.com/css?family=Sintony:400,700' rel='stylesheet' type='text/css'&gt;
      &lt;link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'&gt;
      &lt;!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --&gt;
      &lt;!-- WARNING: Respond.js doesn't work if you view the page via file:// --&gt;
      &lt;!--[if lt IE 9]&gt;
        &lt;script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"&gt;&lt;/script&gt;
        &lt;script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"&gt;&lt;/script&gt;
  
  
      &lt;![endif]--&gt;
  </code></pre>
  
  <hr>
  
  <p>CSS</p>
  
  <hr>
  
  <pre><code>        &lt;style media="screen"&gt;
  
  
      .containerslide {
        width: 90%;
        height: auto;
        position: relative;
        margin: 0 auto;
  
  
      }
      .roundabout-holder {
        padding: 0px;
        margin: 0 auto;
        height: 310px;
        width: 100%;
  
  
      }
  
      .roundabout-moveable-item {
        height: 350px;
        width: 380px;
        cursor: pointer;
        display:block;
  
      }
  
      .roundabout-moveable-item img {
        height: 100%;
        width: 100%;
      }
  
      .roundabout-in-focus {
        cursor: auto;
      }
  
      #carousel-descriptions {
        list-style:none;
        display:block;
        width:850px;
  
        padding:0;
      }
  
      #carousel-descriptions li {
        font-size:24px;
        font-weight:bold;
        text-align:center;
        display:none;
      }
  
      #carousel-descriptions li.current {
        display:block;
      }
  
      #carousel-controls2 {
        max-width:920px;
  
        margin:25px auto;
        overflow:auto;
  
  
  
      }
  
      #carousel-controls2 span {
        width:100px;
  
        font-size:14px;
        text-align:center;
        margin:0 5px;
  
        cursor:pointer;
  
        background:#fff;      
      }
      #carousel-controls {
  
  
        width: 320px;
        margin:25px auto;
        overflow:auto;
        border-collapse:collapse;
        text-align:center;
        margin-top: -20px;
      }
  
      #carousel-controls span {
        height: 13px;
        width: 13px;
        display:inline-block;
        font-size:14px;
        text-align:center;
        margin:0 5px;
        padding:1px;
        cursor:pointer;
        border:0.5px solid black;
        background:#c6c6c6;
         -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
        border-radius: 6px; /* future proofing */
        -khtml-border-radius: 6px; /* for old Konqueror browsers */      
      }
  
      #carousel-controls .current {
        background:#000;
        color:;
  
      }
      #carousel {
        margin-bottom:-25px;
  
      }
       #carousel img{
        padding: 30px;
  
      }
      #carousel img:hover { 
        padding:0px;
  
      }
  
      .prev-button{
        padding-bottom:3px; 
        font-size: 22px;
        background:#333;
        width:100px;
        height: 30px;
        color:#fff;
        float: left;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px; /* future proofing */
        -khtml-border-radius: 5px; /* for old Konqueror browsers */
  
      }
      .next-button{
        padding-bottom:3px; 
        font-size: 22px; 
        background:#333;
        width:100px;
        height: 30px;
        color:#fff;
        float: right;
         -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px; /* future proofing */
        -khtml-border-radius: 5px; /* for old Konqueror browsers */
  
      }
  }
  
    &lt;/style&gt;
  
    &lt;/head&gt;
  </code></pre>
  
  <hr>
  
  <p>HTML</p>
  
  <hr>
  
  <pre><code>  &lt;body&gt;
  
      &lt;div class="text-inter"&gt;
      &lt;div class="container"&gt;
        &lt;div class="row"&gt;
  
        &lt;div class="col-lg-12"&gt;
            &lt;h1&gt;&lt;/h1&gt;
  
            &lt;section class="containerslide"&gt;
  
                &lt;div id="carousel"&gt;
  
                  &lt;a href="#"&gt;
                   &lt;img src="img/mactest.png" alt="" class="slide" style="" /&gt;
                   &lt;/a&gt;
                  &lt;img src="img/mactest.png" height="50px" alt="" class="slide"  /&gt;
                 &lt;img src="img/mactest.png" alt="" class="slide" /&gt;
                 &lt;img src="img/mactest.png" alt="" class="slide" /&gt;
                 &lt;img src="img/mactest.png" alt="" class="slide" /&gt;
                 &lt;img src="img/mactest.png" alt="" class="slide" /&gt;
                 &lt;img src="img/mactest.png" alt="" class="slide" /&gt;
                 &lt;img src="img/mactest.png" alt="" class="slide" /&gt;
                 &lt;img src="img/mactest.png" alt="" class="slide" /&gt;
                 &lt;img src="img/mactest.png" alt="" class="slide" /&gt;
                &lt;/div&gt;
                &lt;/section&gt;
  
  
  
                &lt;div id="carousel-controls2" &gt;
                &lt;span&gt;&lt;a href="#"&gt;&lt;div class="prev-button" style=""&gt;&lt;&lt;&lt;/div&gt;&lt;/a&gt;&lt;/span&gt;
  
                &lt;span&gt;&lt;a href="#"&gt;&lt;div class="next-button" style=""&gt;&gt;&gt;&lt;/div&gt;&lt;/a&gt;&lt;/span&gt;
  
                &lt;div id="carousel-controls" &gt;
                  &lt;span class="control current"&gt;&lt;/span&gt;
                  &lt;span class="control"&gt;&lt;/span&gt;
                  &lt;span class="control"&gt;&lt;/span&gt;
                  &lt;span class="control"&gt;&lt;/span&gt;
                  &lt;span class="control"&gt;&lt;/span&gt;
                  &lt;span class="control"&gt;&lt;/span&gt;
                  &lt;span class="control"&gt;&lt;/span&gt;
                  &lt;span class="control"&gt;&lt;/span&gt;
                  &lt;span class="control"&gt;&lt;/span&gt;
                  &lt;span class="control"&gt;&lt;/span&gt;
                  &lt;span class="control"&gt;&lt;/span&gt;
                  &lt;span class="control"&gt;&lt;/span&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
  
        &lt;/div&gt; &lt;!-- col-md-12 End --&gt;
  </code></pre>
  
  <hr>
  
  <p>JAVASCRIPT</p>
  
  <hr>
  
  <pre><code>              &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt;
  
                &lt;script&gt;window.jQuery || document.write('&lt;script src="js/jquery-1.10.2.min.js"&gt;\x3C/script&gt;')&lt;/script&gt;
  
                &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  
  
                 &lt;script type="text/javascript" src="js/shadowbox.js"&gt;&lt;/script&gt;
                  &lt;script type="text/javascript"&gt;
                  Shadowbox.init();
                  &lt;/script&gt;
  
                &lt;script src="js/jquery.roundabout.min.js"&gt;&lt;/script&gt; &lt;!-- Roundabout Link --&gt;
                &lt;!-- Roundabout Script Start --&gt;
  
                &lt;script type="text/javascript"&gt; 
                (function($) {
  
                var $descriptions = $('#carousel-descriptions').children('li'),
                  $controls = $('#carousel-controls').find('span'),
                  $carousel = $('#carousel')
                    .roundabout({childSelector:"img", 
                      minOpacity:1,
                      autoplay:false, 
                      autoplayDuration:50000000,
                      btnNext: true,
                      btnPrev: true,
                      maxZ:380,
                      minZ:200,
                      maxScale: 0.99,
                      responsive:true,
                      clickToFocus: false,
                      autoplayPauseOnHover:true })
                    .on('focus', 'img', function() {
                      var slideNum = $carousel.roundabout("getChildInFocus");
  
                      $descriptions.add($controls).removeClass('current');
                      $($descriptions.get(slideNum)).addClass('current');
                      $($controls.get(slideNum)).addClass('current');
                    });
  
                $controls.on('click dblclick', function() {
                  var slideNum = -1,
                    i = 0, len = $controls.length;
  
                  for (; i&lt;len; i++) {
                    if (this === $controls.get(i)) {
                      slideNum = i;
                      break;
                    }
                  }
  
                  if (slideNum &gt;= 0) {
                    $controls.removeClass('current');
                    $(this).addClass('current');
                    $carousel.roundabout('animateToChild', slideNum);
                  }
                });
  
                }(jQuery));
  
  
                &lt;/script&gt;
  
                &lt;script&gt;
  
                $('.next-button').on('click', function() {
                    $('#carousel').roundabout("animateToNextChild")
                });
  
  
                $('.prev-button').on('click', function() {
                    $('#carousel').roundabout("animateToPreviousChild")
                });
  
                &lt;/script&gt; &lt;!-- Roundabout Slider End --&gt;
  
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>