Versuch, twentytwenty in einem Bootstrap-Karussell zu verschachteln

Question

Ich versuche, mehrere Instanzen des twentytwenty Plugins in einem Bootstrap-Karussell zu verschachteln.

Hier ist mein 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> 

Und mein 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 
    }); 
}); 

Das Problem ist, dass das erste Element in dem Karussell zeigt ganz gut, aber wenn ich mit dem zweiten Element schieben es ist leer, wie das div nicht lädt/anzeigt.

Seitennotiz: Wenn ich auf der zweiten Folie auf "inspect element" in Chrom klicke, taucht es plötzlich auf.

Jede Hilfe wird sehr geschätzt,
Alex @ atypicalthemes.com

Answer 1

Versuchen in Full Seite zu laufen. Es klappt.

$(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>