Question posted in 
I’ve created a three column slider which seems to work fine in programmes like Brackets.
When I try to use the slider in wordpress, It doesn’t seem to function. Have I done something wrong in the code for it to not function on my website?
This is the page that I have tried to include it on: click here
$(document).ready(function () {
$('#myCarousel').carousel({
interval: 0
})
$('.carousel .item').each(function () {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length > 0) {
next.next().children(':first-child').clone().appendTo($(this));
} else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
}); .container-fluid {
width: 50%;
padding-top: 20px;
}
.carousel {
overflow: hidden;
}
.carousel-inner {
width: 100%;
left: 0%;
}
.carousel-inner>.item.next, .carousel-inner>.item.active.right {
left: 0;
-webkit-transform: translate3d(33%, 0, 0);
transform: translate3d(33%, 0, 0);
}
.carousel-inner>.item.prev, .carousel-inner>.item.active.left {
left: 0;
-webkit-transform: translate3d(-33%, 0, 0);
transform: translate3d(-33%, 0, 0);
}
.carousel-control.left, .carousel-control.right {
background: transparent!important;
width: 25%;
}<div class="container-fluid">
<div class="row">
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" />
</head>
<div class="col-md-12 center-block">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-4">
<a href="#"><img class="img-responsive" src="https://www.mad.uk.com/wp-content/uploads/2017/11/chriss.jpg"></a>
</div>
</div>
<div class="item">
<div class="col-xs-4">
<a href="#"><img class="img-responsive" src="https://www.mad.uk.com/wp-content/uploads/2017/11/chrism.jpg"></a>
</div>
</div>
<div class="item">
<div class="col-xs-4">
<a href="#"><img class="img-responsive" src="https://www.mad.uk.com/wp-content/uploads/2017/11/stu.jpg"></a>
</div>
</div>
<div class="item">
<div class="col-xs-4">
<a href="#"><img class="img-responsive" src="https://www.mad.uk.com/wp-content/uploads/2017/11/gill.jpg"></a>
</div>
</div>
<div class="item">
<div class="col-xs-4">
<a href="#"><img class="img-responsive" src="https://www.mad.uk.com/wp-content/uploads/2017/11/georgie.jpg"></a>
</div>
</div>
</div><a class="left carousel-control" data-slide="prev" href="#myCarousel"><img src="http://i.imgur.com/x6xQ8Qp.png"/></a> <a class="right carousel-control" data-slide="next" href="#myCarousel"><img src="http://i.imgur.com/y6eZV5a.png"/></a>
</div>
</div>
</div>
</div>I have also ran the code on a pen which is included here and it seems to be working fine, my guess is that it could be something to do with the way I’ve implemented in onto the site; I’m not too certain.
2
Answers
did u make this on the page itself? if so u have to copy all this code and paste on a codeblock.
check the console for more details and share it
this is the way, it work on my worppress default theme