Currently have a bootstrap Carousel that loads three images per slide. I want to split this up (eventually on mobile only) to be one image per slide dynamically. So that way desktop has three images per slide, and mobile has one image per slide.
HTML
<section>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="carousel slide" data-ride="carousel" id="myCarousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li class="active" data-lightbox="1" data-slide-to="0" data-target="#myCarousel"></li>
</ol>
<div class="carousel slide" data-interval="false" data-ride="carousel" id="lightboxImageCarousel">
<ol class="carousel-indicators" style="display: none;">
<li class="active" data-slide-to="0" data-target="#lightboxImageCarousel"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-4 col-sm-4">
<a class="example-image-link" data-lightbox="example-set-7" data-title="" href="#"><img class="img-responsive example-image" src="blank1.jpg"></a>
</div>
<div class="col-xs-4 col-sm-4">
<a class="example-image-link" data-lightbox="example-set-7" data-title="" href="#"><img class="img-responsive example-image" src="blank2.jpg"></a>
</div>
<div class="col-xs-4 col-sm-4">
<a class="example-image-link" data-lightbox="example-set-7" data-title="" href="#"><img class="img-responsive example-image" src="blank3.jpg"></a>
</div>
</div>
</div><a class="left carousel-control" data-slide="prev" href="#lightboxImageCarousel" role="button"><span aria-hidden="true" class="rslides1_nav prev"></span> <span class="sr-only">Previous</span></a> <a class="right carousel-control" data-slide="next" href="#lightboxImageCarousel" role="button"><span aria-hidden="true" class="rslides1_nav next"></span> <span class="sr-only">Next</span></a>
</div>
</div>
</div>
</div>
</div>
</section>
jQuery
if ($('.item').has('.active')) {
var $itemActive = $('.item');
var countDivs = $itemActive[0].childElementCount;
console.log(countDivs);
// Remove classes and convert to XS 12, And hide the rest
$('.item').children().removeClass().addClass('col-xs-12').next().hide();
$('.item').each(function() {
console.log($('.item:nth-child(' + countDivs + ')'));
});
// Create a new Item and loop it to total number of col-xs-12 that exist inside of item
$('.carousel-inner').append("<div class='item'></div>")
// Add nth-child 1 of for Loop 1, and nth-child 2 for loop 2
// Where it breaks
$('.item.active').children().next().appendTo(".item").next().show();
}
(function() {
$('#myCarousel').carousel({
interval: 3200
});
}());
Why not use Bootstrap grid options ?
By using col-xs-12, the content should use 100% of the parent container for the xs media query.
Remember that you can also hide certain tags with the Responsive Utilities Classes
Edit I made a CodePen to illustrate my point, regarding the second technique (using two containers targeting mobile and desktop environment). I think it solves the OP original problem.
As a side note, one can also add tags with the target grid size (i.e. visible-xs-*) to the body tag of the document, then make JS functions to check if they are visible, and use these functions in a debounced $(window).resize(fn) event listener to raise specific events depending on the media query currently being used. This would allow the OP to switch between JS behaviors depending on the current media query, using for example the strategy pattern. It is a bit more complicated for this use case though...
HTML (original answer)
<section>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="carousel slide" data-ride="carousel" id="myCarousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li class="active" data-lightbox="1" data-slide-to="0" data-target="#myCarousel"></li>
</ol>
<div class="carousel slide" data-interval="false" data-ride="carousel" id="lightboxImageCarousel">
<ol class="carousel-indicators" style="display: none;">
<li class="active" data-slide-to="0" data-target="#lightboxImageCarousel"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-12 col-sm-4">
<a class="example-image-link" data-lightbox="example-set-7" data-title="" href="#"><img class="img-responsive example-image" src="blank1.jpg"></a>
</div>
<div class="col-xs-12 col-sm-4">
<a class="example-image-link" data-lightbox="example-set-7" data-title="" href="#"><img class="img-responsive example-image" src="blank2.jpg"></a>
</div>
<div class="col-xs-12 col-sm-4">
<a class="example-image-link" data-lightbox="example-set-7" data-title="" href="#"><img class="img-responsive example-image" src="blank3.jpg"></a>
</div>
</div>
</div><a class="left carousel-control" data-slide="prev" href="#lightboxImageCarousel" role="button"><span aria-hidden="true" class="rslides1_nav prev"></span> <span class="sr-only">Previous</span></a> <a class="right carousel-control" data-slide="next" href="#lightboxImageCarousel" role="button"><span aria-hidden="true" class="rslides1_nav next"></span> <span class="sr-only">Next</span></a>
</div>
</div>
</div>
</div>
</div>
</section>
Edit: second technique
<section>
<div class="container desktop-view hidden-xs">
<div class="row">
<div class="col-md-12">
<div class="carousel slide" data-ride="carousel" id="myCarousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li class="active" data-lightbox="1" data-slide-to="0" data-target="#myCarousel"></li>
</ol>
<div class="carousel slide" data-interval="false" data-ride="carousel" id="lightboxImageCarousel">
<ol class="carousel-indicators" style="display: none;">
<li class="active" data-slide-to="0" data-target="#lightboxImageCarousel"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div class="col-sm-4">
<a class="example-image-link" data-lightbox="example-set-7" data-title="" href="#"><img class="img-responsive example-image" src="blank1.jpg"></a>
</div>
<div class="col-sm-4">
<a class="example-image-link" data-lightbox="example-set-7" data-title="" href="#"><img class="img-responsive example-image" src="blank2.jpg"></a>
</div>
<div class="col-sm-4">
<a class="example-image-link" data-lightbox="example-set-7" data-title="" href="#"><img class="img-responsive example-image" src="blank3.jpg"></a>
</div>
</div>
</div><a class="left carousel-control" data-slide="prev" href="#lightboxImageCarousel" role="button"><span aria-hidden="true" class="rslides1_nav prev"></span> <span class="sr-only">Previous</span></a> <a class="right carousel-control" data-slide="next" href="#lightboxImageCarousel" role="button"><span aria-hidden="true" class="rslides1_nav next"></span> <span class="sr-only">Next</span></a>
</div>
</div>
</div>
</div>
</div>
<div class="container mobile-view hidden-sm hidden-md hidden-lg">
<div class="row">
<div class="col-md-12">
<div class="carousel slide" data-ride="carousel" id="myCarousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li class="active" data-lightbox="1" data-slide-to="0" data-target="#myCarousel"></li>
</ol>
<div class="carousel slide" data-interval="false" data-ride="carousel" id="lightboxImageCarousel">
<ol class="carousel-indicators" style="display: none;">
<li class="active" data-slide-to="0" data-target="#lightboxImageCarousel"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-12">
<a class="example-image-link" data-lightbox="example-set-7" data-title="" href="#"><img class="img-responsive example-image" src="blank1.jpg"></a>
</div>
</div>
<div class="item">
<div class="col-xs-12">
<a class="example-image-link" data-lightbox="example-set-7" data-title="" href="#"><img class="img-responsive example-image" src="blank2.jpg"></a>
</div>
</div>
<div class="item">
<div class="col-xs-12">
<a class="example-image-link" data-lightbox="example-set-7" data-title="" href="#"><img class="img-responsive example-image" src="blank3.jpg"></a>
</div>
</div>
</div><a class="left carousel-control" data-slide="prev" href="#lightboxImageCarousel" role="button"><span aria-hidden="true" class="rslides1_nav prev"></span> <span class="sr-only">Previous</span></a> <a class="right carousel-control" data-slide="next" href="#lightboxImageCarousel" role="button"><span aria-hidden="true" class="rslides1_nav next"></span> <span class="sr-only">Next</span></a>
</div>
</div>
</div>
</div>
</div>
</section>
Related
I have the following problem:
I want to implement a Carousel with Bootstrap version 3.3.7 on my website. The code looks like this:
<!-- Carousel
================================================== -->
<div class="row dark-start d-none d-lg-block">
<div class="col-md-12">
<div id="categoryExampleSlider" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#categoryExampleSlider" data-slide-to="0" class="active"></li>
<li data-target="#categoryExampleSlider" data-slide-to="1"></li>
<li data-target="#categoryExampleSlider" data-slide-to="2"></li>
<li data-target="#categoryExampleSlider" data-slide-to="3"></li>
<li data-target="#categoryExampleSlider" data-slide-to="4"></li>
<li data-target="#categoryExampleSlider" data-slide-to="5"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="../imgs/slider1_sport.jpg" alt="sport">
</div>
<div class="item">
<img src="../imgs/slider2_outdoor.jpg" alt="outdoor">
</div>
<div class="item">
<img src="../imgs/slider3_senioren.jpg" alt="ass">
</div>
<div class="item">
<img src="../imgs/slider4_ass.jpg" alt="ass">
</div>
<div class="item">
<img src="../imgs/slider5_risiko.jpg" alt="risiko">
</div>
<div class="item">
<img src="../imgs/slider6_rettervideo.jpg" alt="rettervideo">
</div>
</div>
<a class="left carousel-control" href="#categoryExampleSlider" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#categoryExampleSlider" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /.carousel -->
</div>
</div>
The controls and the indicators are displayed but it does not rotate. Neither automatically nor when I click on the controls and/or indicators.
What am I doing wrong here?
Try with bootstrap 3.4.0 version. You need to change the version. It absolutely works. This example is useful for u.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row dark-start d-none d-lg-block">
<div class="col-md-12">
<div id="categoryExampleSlider" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#categoryExampleSlider" data-slide-to="0" class="active"></li>
<li data-target="#categoryExampleSlider" data-slide-to="1"></li>
<li data-target="#categoryExampleSlider" data-slide-to="2"></li>
<li data-target="#categoryExampleSlider" data-slide-to="3"></li>
<li data-target="#categoryExampleSlider" data-slide-to="4"></li>
<li data-target="#categoryExampleSlider" data-slide-to="5"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="public/images/1.svg" alt="sport">
</div>
<div class="item">
<img src="public/images/1.svg" alt="outdoor">
</div>
<div class="item">
<img src="public/images/1.svg" alt="ass">
</div>
<div class="item">
<img src="public/images/1.svg" alt="ass">
</div>
<div class="item">
<img src="public/images/1.svg" alt="risiko">
</div>
<div class="item">
<img src="public/images/1.svg" alt="rettervideo">
</div>
</div>
<a class="left carousel-control" href="#categoryExampleSlider" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#categoryExampleSlider" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</body>
</html>
#premox this is your exact answer I didn't change anything except writing CDN links and your good to go:
Check below snippet copied you exact code.
By this I guess you have wrong jquery link in your code.
.item {
height : 400px;
width : 400px;
border: 1px solid red;
margin: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="row dark-start d-none d-lg-block">
<div class="col-md-12">
<div id="categoryExampleSlider" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#categoryExampleSlider" data-slide-to="0" class="active"></li>
<li data-target="#categoryExampleSlider" data-slide-to="1"></li>
<li data-target="#categoryExampleSlider" data-slide-to="2"></li>
<li data-target="#categoryExampleSlider" data-slide-to="3"></li>
<li data-target="#categoryExampleSlider" data-slide-to="4"></li>
<li data-target="#categoryExampleSlider" data-slide-to="5"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="../imgs/slider1_sport.jpg" alt="sport">
</div>
<div class="item">
<img src="../imgs/slider2_outdoor.jpg" alt="outdoor">
</div>
<div class="item">
<img src="../imgs/slider3_senioren.jpg" alt="ass">
</div>
<div class="item">
<img src="../imgs/slider4_ass.jpg" alt="ass">
</div>
<div class="item">
<img src="../imgs/slider5_risiko.jpg" alt="risiko">
</div>
<div class="item">
<img src="../imgs/slider6_rettervideo.jpg" alt="rettervideo">
</div>
</div>
<a class="left carousel-control" href="#categoryExampleSlider" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#categoryExampleSlider" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /.carousel -->
</div>
</div>
Getting crazy :D Been stuck for three days.
I am trying to put a carousel in my page, I am loading the images located in my machine, each one having a size of 1200*480.
When I test it the images are not shown.
This is the code:
<div class="jumbotron">
<h1>Kurt Angle</h1>
<p>Olympic Gold Medalist, World Champion, Hall of Famer, Living Legend</p></div>
<!--CAROUSEL BEGINES-->
<div class="fluid-container">
<div class="carousel slide"
data ride="carousel"
id="carousel">
<!--indicators--->
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<!--wrapper of the images(itmes)--->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="Pictures/angle_olympics_croppedxcf.jpg" alt="slide1">
</div>
<div class="item">
<img src="file:///home/davide/Pictures/angle%20cropped%202.jpg"
alt="slide2">
</div>
<div class="item">
<img src="file:///home/davide/Pictures/kurt_angle_cropped_3.jpg"
alt="slide3">
</div>
</div>
<!--now let's put right and left control-->
<a class="left carousel-control"
href="#carousel"
role="button"
data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
CSS:
.jumbotron{
background-color: #241f14 !important;
color: #ffffff;
}
.carousel .item{
height: 100%;
}
Codepen page
Please could you help me?
try this one:
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://media.istockphoto.com/photos/overhead-view-of-two-business-persons-in-the-lobby-picture-id520791880?s=2048x2048" alt="Image">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="http://media.istockphoto.com/photos/friends-connection-digital-devices-technology-network-concept-picture-id525208898?s=2048x2048" alt="Image">
<div class="carousel-caption">
<h3>Lorem</h3>
<p>Lorem ipsum...</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
DEMO HERE
I defined a carousel slideshow and I want to get the active slide, so I want to check if the second slide is active when it is, I want to display a div that contains some text and to hide the next arrow on the right. When the first slide is active I want to hide the div and show the right arrow.
My JSFIDDLE
Here is my HTML code:
<div id="imagesCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
<ol class="carousel-indicators">
<li data-target="#imagesCarousel" data-slide-to="0" class="active"></li>
<li data-target="#imagesCarousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="container-fluid">
<div class="row">
<img class="col-xs-6 crsl-img" src="http://i.telegraph.co.uk/multimedia/archive/03589/Wellcome_Image_Awa_3589699k.jpg">
<img class="col-xs-6 crsl-img" src="http://i.telegraph.co.uk/multimedia/archive/03589/Wellcome_Image_Awa_3589699k.jpg">
</div>
</div>
</div>
<div class="item check" >
<div class="container-fluid">
<div class="row">
<img class="col-xs-6 crsl-img" src="http://i.telegraph.co.uk/multimedia/archive/03589/Wellcome_Image_Awa_3589722k.jpg">
<img class="col-xs-6 crsl-img" src="http://i.telegraph.co.uk/multimedia/archive/03589/Wellcome_Image_Awa_3589722k.jpg" >
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#imagesCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#imagesCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="features-text" style="display:none;">
This is displayed only when second slide is active
</div>
and my jquery code:
if($('#imagesCarousel .carousel inner').children('.check').hasClass('active')) {
$('.features-text').css('display', 'block');
$('.glyphicon-chevron-right').css('display', 'none');
}
Why this is not working ? Help!
html as follow：I add some id to the document.
<div id="imagesCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
<div id="text"></div>
<ol class="carousel-indicators">
<li data-target="#imagesCarousel" data-slide-to="0" class="active"></li>
<li data-target="#imagesCarousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="container-fluid">
<div class="row">
<img class="col-xs-6 crsl-img" src="http://i.telegraph.co.uk/multimedia/archive/03589/Wellcome_Image_Awa_3589699k.jpg">
<img class="col-xs-6 crsl-img" src="http://i.telegraph.co.uk/multimedia/archive/03589/Wellcome_Image_Awa_3589699k.jpg">
<div class="carousel-caption">
slide1
</div>
</div>
</div>
</div>
<div id="item2" class="item check" >
<div class="container-fluid">
<div class="row">
<img class="col-xs-6 crsl-img" src="http://i.telegraph.co.uk/multimedia/archive/03589/Wellcome_Image_Awa_3589722k.jpg">
<img class="col-xs-6 crsl-img" src="http://i.telegraph.co.uk/multimedia/archive/03589/Wellcome_Image_Awa_3589722k.jpg" >
<div class="carousel-caption">
slide2
</div>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#imagesCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#imagesCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div id="text2" class="features-text hidden" style="">
This is displayed only when second slide is active
</div>
js as follow :
$('#text').html($('.active > .carousel-caption').html());
$('.carousel').on('slid.bs.carousel', function() {
if ($('#item2').hasClass('active')) {
# item2 is active, just remove hidden attr of text2 to show the text2.
$('#text2').removeClass('hidden');
} else {
$('#text2').addClass('hidden');
}
});
It is not working because your if condition gets execute right when the carousel starts (I guess). Have a look at carousel events.
$('#imagesCarousel').on('slide.bs.carousel', function(event) {
if ($(event.relatedTarget).hasClass('check')) {
// your desired element is about to get slid in...
}
else {
// its not
}
});
$('#imagesCarousel').on('slid.bs.carousel', function(event) {
if ($(event.relatedTarget).hasClass('check')) {
// your desired element has been slid in
}
else {
// its not
}
});
As you can see that here on first two slides the interval attribute doesnt work or maybe it's taking the first one for the second. i want to set different interval between first and second slide and for rest it may remain same.. but i am for some reason unable to do this.. kindly help
$.fn.carousel.Constructor.prototype.cycle = function (e) {
e || (this.paused = false)
this.interval && clearInterval(this.interval)
this.options.interval
&& !this.paused
&& (this.interval = setInterval($.proxy(this.next, this), this.$element.find('.item.active').data('interval') || this.options.interval))
return this
}
<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/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="carousel-1" class="carousel carousel-fade slide" data-ride="carousel">
<div class="pause-play-buttons">
<i id="playButton" class="fa fa-play" aria-hidden="true"></i>
<i id="pauseButton" class="fa fa-pause" aria-hidden="true"></i>
</div>
<ol class="carousel-indicators">
<li class="active" data-target="#carousel-1" data-slide-to="0"></li>
<li data-target="#carousel-1" data-slide-to="1"></li>
<li data-target="#carousel-1" data-slide-to="2"></li>
<li data-target="#carousel-1" data-slide-to="3"></li>
<li data-target="#carousel-1" data-slide-to="4"></li>
<li data-target="#carousel-1" data-slide-to="5"></li>
<li data-target="#carousel-1" data-slide-to="6"></li>
<li data-target="#carousel-1" data-slide-to="7"></li>
<li data-target="#carousel-1" data-slide-to="8"></li>
<li data-target="#carousel-1" data-slide-to="9"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active" data-interval="1000">
<img src="http://neelnetworks.org/stangelos/images/pictures_carousel/1.jpg" alt="...">
<div class="carousel-caption wow animated fadeInUp animated">
Wi-Fi for everybody, <br> benefits for you
</div>
</div>
<div class="item" data-interval="5000">
<img src="http://neelnetworks.org/stangelos/images/pictures_carousel/3.jpg" alt="...">
<div class="carousel-caption animated fadeInRight">
Let the good times begin, make your Social Wi-Fi profitable!
</div>
</div>
<div class="item" data-interval="5000">
<img src="http://neelnetworks.org/stangelos/images/pictures_carousel/4.jpg" alt="...">
<div class="carousel-caption animated fadeInDown" style="color: #4e0054; text-shadow: 0 0 2px #fff;">
Your patients enjoy high quality Wi-Fi while waiting for your assistance
</div>
</div>
<div class="item" data-interval="5000">
<img src="http://neelnetworks.org/stangelos/images/pictures_carousel/6.jpg" alt="...">
<div class="carousel-caption animated fadeInLeft" style="color: #006b24;">
Controlled Wi-Fi avoids intruders and prevents abuses
</div>
</div>
<div class="item" data-interval="5000">
<img src="http://neelnetworks.org/stangelos/images/pictures_carousel/5.jpg" alt="...">
<div class="carousel-caption animated fadeInUp" style="color: #006b24;">
Social Wi-Fi gets closer to your customers, even if they are out of your shop …
</div>
</div>
<div class="item" data-interval="5000">
<img src="http://neelnetworks.org/stangelos/images/pictures_carousel/9.jpg" alt="...">
<div class="carousel-caption animated fadeInUp">
With Optimized Wi-Fi you get good coverage and fast browsing
</div>
</div>
<div class="item" data-interval="5000">
<img src="http://neelnetworks.org/stangelos/images/pictures_carousel/8.jpg" alt="...">
<div class="carousel-caption animated fadeInDown" style="color: #006b24;">
To better know your clients… Get closer them with Social Wi-Fi!
</div>
</div>
<div class="item" data-interval="5000">
<img src="http://neelnetworks.org/stangelos/images/pictures_carousel/7.jpg" alt="...">
<div class="carousel-caption animated fadeInRight" style="color: #4e0054; text-shadow: 0 0 2px #fff;">
Be always connected to your customer thanks to Social Wi-Fi
</div>
</div>
<div class="item" data-interval="5000">
<img src="http://neelnetworks.org/stangelos/images/pictures_carousel/2.jpg" alt="...">
<div class="carousel-caption animated fadeInLeft">
Optimized Wi-Fi, your patients connected as if the network is only for them
</div>
</div>
<div class="item" data-interval="5000">
<img src="http://neelnetworks.org/stangelos/images/pictures_carousel/10.jpg" alt="...">
<div class="carousel-caption animated fadeInLeft" style="color: #4e0054; text-shadow: 0 0 2px #fff;">
Let the good times begin, make your Social Wi-Fi profitable!
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-1" role="button" data-slide="prev">
<span class="fa fa-angle-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-1" role="button" data-slide="next">
<span class="fa fa-angle-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
I think you should change the value of first child from 1000 to 5000.
From
<div class="carousel-inner" role="listbox">
<div class="item active" data-interval="1000">
To
<div class="carousel-inner" role="listbox">
<div class="item active" data-interval="5000">
Here's the code I currently have, I'm not sure why the carousel isn't working. The previous/next buttons don't work and the slides wouldn't automatically slide.
Used on Safari 7.0.6
<!-- Carousel
============================================-->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/Slide 1.jpg" alt="image">
<div class="container">
<div class="carousel-caption">
<h1>Heading</h1>
<p>Paragraph</p>
<p><a class="btn btn-large btn-primary" href="http://pmilessyr.github.io/index.html">Link</a></p>
</div>
</div>
</div>
<div class="item">
<img src="img/Slide 2.jpg" alt="image">
<div class="container">
<div class="carousel-caption">
<h1>Heading</h1>
<p>Paragraph</p>
</div>
</div>
</div>
<div class="item">
<img src="img/Slide 3.jpg" alt="image">
<div class="container">
<div class="carousel-caption">
<h1>Heading</h1>
<p>Paragraph</p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<script src="js/jquery-2.1.1.js"></script>
<script src="js/bootstrap.js"></script>
<script src="javascripts/scale.fix.js"></script>
It really depends on the error you are throwing. I tried out your code with putting in my cdns and images and it works fine. So your html for the carousel portion looks fine.
You are calling static libraries in your script sources so make sure those files are there or use the sites cdn.
ex: http://jquery.com/download/
provide more information about the error you are throwing if you can.