It's my first time using Bootstrap Carousel, I did exactly what the documentation says, I have all four slides showing on top of each other. Any hints?
<div id="madinah-carousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#madinah-carousel" data-slide-to="0" class="active"></li>
<li data-target="#madinah-carousel" data-slide-to="1"></li>
<li data-target="#madinah-carousel" data-slide-to="2"></li>
<li data-target="#madinah-carousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img src="img/mad/1.jpeg" alt="Madinah first screenshot">
</div>
<div class="carousel-item">
<img src="img/mad/2.jpeg" alt="Madinah second screenshot">
</div>
<div class="carousel-item">
<img src="img/mad/3.jpeg" alt="Madinah third screenshot">
</div>
<div class="carousel-item">
<img src="img/mad/4.jpeg" alt="Madinah fourth screenshot">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#madinah-carousel" role="button" data-slide="prev">
<span class="icon-prev" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#madinah-carousel" role="button" data-slide="next">
<span class="icon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
I also included this JS function:
$(function(){
$('.carousel').carousel()
});
This is the header:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--- Font Awsome -->
<script src="https://use.fontawesome.com/4c7009c904.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">
<!-- my CSS -->
<link rel="stylesheet" href="css/styles.css">
At the bottom of the I have the following:
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.js" integrity="sha256-5i/mQ300M779N2OVDrl16lbohwXNUdzL/R2aVUXyXWA=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- 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>
<!-- Scrolling Nav JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<script src="js/scrolling-nav.js"></script>
<script src="js/script.js"></script>
You have wrong classes setted in the div
it's not div class="carousel-item" it's just div class="item"
<div id="madinah-carousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#madinah-carousel" data-slide-to="0" class="active"></li>
<li data-target="#madinah-carousel" data-slide-to="1"></li>
<li data-target="#madinah-carousel" data-slide-to="2"></li>
<li data-target="#madinah-carousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/mad/1.jpeg" alt="Madinah first screenshot">
</div>
<div class="item">
<img src="img/mad/2.jpeg" alt="Madinah second screenshot">
</div>
<div class="item">
<img src="img/mad/3.jpeg" alt="Madinah third screenshot">
</div>
<div class="item">
<img src="img/mad/4.jpeg" alt="Madinah fourth screenshot">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#madinah-carousel" role="button" data-slide="prev">
<span class="icon-prev" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#madinah-carousel" role="button" data-slide="next">
<span class="icon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
I've tried that in fiddle and it's working.
Regards
Related
Everything works in My bootstrap carousel, except the slide effect doesn't happen even though I've added the "slide" CSS tag. The images quickly change; they don't slide.
Couple notes:
I'm using bootstrap v4.3.1.
I used the same mark-up as the bootstrap documentation.
My bootstrap javascript file is after the jquery file.
Any ideas?
Here is my HTML.
<!DOCTYPE html>
<html lang="en-us">
<head>
<link rel="stylesheet" href="/plugins/bootstrap/css/bootstrap.min.css" />
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="row">
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="4000">
<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">
<div class="carousel-item active">
<img src="images/slider-1.png" class="d-block w-100" />
</div>
<div class="carousel-item">
<img src="images/slider-2.png" class="d-block w-100" />
</div>
<div class="carousel-item">
<img src="images/slider-3.png" class="d-block w-100" />
</div>
</div>
<div class="carousel-controls">
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="/shared/js/jquery-3.4.1.min.js"></script>
<script src="/plugins/bootstrap/js/bootstrap.min.js"></script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="row">
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="4000">
<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">
<div class="carousel-item active">
<img src="https://cdn.pixabay.com/photo/2013/07/12/17/47/test-pattern-152459__340.png" class="d-block w-100" />
</div>
<div class="carousel-item">
<img src="https://cdn.pixabay.com/photo/2013/07/12/17/47/test-pattern-152459__340.png" class="d-block w-100" />
</div>
<div class="carousel-item">
<img src="https://cdn.pixabay.com/photo/2013/07/12/17/47/test-pattern-152459__340.png" class="d-block w-100" />
</div>
</div>
<div class="carousel-controls">
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<footer>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="script.js"></script>
</footer>
</html>
I used your code in the <body> </body> section in repl.it and it works but there are some sizing issues tho. copied the code to here you can run it and see for yourself :) It slides as well
Edit*
I see you are inserting the carousel into a row and col, don't think you should do that but if you want to you need to make the correct size adjustments else the carousel will break the row and col each time it slides.
remove this section in your code inorder to make your carousel work properly
<div class="row">
<div class="col">
<div class="row">
Also, I think the reason why yours did not work is because of your HTML structure, and your bootstrap js and CSS CDNS wasn't imported correctly.
getbootstrap.com has a starter/Boiler template that you can always use with the correct imports, layout etc.
See here
https://getbootstrap.com/docs/4.3/getting-started/introduction/#starter-template
Image slider not working when i click on the arrows or when i try to manually change the image.
With my limited knowledge, i tried editing the code with no luck
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="styles/style.css">
<div class="container" id="slider"><!-- Container Starts -->
<div class="col-md-12"><!-- col-md-12 Starts -->
<div id="myCarousel" class="carousel slide" data-ride="carousel"><!-- carousel slide Starts -->
<ol class="carousel-indicators"><!-- carousel-indicators Starts -->
<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>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol><!-- carousel-indicators Ends -->
<div class="carousel-inner"><!-- carousel-inner Starts -->
<div class="item-active">
<img src="admin_panel/slides_images/1.jpg" alt="slide 1">
</div>
<div class="item">
<img src="admin_panel/slides_images/2.jpg" alt="slide 2">
</div>
<div class="item">
<img src="admin_panel/slides_images/3.jpg" alt="slide 3">
</div>
<div class="item">
<img src="admin_panel/slides_images/4.jpg" alt="slide 4">
</div>
</div><!-- carousel-inner Ends -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><!-- left carousel-control Starts -->
<span class="glyphicon glyphicon-chevron-left"> </span>
<span class="sr-only"> Previous </span>
</a><!-- left carousel-control Ends -->
<a class="right carousel-control" href="#myCarousel" data-slide="next"><!-- right carousel-control Starts -->
<span class="glyphicon glyphicon-chevron-right"> </span>
<span class="sr-only"> Next </span>
</a><!-- right carousel-control Ends -->
</div><!-- carousel slide Ends -->
</div><!-- col-md-12 Ends -->
</div><!-- Container Ends -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</body>
</html>
The slider is supposed to change when i click on the arrow or try and change it manually. No errors appear, just not the expected result.
Use The Below Code
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="styles/style.css">
<div class="container">
<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>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://images.pexels.com/photos/34950/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" alt="slide 1" style="width:100%;">
</div>
<div class="item">
<img src="https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="slide 2" style="width:100%;">
</div>
<div class="item">
<img src="https://images.pexels.com/photos/326055/pexels-photo-326055.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="slide 3" style="width:100%;">
</div>
<div class="item">
<img src="https://cdn.pixabay.com/photo/2018/10/30/16/06/water-lily-3784022__340.jpg" alt="slide 4">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!-- Container Ends -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</body>
</html>
When slide changes indicators are in right position (1-2-3). But when I click on them, they are not responding. Prev and next links are working fine. Here is my code:
<div id="theCarousel" class="carousel-slide hidden-xs" data-interval ="3000">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#theCarousel" data-slide-to="0" class="active"></li>
<li data-target="#theCarousel" data-slide-to="1"></li>
<li data-target="#theCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active"><img class="img-responsive" src="eberhard-grossgasteiger-311213.jpg" alt="slide 1"></div>
<div class="item"><img class="d-block img-fluid" src="annie-spratt-176376.jpg" alt="slide 2"></div>
<div class="item"><img class="d-block img-fluid" src="joanna-kosinska-129039.jpg" alt="slide 3"></div>
</div><!-- /carousel-inner -->
<!-- navigation -->
<a class="left carousel-control" href="#theCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#theCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div><!-- /carousel-slide --
Here is JS file:
// Activate Carouse
$("#theCarousel").carousel();
// Enable Carousel Indicators
$(".item").click(function(){
$("#theCarousel").carousel(1);
});
// Enable Carousel Control
$(".left").click(function(){
$("#theCarousel").carousel("prev");
});
$(".right").click(function(){
$("#theCarousel").carousel("next");
});
What is wrong?
Click button "Run code snippet" and check its working, No need to add extra script(js), All controls of carousel handled by bootstrap.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Carousel Example</h2>
<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>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://midtowncarpetcleaning.com/wp-content/themes/envision/lib/images/default-placeholder-1000x600.png" alt="Los Angeles" style="width:100%;">
</div>
<div class="item">
<img src="http://midtowncarpetcleaning.com/wp-content/themes/envision/lib/images/default-placeholder-1000x600.png" alt="Chicago" style="width:100%;">
</div>
<div class="item">
<img src="http://midtowncarpetcleaning.com/wp-content/themes/envision/lib/images/default-placeholder-1000x600.png" alt="New york" style="width:100%;">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>
I finally found out what went wrong. Instead of two classes: <div id="myCarousel" class="carousel slide" data-ride="carousel"> i wrote one with hyphen between: <div id="theCarousel" class="carousel-slide hidden-xs" data-interval ="3000">.
I'm working with the Carousel within bootstrap. I have tested this with many different variations. Even when I copy and paste the example code from bootstrap it still does not work. I have verified that the file paths are accurate. The controls still appear but they do not seemed to be linked to anything. I've seen a few places that mention a "function" but when I add this in nothing changes.
<div class="container">
<div id="myCarousel-example-generic" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="pics/01.jpg" style="max-width: 100%;" />
<div class="carousel-caption">
This should be first picture
</div>
</div>
<div class="item">
<img src="pics/02.jpg" style="max-width: 100%;" />
<div class="carousel-caption">
This should be another picture
</div>
</div>
<div class="item">
<img src="pics/03.jpg" style="max-width: 100%;" />
<div class="carousel-caption">
This is the last picture
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
</div>
This is my code relevant to the carousel and I have below that these two js script calls
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
I'm sure that its something simple but I cannot find what is wrong with this.
You changed the id of carousel but you didn't update any of the controls referencing that id. Your carousel-indicators and carousel-control need to reference "myCarousel-example-generic" not "carousel-example-generic".
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="container">
<div id="myCarousel-example-generic" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel-example-generic" data-slide-to="1"></li>
<li data-target="#myCarousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://placehold.it/750x150?text=1" style="max-width: 100%;" />
<div class="carousel-caption">
This should be first picture
</div>
</div>
<div class="item">
<img src="http://placehold.it/750x150?text=2" style="max-width: 100%;" />
<div class="carousel-caption">
This should be another picture
</div>
</div>
<div class="item">
<img src="http://placehold.it/750x150?text=3" style="max-width: 100%;" />
<div class="carousel-caption">
This is the last picture
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel-example-generic" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel-example-generic" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
</div>
I hate that this is my first question, but I have looked all over and tried to find why my code is not working. Only the first slide loads, and when you click either the left or right arrow, it acts like it is a "link" to take you to that position on the page. Here is what I have so far that is relevant to this (you can view it on www.KatyEnglish.com). Any/all help will be greatly appreciated!!! Thanks!
<head>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="js/textillate-master/assets/animate.css">
</head>
<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>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/slider6.jpg" alt="Katy English Photography Portraits">
</div>
<div class="item">
<img src="img/slider1.jpg" alt="Katy English Photography Portraits">
</div>
<div class="item">
<img src="img/slider5.jpg" alt="Katy English Photography Portraits">
</div>
<div class="item">
<img src="img/slider3.jpg" alt="Katy English Photography Portraits">
</div>
<div class="item">
<img src="img/slider2.jpg" alt="Katy English Photography Portraits">
</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>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/textillate-master/jquery.textillate.js"></script>
<script src="js/textillate-master/assets/jquery.fittext.js"></script>
<script src="js/textillate-master/assets/jquery.lettering.js"></script>
<script>
$(function(){
$('.tlt').textillate({
in: {effect:'rollIn'}
});
})
</script>
<script type="text/javascript">
$('#myCarousel').carousel({
interval: 3000
});
});
</script>