html twitter-bootstrap-3 nested carousel twentytwenty

Trying to nest twentytwenty inside a bootstrap carousel

I'm trying to nest multiple instances of the twentytwenty plugin inside of a bootstrap carousel.

Here is my code:

<div class="row-fluid">
        <div id="slideshow" class="carousel slide carousel-fade" data-ride="carousel" data-pause="hover">
            <ol class="carousel-indicators">
                <li data-target="#slideshow" data-slide-to="0" class="active"></li>
                <li data-target="#slideshow" data-slide-to="1"></li>
            </ol>
            <div class="carousel-inner">
                <div class="item active">
                    <div class="twentytwenty-container">
                        <img src="images/img1.1.jpg" class="img-responsive">
                        <img src="images/img1.jpg" class="img-responsive">
                    </div>
                </div>
                <div class="item">
                    <div class="twentytwenty-container">
                        <img src="images/img2.1.jpg" class="img-responsive">
                        <img src="images/img2.jpg" class="img-responsive">
                    </div>
                </div>
            </div>
        </div>
</div>

And my js:

$(function(){
    $(".twentytwenty-container").twentytwenty({
        default_offset_pct: 0, // How much of the before image is visible when the page loads
        orientation: 'vertical', // Orientation of the before and after images ('horizontal' or 'vertical')
        no_overlay: true //Do not show the overlay with before and after
    });
});

The problem is that the first item in the carousel displays just fine, but when I slide to the second item it's blank, like the div is not loading/displaying.

Side note: If I click "inspect element" in chrome on the second slide it suddenly pops into existance.

Any help is greatly appreciated,
Alex @atypicalthemes.com

Solution

Try to run in Full Page. It works.

$(window).load(function() {
          $("#container1").twentytwenty();
        });

        *,
        *:before,
        *:after {
          -moz-box-sizing: border-box;
          -webkit-box-sizing: border-box;
          box-sizing: border-box; }
    
        html,
        body {
          font-size: 100%; }
    
        body {
          background: white;
          color: #222222;
          padding: 0;
          margin: 0;
          font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
          font-weight: normal;
          font-style: normal;
          line-height: 1;
          position: relative;
          cursor: default; }
    
        a:hover {
          cursor: pointer; }
    
        a:focus {
          outline: none; }
    
        img,
        object,
        embed {
          max-width: 100%;
          height: auto; }
    
        object,
        embed {
          height: 100%; }
    
        img {
          -ms-interpolation-mode: bicubic; }
    
        #map_canvas img,
        #map_canvas embed,
        #map_canvas object,
        .map_canvas img,
        .map_canvas embed,
        .map_canvas object {
          max-width: none !important; }
    
        .left {
          float: left !important; }
    
        .right {
          float: right !important; }
    
        .text-left {
          text-align: left !important; }
    
        .text-right {
          text-align: right !important; }
    
        .text-center {
          text-align: center !important; }
    
        .text-justify {
          text-align: justify !important; }
    
        .hide {
          display: none; }
    
        .antialiased {
          -webkit-font-smoothing: antialiased; }
    
        img {
          display: inline-block;
          vertical-align: middle; }
    
        textarea {
          height: auto;
          min-height: 50px; }
    
        select {
          width: 100%; }
    
        /* Grid HTML Classes */
        .row {
          width: 100%;
          margin-left: auto;
          margin-right: auto;
          margin-top: 0;
          margin-bottom: 0;
          max-width: 62.5em;
          *zoom: 1; }
          .row:before, .row:after {
            content: " ";
            display: table; }
          .row:after {
            clear: both; }
          .row.collapse .column,
          .row.collapse .columns {
            position: relative;
            padding-left: 0;
            padding-right: 0;
            float: left; }
          .row .row {
            width: auto;
            margin-left: -0.9375em;
            margin-right: -0.9375em;
            margin-top: 0;
            margin-bottom: 0;
            max-width: none;
            *zoom: 1; }
            .row .row:before, .row .row:after {
              content: " ";
              display: table; }
            .row .row:after {
              clear: both; }
            .row .row.collapse {
              width: auto;
              margin: 0;
              max-width: none;
              *zoom: 1; }
              .row .row.collapse:before, .row .row.collapse:after {
                content: " ";
                display: table; }
              .row .row.collapse:after {
                clear: both; }
    
    
    
    
    
    
        .twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after, .twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after {
          content: " ";
          display: block;
          background: white;
          position: absolute;
          z-index: 30;
          -webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
          -moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
          box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); }
    
        .twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after {
          width: 3px;
          height: 9999px;
          left: 50%;
          margin-left: -1.5px; }
    
        .twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after {
          width: 9999px;
          height: 3px;
          top: 50%;
          margin-top: -1.5px; }
    
        .twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay {
          position: absolute;
          top: 0;
          width: 100%;
          height: 100%; }
    
        .twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay {
          -webkit-transition-duration: 0.5s;
          -moz-transition-duration: 0.5s;
          transition-duration: 0.5s; }
    
        .twentytwenty-before-label, .twentytwenty-after-label {
          -webkit-transition-property: opacity;
          -moz-transition-property: opacity;
          transition-property: opacity; }
    
        .twentytwenty-before-label:before, .twentytwenty-after-label:before {
          color: white;
          font-size: 13px;
          letter-spacing: 0.1em; }
    
        .twentytwenty-before-label:before, .twentytwenty-after-label:before {
          position: absolute;
          background: rgba(255, 255, 255, 0.2);
          line-height: 38px;
          padding: 0 20px;
          -webkit-border-radius: 2px;
          -moz-border-radius: 2px;
          border-radius: 2px; }
    
        .twentytwenty-horizontal .twentytwenty-before-label:before, .twentytwenty-horizontal .twentytwenty-after-label:before {
          top: 50%;
          margin-top: -19px; }
    
        .twentytwenty-vertical .twentytwenty-before-label:before, .twentytwenty-vertical .twentytwenty-after-label:before {
          left: 50%;
          margin-left: -45px;
          text-align: center;
          width: 90px; }
    
        .twentytwenty-left-arrow, .twentytwenty-right-arrow, .twentytwenty-up-arrow, .twentytwenty-down-arrow {
          width: 0;
          height: 0;
          border: 6px inset transparent;
          position: absolute; }
    
        .twentytwenty-left-arrow, .twentytwenty-right-arrow {
          top: 50%;
          margin-top: -6px; }
    
        .twentytwenty-up-arrow, .twentytwenty-down-arrow {
          left: 50%;
          margin-left: -6px; }
    
        .twentytwenty-container {
          -webkit-box-sizing: content-box;
          -moz-box-sizing: content-box;
          box-sizing: content-box;
          overflow: hidden;
          position: relative;
          -webkit-user-select: none;
          -moz-user-select: none; }
          .twentytwenty-container img {
            position: absolute;
            top: 0;
            display: block; }
          .twentytwenty-container.active .twentytwenty-overlay, .twentytwenty-container.active :hover.twentytwenty-overlay {
            background: rgba(0, 0, 0, 0); }
            .twentytwenty-container.active .twentytwenty-overlay .twentytwenty-before-label,
            .twentytwenty-container.active .twentytwenty-overlay .twentytwenty-after-label, .twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-before-label,
            .twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-after-label {
              opacity: 0; }
          .twentytwenty-container * {
            -webkit-box-sizing: content-box;
            -moz-box-sizing: content-box;
            box-sizing: content-box; }
    
        .twentytwenty-before-label {
          opacity: 0; }
          .twentytwenty-before-label:before {
            content: "Before"; }
    
        .twentytwenty-after-label {
          opacity: 0; }
          .twentytwenty-after-label:before {
            content: "After"; }
    
        .twentytwenty-horizontal .twentytwenty-before-label:before {
          left: 10px; }
    
        .twentytwenty-horizontal .twentytwenty-after-label:before {
          right: 10px; }
    
        .twentytwenty-vertical .twentytwenty-before-label:before {
          top: 10px; }
    
        .twentytwenty-vertical .twentytwenty-after-label:before {
          bottom: 10px; }
    
        .twentytwenty-overlay {
          -webkit-transition-property: background;
          -moz-transition-property: background;
          transition-property: background;
          background: rgba(0, 0, 0, 0);
          z-index: 25; }
         
        /*.twentytwenty-overlay:hover {
            background: rgba(0, 0, 0, 0.5); }
          .twentytwenty-overlay:hover .twentytwenty-after-label {
              opacity: 1; }
            .twentytwenty-overlay:hover .twentytwenty-before-label {
              opacity: 1; }*/
    
        .twentytwenty-before {
          z-index: 20; }
    
        .twentytwenty-after {
          z-index: 10; }
    
        .twentytwenty-handle {
          height: 38px;
          width: 38px;
          position: absolute;
          left: 50%;
          top: 50%;
          margin-left: -22px;
          margin-top: -22px;
          border: 3px solid white;
          -webkit-border-radius: 1000px;
          -moz-border-radius: 1000px;
          border-radius: 1000px;
          -webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
          -moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
          box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
          z-index: 40;
          cursor: pointer; }
    
        .twentytwenty-horizontal .twentytwenty-handle:before {
          bottom: 50%;
          margin-bottom: 22px;
          -webkit-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
          -moz-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
          box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }
        .twentytwenty-horizontal .twentytwenty-handle:after {
          top: 50%;
          margin-top: 22px;
          -webkit-box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
          -moz-box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
          box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }
    
        .twentytwenty-vertical .twentytwenty-handle:before {
          left: 50%;
          margin-left: 22px;
          -webkit-box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
          -moz-box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
          box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }
        .twentytwenty-vertical .twentytwenty-handle:after {
          right: 50%;
          margin-right: 22px;
          -webkit-box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
          -moz-box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
          box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }
    
        .twentytwenty-left-arrow {
          border-right: 6px solid white;
          left: 50%;
          margin-left: -17px; }
    
        .twentytwenty-right-arrow {
          border-left: 6px solid white;
          right: 50%;
          margin-right: -17px; }
    
        .twentytwenty-up-arrow {
          border-bottom: 6px solid white;
          top: 50%;
          margin-top: -17px; }
    
        .twentytwenty-down-arrow {
          border-top: 6px solid white;
          bottom: 50%;
          margin-bottom: -17px; }

    
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    
    
          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <div class="row">
    
          <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
           <!-- Modal -->
          <div class="modal fade" id="myModal" role="dialog">
            <div class="modal-dialog">
            
              <!-- Modal content-->
              <div class="modal-content" id="container1">
          <img src="https://zurb.com/playground/uploads/upload/upload/210/hero-before.jpg">
          <img src="https://zurb.com/playground/uploads/upload/upload/265/hero-after.jpg">
        </div>
              
          </div>
          </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    
          <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script src="https://zurb.com/playground/uploads/upload/upload/91/jquery.event.move.js"></script>
        <script src="https://zurb.com/playground/uploads/upload/upload/92/jquery.twentytwenty.js"></script>



    $(window).load(function() {
      $("#container1").twentytwenty();
    });
    *,
    *:before,
    *:after {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box; }

    html,
    body {
      font-size: 100%; }

    body {
      background: white;
      color: #222222;
      padding: 0;
      margin: 0;
      font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
      font-weight: normal;
      font-style: normal;
      line-height: 1;
      position: relative;
      cursor: default; }

    a:hover {
      cursor: pointer; }

    a:focus {
      outline: none; }

    img,
    object,
    embed {
      max-width: 100%;
      height: auto; }

    object,
    embed {
      height: 100%; }

    img {
      -ms-interpolation-mode: bicubic; }

    #map_canvas img,
    #map_canvas embed,
    #map_canvas object,
    .map_canvas img,
    .map_canvas embed,
    .map_canvas object {
      max-width: none !important; }

    .left {
      float: left !important; }

    .right {
      float: right !important; }

    .text-left {
      text-align: left !important; }

    .text-right {
      text-align: right !important; }

    .text-center {
      text-align: center !important; }

    .text-justify {
      text-align: justify !important; }

    .hide {
      display: none; }

    .antialiased {
      -webkit-font-smoothing: antialiased; }

    img {
      display: inline-block;
      vertical-align: middle; }

    textarea {
      height: auto;
      min-height: 50px; }

    select {
      width: 100%; }

    /* Grid HTML Classes */
    .row {
      width: 100%;
      margin-left: auto;
      margin-right: auto;
      margin-top: 0;
      margin-bottom: 0;
      max-width: 62.5em;
      *zoom: 1; }
      .row:before, .row:after {
        content: " ";
        display: table; }
      .row:after {
        clear: both; }
      .row.collapse .column,
      .row.collapse .columns {
        position: relative;
        padding-left: 0;
        padding-right: 0;
        float: left; }
      .row .row {
        width: auto;
        margin-left: -0.9375em;
        margin-right: -0.9375em;
        margin-top: 0;
        margin-bottom: 0;
        max-width: none;
        *zoom: 1; }
        .row .row:before, .row .row:after {
          content: " ";
          display: table; }
        .row .row:after {
          clear: both; }
        .row .row.collapse {
          width: auto;
          margin: 0;
          max-width: none;
          *zoom: 1; }
          .row .row.collapse:before, .row .row.collapse:after {
            content: " ";
            display: table; }
          .row .row.collapse:after {
            clear: both; }






    .twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after, .twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after {
      content: " ";
      display: block;
      background: white;
      position: absolute;
      z-index: 30;
      -webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
      -moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
      box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); }

    .twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after {
      width: 3px;
      height: 9999px;
      left: 50%;
      margin-left: -1.5px; }

    .twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after {
      width: 9999px;
      height: 3px;
      top: 50%;
      margin-top: -1.5px; }

    .twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay {
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%; }

    .twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay {
      -webkit-transition-duration: 0.5s;
      -moz-transition-duration: 0.5s;
      transition-duration: 0.5s; }

    .twentytwenty-before-label, .twentytwenty-after-label {
      -webkit-transition-property: opacity;
      -moz-transition-property: opacity;
      transition-property: opacity; }

    .twentytwenty-before-label:before, .twentytwenty-after-label:before {
      color: white;
      font-size: 13px;
      letter-spacing: 0.1em; }

    .twentytwenty-before-label:before, .twentytwenty-after-label:before {
      position: absolute;
      background: rgba(255, 255, 255, 0.2);
      line-height: 38px;
      padding: 0 20px;
      -webkit-border-radius: 2px;
      -moz-border-radius: 2px;
      border-radius: 2px; }

    .twentytwenty-horizontal .twentytwenty-before-label:before, .twentytwenty-horizontal .twentytwenty-after-label:before {
      top: 50%;
      margin-top: -19px; }

    .twentytwenty-vertical .twentytwenty-before-label:before, .twentytwenty-vertical .twentytwenty-after-label:before {
      left: 50%;
      margin-left: -45px;
      text-align: center;
      width: 90px; }

    .twentytwenty-left-arrow, .twentytwenty-right-arrow, .twentytwenty-up-arrow, .twentytwenty-down-arrow {
      width: 0;
      height: 0;
      border: 6px inset transparent;
      position: absolute; }

    .twentytwenty-left-arrow, .twentytwenty-right-arrow {
      top: 50%;
      margin-top: -6px; }

    .twentytwenty-up-arrow, .twentytwenty-down-arrow {
      left: 50%;
      margin-left: -6px; }

    .twentytwenty-container {
      -webkit-box-sizing: content-box;
      -moz-box-sizing: content-box;
      box-sizing: content-box;
      overflow: hidden;
      position: relative;
      -webkit-user-select: none;
      -moz-user-select: none; }
      .twentytwenty-container img {
        position: absolute;
        top: 0;
        display: block; }
      .twentytwenty-container.active .twentytwenty-overlay, .twentytwenty-container.active :hover.twentytwenty-overlay {
        background: rgba(0, 0, 0, 0); }
        .twentytwenty-container.active .twentytwenty-overlay .twentytwenty-before-label,
        .twentytwenty-container.active .twentytwenty-overlay .twentytwenty-after-label, .twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-before-label,
        .twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-after-label {
          opacity: 0; }
      .twentytwenty-container * {
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box; }

    .twentytwenty-before-label {
      opacity: 0; }
      .twentytwenty-before-label:before {
        content: "Before"; }

    .twentytwenty-after-label {
      opacity: 0; }
      .twentytwenty-after-label:before {
        content: "After"; }

    .twentytwenty-horizontal .twentytwenty-before-label:before {
      left: 10px; }

    .twentytwenty-horizontal .twentytwenty-after-label:before {
      right: 10px; }

    .twentytwenty-vertical .twentytwenty-before-label:before {
      top: 10px; }

    .twentytwenty-vertical .twentytwenty-after-label:before {
      bottom: 10px; }

    .twentytwenty-overlay {
      -webkit-transition-property: background;
      -moz-transition-property: background;
      transition-property: background;
      background: rgba(0, 0, 0, 0);
      z-index: 25; }
     
    /*.twentytwenty-overlay:hover {
        background: rgba(0, 0, 0, 0.5); }
      .twentytwenty-overlay:hover .twentytwenty-after-label {
          opacity: 1; }
        .twentytwenty-overlay:hover .twentytwenty-before-label {
          opacity: 1; }*/

    .twentytwenty-before {
      z-index: 20; }

    .twentytwenty-after {
      z-index: 10; }

    .twentytwenty-handle {
      height: 38px;
      width: 38px;
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -22px;
      margin-top: -22px;
      border: 3px solid white;
      -webkit-border-radius: 1000px;
      -moz-border-radius: 1000px;
      border-radius: 1000px;
      -webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
      -moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
      box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
      z-index: 40;
      cursor: pointer; }

    .twentytwenty-horizontal .twentytwenty-handle:before {
      bottom: 50%;
      margin-bottom: 22px;
      -webkit-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
      -moz-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
      box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }
    .twentytwenty-horizontal .twentytwenty-handle:after {
      top: 50%;
      margin-top: 22px;
      -webkit-box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
      -moz-box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
      box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }

    .twentytwenty-vertical .twentytwenty-handle:before {
      left: 50%;
      margin-left: 22px;
      -webkit-box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
      -moz-box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
      box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }
    .twentytwenty-vertical .twentytwenty-handle:after {
      right: 50%;
      margin-right: 22px;
      -webkit-box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
      -moz-box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
      box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }

    .twentytwenty-left-arrow {
      border-right: 6px solid white;
      left: 50%;
      margin-left: -17px; }

    .twentytwenty-right-arrow {
      border-left: 6px solid white;
      right: 50%;
      margin-right: -17px; }

    .twentytwenty-up-arrow {
      border-bottom: 6px solid white;
      top: 50%;
      margin-top: -17px; }

    .twentytwenty-down-arrow {
      border-top: 6px solid white;
      bottom: 50%;
      margin-bottom: -17px; }
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />



      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <div class="row">

      <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
       <!-- Modal -->
      <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">
        
          <!-- Modal content-->
          <div class="modal-content" id="container1">
      <img src="https://zurb.com/playground/uploads/upload/upload/210/hero-before.jpg">
      <img src="https://zurb.com/playground/uploads/upload/upload/265/hero-after.jpg">
    </div>
          
      </div>
      </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://zurb.com/playground/uploads/upload/upload/91/jquery.event.move.js"></script>
    <script src="https://zurb.com/playground/uploads/upload/upload/92/jquery.twentytwenty.js"></script>