Carousel CSS (bootStrap) - minus with to see image

[rootKID]

Hey W3! :D

So my next big project is to make a carousel via latest bootstrap version (4.1), a CSS CMS Framework. Working great, only i would like to "try" and see if it is possible to me to edit it a bit.

So for starters, it has a normal carousel that shows images, which is just fine.... only i would like to try an edit it a bit so that you see as usual the current image at the middle of the carousel, and then at each side (left/right), you can see the edges of each image next/previous in line.

Currently trying to make use of selectors, or tho without luck :/

This is my current CSS (sorry for the mess... still a beta, so working on it :P):

/*carousel_v1*/

#carouselExample {
    background-color: transparent;
    margin-top: 0px;
    margin-bottom: 10px;
    width: 100%;
}
#carouselExample img {
    max-height: 350px;
}

.carousel-indicators {
    /*margin-bottom: 2px;*/
    /*bottom: 1px;*/
}
.carousel-indicators li {
    /*background-color: #000;*/ /*Not Transparent Color*/
    /*background: rgba(255, 255, 255, 0.5);*/ /*White Transparent*/
    background: rgba(0, 0, 0, 0.4); /*Black Transparent*/
}
.carousel-indicators li.active {
    /*background-color: #000;*/ /*Not Transparent Color*/
    /*background: rgba(255, 255, 255, 0.5);*/ /*White Transparent*/
    background: rgba(0, 0, 0, 0.7); /*Black Transparent*/
}

.carousel-caption {
    bottom: 0;
    width: 100%;
    left: 0; /*Left:0; -> not needed at all in the css code if the width:100%; is not here! This is only to make it look good, smooth & nice!*/
    background: rgba(0, 0, 0, 0.5); /*Black Transparent*/
}

.carousel-control-next {
    /*color: #000000;
    background-color: #000000;*/
}
.carousel-control-next-icon {
    /*background-color: #000;
    color: #000;*/
    background: url(images/carousel_index/arrow-next.png) repeat;
    width: 30px;
    height: 45px;
}

.carousel-control-prev {
    /*color: #000000;
    background-color: #000000;*/
}
.carousel-control-prev-icon {
    background: url(images/carousel_index/arrow-prev.png) repeat;
    width: 30px;
    height: 45px;
    /*background-color: #000;
    color: #000;*/
}





















/*
Ideen er at jeg skal via "CSS-Selectors" selecte de billeder der er EFTER og FØR det aktive billede, så jeg kan give plus/minus de 5% pixels (eller what not), så jeg kan se de næste billeder og billederne før der.

Jeg tænker jeg prøver til at starte med følgene:

(+)
(~)
eller (>)
*/

/* // alle efter!
.carousel-item active ~ .carousel-item .CUSTOM_CSS_CLASS_carousel_img {
    width: calc(-100px);
}
*/

/* // første direkte efter!
.carousel-item active + .carousel-item {
    width: calc(-100px);
}
*/

This is my PHP/HTML so far:

<?php
DB_open_connection_another( "dblink_carousel", "localhost", "xXx_root_xXx", "xxx", "localhost_mod_carousel_v1", "utf8" ); // $dblink_carousel

$HTMLOUT .= '<div class="container-fluid">';
    $HTMLOUT .= '<div class="row">';
        $HTMLOUT .= '<div id="carouselExample" class="carousel slide" data-ride="carousel">';
            /*
            $query = "SELECT * FROM mod_carousel ORDER BY mod_carousel_id DESC";
            $result = mysqli_query($dblink_carousel, $query) or die(mysqli_error($dblink_carousel));
            $count = 0;
            $HTMLOUT .= '<ol class="carousel-indicators">';
                while($row = mysqli_fetch_array($result)) {
                    # Setup
                    $active = (!$count) ? ' active' : '';
                    # Output area
                    $HTMLOUT .= '<li data-target="#carouselExample" data-slide-to="'.$count.'" class="'.$active.'"></li>';
                    $count++;
                }
            $HTMLOUT .= '</ol>';
            */
            $HTMLOUT .= '<div class="carousel-inner" role="listbox">';
                $query = "SELECT * FROM mod_carousel ORDER BY mod_carousel_id DESC";
                $result = mysqli_query($dblink_carousel, $query) or die(mysqli_error($dblink_carousel));
                $count = 0;
                while($row = mysqli_fetch_array($result)) {
                    # Setup
                    $active = (!$count) ? ' active' : '';
                    # Output area
                    $HTMLOUT .= '<div class="carousel-item'.$active.'">';
                        $HTMLOUT .= '<center><img class="img-fluid CUSTOM_CSS_CLASS_carousel_img" src="https://dummyimage.com/1920x1080/fff/0011ff.png&text=Dummy+Image+(1920x1080)" title="Carousel Image" alt="Carousel Image"></center>';
                        /*
                        $HTMLOUT .= '<div class="carousel-caption">';
                            $HTMLOUT .= '<h5>'.$row['mod_carousel_title'].'</h5>';
                            $HTMLOUT .= '<p>'.$row['mod_carousel_description'].'</p>';
                        $HTMLOUT .= '</div>';
                        */
                    $HTMLOUT .= '</div>';
                    $count++;
                }
            $HTMLOUT .= '</div>';
            $HTMLOUT .= '<a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">';
                $HTMLOUT .= '<span class="carousel-control-prev-icon" aria-hidden="true"></span>';
                $HTMLOUT .= '<span class="sr-only">Previous / Forrige</span>';
            $HTMLOUT .= '</a>';
            $HTMLOUT .= '<a class="carousel-control-next" href="#carouselExample" role="button" data-slide="next">';
                $HTMLOUT .= '<span class="carousel-control-next-icon" aria-hidden="true"></span>';
                $HTMLOUT .= '<span class="sr-only">Next / Næste</span>';
            $HTMLOUT .= '</a>';
        $HTMLOUT .= '</div>';
    $HTMLOUT .= '</div>';
$HTMLOUT .= '</div>';
?>

If you guys have any ideas on how to proceed from here, i would really appreciate it :)

And again, sorry for the messy code, just the way i code :P

Thanks in advance! :D