Bootstrap carousel in wordpress not working (offsetWidth undefined)

jQuery('#myCarousel').carousel({
    interval:   4000
});
    
var clickEvent = false;
jQuery('#myCarousel').on('click', '.nav a', function() {
    clickEvent = true;
    jQuery('.nav li').removeClass('active');
    jQuery(this).parent().addClass('active');       
}).on('slid.bs.carousel', function(e) {
    if (!clickEvent) {
        var count = jQuery('.nav').children().length -1;
        var current = jQuery('.nav li.active');
        current.removeClass('active').next().addClass('active');
        var id = parseInt(current.data('slide-to'));
        if (count == id) {
            jQuery('.nav li').first().addClass('active');   
        }
    }
    clickEvent = false;
});

#myCarousel {
    display: block;
    margin-top: -30px;
    width: 100%;
}

.carousel-inner .slider_hp{
    display: inline-block;
    z-index: 1;
    position: relative;
    height: 450px;
    width: 100%;
    clear: both;
    margin-bottom: 55px;
}

#myCarousel .item {
    color:#000;
    height: 450px;
    position: relative;
    width: 100%;
}

#myCarousel .item .img_holder img {
    height: 450px;
    margin-top: 0px;
    width: 100%;
}

#myCarousel .item.active {
    display: inline-block!important;
    color:#000;
    height: 450px;
    margin-bottom: 55px;
    width: 100%;
}

#myCarousel .slider_descr{
    background: #00a651;
    height: 450px;
    margin-left: -15px;
}

#myCarousel .slider_descr h3{
    font-family: 'Roboto';
    font-size: 48px;
    font-weight: 700;
    color: #fff;
    line-height: 20px;
    margin-top: 120px;
    margin-bottom: 35px;
}

#myCarousel .slider_descr p{
    font-family: 'Roboto';
    font-size: 16px;
    font-weight: 400;
    color: #fff;
    line-height: 24px;
    margin: 0;
    margin-bottom: 40px;
    display: block;
    width: 70%;
}

#myCarousel .slider_descr button {
    height: 50px;
    width: 100%;
    color: #fff;
    background-color: #fff;
    border:0;
}

#myCarousel .slider_descr button a {
    color: #00a651;
}

#myCarousel .slider_descr button a:hover {
    text-decoration: none;
}

#myCarousel .controls{
    padding:0;
    margin:0;
    position: relative;
    height: 260px;
    display: block;
}

#myCarousel .controls li{
     margin-bottom: 30px;
     height: 100px;
     color: #000;
}

#myCarousel .controls li .controls-icon{
      height: 100px;
      width: 100px;
      border-radius: 5px;
      background: #263762;
      text-align: center;
}

#myCarousel .controls li .controls-descr h3{
    font-family: 'Roboto';
    font-size: 24px;
    font-weight: 700;
    color: #000;
    line-height: 20px;
    margin-top: 0;
    margin-bottom: 15px;
}

#myCarousel .controls li .controls-descr p{
    font-family: 'Roboto';
    font-size: 16px;
    font-weight: 400;
    color: #000;
    line-height: 16px;
    margin: 0;
}

#myCarousel .controls li img {
    margin-top: 24px;
}

#myCarousel .controls li a{
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    top: 0;
    left: 0;
    text-decoration: none; 
}

#myCarousel .controls li a:hover, #myCarousel .controls li a:focus{
    background: none;
}

#myCarousel .controls li.active .controls-icon{
    background: #00a651;
}

#myCarousel .controls li.active .controls-descr h3{
  color: #00a651;
}

.carousel-control.left, .carousel-control.right {
  background-image: none;
  color: #fff;
  opacity: 100;
}

.carousel-control-container{
    width: 44px;
    height: 44px;
    background-color: #263762;
    border-radius: 44px;
    position: absolute;
    left: 50%;
    margin-left: -36px;
    top: 202px;
    z-index: 2;
    overflow: hidden;
}

.carousel-control.left{
    width: 20px;
    height: 20px;
    left: 3px;
    top: 12px;
}

.carousel-control.right{
    width: 20px;
    height: 20px;
    top: 12px;
    right: 3px;
}

.carousel-control .fa-chevron-right{
    width: 20px;
    height: 20px;
    top: 0;
    right: 0;
    margin:0;
    font-size: 20px;  
    display: block;
}

.carousel-control .fa-chevron-left{
    width: 20px;
    height: 20px;
    top: 0;
    left: 0;
    margin: 0;
    font-size: 20px;
    display: block;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="container-fluid nopad">
<div class="row">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner slider_hp">

    <div class="item active">
        <div class="col-xs-6 nopad-r slider_descr">
            <div class="col-xs-7 col-xs-offset-5 nopad">
    
                <h3>RADIOLOGIE</h3>
                <p>Centrul de Radiologie Neurorad va ofera servicii de calitate cu ajutorul
                unei tehnologii moderne cat si o interpretare corecta si rapida a
                rezultatelor.</p>
    
                <div class="col-xs-5 nopad-l">
                    <button type="button" class="btn btn-default">
                        <a href="#">MAI MULTE <strog>DETALII</strong></a>
                    </button>
                </div>
            </div>
        </div>
    
        <div class="col-xs-6 nopad-l img_holder">
            <img src="wp-content/themes/neurorad/img/slider/slide-1.jpg"
                 alt="Radiologie" height="450px" width="1232px" />
        </div>
    </div>
    
    <div class="item">
        <div class="col-xs-6 nopad-r slider_descr">
            <div class="col-xs-7 col-xs-offset-5 nopad">
                <h3>MAMOGRAFIE</h3>
                <p>Centrul de Radiologie Neurorad va ofera servicii de calitate cu ajutorul
                unei tehnologii moderne cat si o interpretare corecta si rapida a
                rezultatelor.</p>
    
                <div class="col-xs-5 nopad-l">
                    <button type="button" class="btn btn-default">
                        <a href="#">MAI MULTE <strog>DETALII</strong></a>
                    </button>
                </div>
            </div>
        </div>
        <div class="col-xs-6 nopad-l img_holder">
            <img src="wp-content/themes/neurorad/img/slider/slide-1.jpg"
                 alt="Radiologie" height="450px" width="1232px" />
        </div>
    </div>

    <div class="item">
        <div class="col-xs-6 nopad-r slider_descr">
            <div class="col-xs-7 col-xs-offset-5 nopad">
                <h3>SEERVICII SI TARIFE</h3>
                <p>Centrul de Radiologie Neurorad va ofera servicii de calitate cu ajutorul
                unei tehnologii moderne cat si o interpretare corecta si rapida a
                rezultatelor.</p>
    
                <div class="col-xs-5 nopad-l">
                    <button type="button" class="btn btn-default">
                        <a href="#">MAI MULTE <strog>DETALII</strong></a>
                    </button>
                </div>
            </div>
        </div>
        <div class="col-xs-6 nopad-l img_holder">
            <img src="wp-content/themes/neurorad/img/slider/slide-1.jpg"
                 alt="Radiologie" height="450px" width="1232px" />
        </div>
    </div>

    <div class="item">
        <div class="col-xs-6 nopad-r slider_descr">
            <div class="col-xs-7 col-xs-offset-5 nopad">
                <h3>PROCEDURI</h3>
                <p>Centrul de Radiologie Neurorad va ofera servicii de calitate cu ajutorul
                unei tehnologii moderne cat si o interpretare corecta si rapida a
                rezultatelor.</p>
    
                <div class="col-xs-5 nopad-l">
                    <button type="button" class="btn btn-default">
                        <a href="#">MAI MULTE <strog>DETALII</strong></a>
                    </button>
                </div>
            </div>
        </div>
        <div class="col-xs-6 nopad-l img_holder">
            <img src="wp-content/themes/neurorad/img/slider/slide-1.jpg"
                 alt="Radiologie" height="450px" width="1232px" />
        </div>
    </div>

</div>

<div class="col-xs-12 nopad carousel-control-container">
    <a class="right carousel-control" href="#myCarousel" data-target="#myCarousel"
       data-toggle="carousel" data-slide="next">
            <span class="fa fa-chevron-right"></span>
    </a>
    <a class="left carousel-control" href="#myCarousel" data-target="#myCarousel"
       data-toggle="carousel" data-slide="prev">
            <span class="fa fa-chevron-left"></span>
    </a>
</div>

<div class="container">
    <div class="row">
        <div class="controls col-xs-12">
            <ul class="nav col-xs-12">

            <li data-target="#myCarousel" data-slide-to="0" class="col-xs-6 nopad-r active">
                <div class="col-xs-3 nopad controls-icon">
                    <img src="wp-content/themes/neurorad/img/slider/slider-icon1.png"
                         alt="Radiologie" height="57px" width="58px" />
                </div>
                <div class="col-xs-9 nopad-r controls-descr">
                    <h3>Radiografie clasica (Rx)</h3>
                    <p>Datorita proprietatilor razelor X de a penetra materia organica si
                    de a produce un efect fotografic pe o suprafata fotosensibila, radiografia
                    reprezinta scopul unui diagnostic de prima...</p>
                </div>
                <a href="#"></a>
            </li>

            <li data-target="#myCarousel" data-slide-to="1" class="col-xs-6 nopad-l">
                <div class="col-xs-3 nopad controls-icon">
                    <img src="wp-content/themes/neurorad/img/slider/slider-icon3.png"
                         alt="Radiologie" height="68px" width="44px" />
                </div>
                <div class="col-xs-9 nopad-r controls-descr">
                    <h3>Mamografie</h3>
                    <p>In trecut, diagnosticarea cancerului mamar se facea in stadiu avansat
                    cand tumora era deja palpabila. Astazi, datorita metodelor imagistice
                    de investigatie el poate fi ....</p>
                </div>
                <a href="#"></a>
            </li>

            <li data-target="#myCarousel" data-slide-to="2" class="col-xs-6 nopad-r">
                <div class="col-xs-3 nopad controls-icon">
                    <img src="wp-content/themes/neurorad/img/slider/slider-icon2.png"
                         alt="Radiologie" height="62px" width="62px" />
                </div>
                <div class="col-xs-9 nopad-r controls-descr">
                    <h3>Servicii si tarife</h3>
                    <p>Oferim o  gama completa de investigatii atat in radiologia clasica cat
                    si mamografie la cel mai bun raport pret/calitate . Aici puteti accesa
                    lista de preturi pentru serviciile noastre.</p>
                </div>
                <a href="#"></a>
            </li>

            <li data-target="#myCarousel" data-slide-to="3" class="col-xs-6 nopad-l">
                <div class="col-xs-3 nopad controls-icon">
                    <img src="wp-content/themes/neurorad/img/slider/slider-icon4.png"
                         alt="Radiologie" height="57px" width="57px" />
                </div>
                <div class="col-xs-9 nopad-r controls-descr">
                    <h3>Proceduri</h3>
                    <p>Pentru a facilita o derulare cat mai rapida si usoara a investigatiei ,
                    va tinem la curent cu procedurile pe care le aplicam in cazul
                    investigatiilor radiologice clasice si a mamografiilor.</p>
                </div>
                <a href="#"></a>
            </li>
            </ul>
        </div>
    </div>
    
</div>
</div>
</div>
</div>