If you prefer, you have the option to disregard this response, however, creating a carousel from scratch can be quite laborious. Luckily, there are already numerous solutions available for this problem that have been pre-coded and can be easily customized. Here are a few examples of what you're seeking:

$(document).ready(function(){
  $('.slider1').bxSlider({
    slideWidth: 200,
    minSlides: 2,
    maxSlides: 3,
    slideMargin: 10
  });
});

<div class="slider1">
  <div class="slide"><img src="http://placehold.it/350x150&text=FooBar1"></div>
  <div class="slide"><img src="http://placehold.it/350x150&text=FooBar2"></div>
  <div class="slide"><img src="http://placehold.it/350x150&text=FooBar3"></div>
  <div class="slide"><img src="http://placehold.it/350x150&text=FooBar4"></div>
</div>

I hope this information proves to be beneficial!

How to achieve the desired effect using CSS

@-webkit-keyframes disappear {
    from{transform: translate(0,0);}
    to{transform: translate(-100%,0);}
}
@keyframes disappear{
    from{transform: translate(0,0);}
    to{transform: translate(-100%,0);}
}    
.notshown{
    animation: disappear 2s;
    -webkit-animation: disappear 2s;
}

This CSS will impact the div when the specified class is added to it

Once the animation finishes, the div will return to its original position

If you use display:none, the effect won't be visible (as it will move while hidden)

To overcome this, remove disply:none in CSS and instead employ setTimeout with a delay time equivalent to the animation duration to prevent the div from immediately disappearing until the animation completes

The code has been tested on Chrome, Firefox, and IE 11 browsers

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $(".notshown").css('display','none');
        $('.next').click(function(e){
            e.preventDefault();
            if($('.realizeBox .shown').next().length > 0)
            {
                $('.realizeBox .shown').removeClass('shown').addClass('notshown').next().addClass('shown').removeClass('notshown');
                setTimeout(function(){
                    $(".shown").css('display','');
                    $(".notshown").css('display','none');
                },2000);
            }
        });

        $('.prv').click(function(e){
            e.preventDefault();
            if($('.realizeBox .shown').prev().length > 0)
            {
                $('.realizeBox .shown').removeClass('shown').addClass('notshown').prev().addClass('shown').removeClass('notshown');
            }
        });
    });
</script>
<style>
    @-webkit-keyframes disappear {
        from{transform: translate(0,0);}
        to{transform: translate(-100%,0);}
    }
    @keyframes disappear{
        from{transform: translate(0,0);}
        to{transform: translate(-100%,0);}
    }
    .notshown{
        animation: disappear 2s;
        -webkit-animation: disappear 2s;
    }

</style>
<a href="#" class="next">next</a><br/>
<a href="#" class="prv">prv</a>
<article id="realize" class="realizeBox">
    <div class="shown">
        <div class="heading">
            <h2>Realisations: <span>AGFA</span></h2>
        </div>
        <div class="centering">
            <aside class="left">
                <p>Maecenas laoreet est bibendum, dictum mi vel, cursus mi. Curabitur feugiat libero vitae lorem venenatis consequat. Donec luctus nisi cursus miet sapien blandit, quis congue massa tincidunt.</p>
            </aside>
            <aside class="right">
                <p>Maecenas laoreet est bibendum, dictum mi vel, cursus mi. Curabitur feugiat libero vitae lorem venenatis consequat. Donec luctus nisi cursus miet sapien blandit, quis congue massa tincidunt.</p>
            </aside>
            <div class="clear"></div>
        </div>
        <div class="button">
            <div class="centering"> <a href="#" class="next"></a> <a href="#" class="prv"></a> </div>
        </div>
    </div>
    <div class="notshown">
        <div class="heading">
            <h2>Realisations: <span>TEST</span></h2>
        </div>
        <div class="centering">
            <aside class="left">
                <p>Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla.</p>
            </aside>
            <aside class="right">
                <p>Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla.</p>
            </aside>
            <div class="clear"></div>
        </div>
        <div class="button">
            <div class="centering"> <a href="#" class="next"></a> <a href="#" class="prv"></a> </div>
        </div>
    </div>
</article>

To achieve this effect, consider utilizing CSS transitions.

Assuming you haven't provided the CSS for the notshown and shown classes, it could look like this:

.shown{
  opacity:1;
}

.notshown{
  opacity:0;
}

You can easily create a smooth in-and-out animation by adding the following code:

#realizeBox > div{
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  
  /* Trigger GPU instead of CPU for animations just for fun */
  transition: opacity 200ms linear;
}