<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2> </div> </div> <section id="sec-1"> <div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel" data-interval="false"> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="https://cmkt-image-prd.global.ssl.fastly.net/0.1.0/ps/1842293/1160/772/m1/fpnw/wm0/preview_simplyworkz_email-.png?1478162493&s=fdff5f9bf4fa6db64edbc36ae99674bd" alt="First slide" style="background-color:yellow;"> </div> <div class="carousel-item"> <img class="d-block w-100" src="https://cmkt-image-prd.global.ssl.fastly.net/0.1.0/ps/372080/1160/772/m1/fpnw/wm0/preview1-.jpg?1424739193&s=98777fa47fa01df379157d3090ddf489" alt="Second slide" style="background-color:red;"> </div> <div class="carousel-item"> <img class="d-block w-100" src="https://cmkt-image-prd.global.ssl.fastly.net/0.1.0/ps/400986/1160/773/m1/fpnw/wm0/responsive-email-template-.png?1426257190&s=e27ee049a42f31f21178923d8ebe78bd" alt="Third slide" style="background-color:green;"> </div> <div class="carousel-item"> <img class="d-block w-100" src="https://www.campaignmonitor.com/assets/uploads/2016/05/move-sections-B.png" alt="Third slide"> </div> </div> <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <img src="" class="img-fluid" /> </a> <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <img src="" class="img-fluid" /> </a> </div> </section>

.carousel-item img { height:500px; width:100%; } #sec-1 #carouselExampleFade .carousel-control-next{ transition: 1s; width: 70px; height: 70px; top: 50%; transform: translate(0, -50%); background-color: #ddd; } #sec-1 #carouselExampleFade .carousel-control-next:hover { transition: 1s ; right: 70px; } #sec-1 #carouselExampleFade .carousel-control-next:hover img { width: 70px; height: 70px; transition: 1s; right: -70px; position: absolute; } #sec-1 #carouselExampleFade .carousel-control-prev{ transition: 1s; width: 70px; height: 70px; top: 50%; transform: translate(0, -50%); background-color: #ddd; } #sec-1 #carouselExampleFade .carousel-control-prev:hover { transition: 1s ; left: 70px; } #sec-1 #carouselExampleFade .carousel-control-prev:hover img { width: 70px; height: 70px; transition: 1s; left: -70px; position: absolute; }

$(document).ready(function(){ $('.carousel-control-next').hover(function(){ var conle = $('.carousel-item.active').next('div').children('img').attr('src'); $(this).find('img').attr('src', conle); $(this).on('click', function(){ var conle = $('.carousel-item.active').next('div').children('img').attr('src'); $(this).find('img').attr('src', conle); }); },function() { $('.carousel-control-next').find('img').attr('src', ''); }); $('.carousel-control-prev').hover(function(){ var conle = $('.carousel-item.active').prev('div').children('img').attr('src'); $(this).find('img').attr('src', conle); $(this).on('click', function(){ var conle = $('.carousel-item.active').prev('div').children('img').attr('src'); $(this).find('img').attr('src', conle); }); },function() { $('.carousel-control-prev').find('img').attr('src', ''); }); });