Issue with carousel using bootstrap 2 - javascript

trying to use a carousel on my webpage, but cannot get the code to come in. think it is something to do with calling the javascript from the bootstrap folder, but not sure. please see code below:
in body:
<div id="myCarousel" class="carousel slide">
<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>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<div class="row-fluid">
<div class="span12"><img src="images/Fiona & Catherine.jpg" alt="Ladies Dancing" style="max-width:100%; max-height: 75%;"></div>
</div><!--/row-fluid-->
</div><!--/item-->
<div class="item">
<div class="row-fluid">
<div class="span12"><img src="images/Group 1.jpg" alt="Group of Dancers" style="max-width:100%; max-height: 75%;"></div>
</div><!--/row-fluid-->
</div><!--/item-->
<div class="item">
<div class="row-fluid">
<div class="span12"><img src="images/Group 2.jpg" alt="Group of Dancers" style="max-width:100%; max-height: 75%;"></div>
</div><!--/row-fluid-->
</div><!--/item-->
</div><!--/carousel-inner-->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div><!--/myCarousel-->
before closing body tag to try to call the javascript:
<script src="js/bootstrap.js">
$('.carousel').carousel();
</script>
I am a beginner to web design, so thanks for help!!!

First of all I think you should use Twitter Bootstrap 3, since it's the newest version of Bootstrap.
About your problem, see if you're calling jquery before you call bootstrap.js file.

Two separate script tags, sir :)
<script src="js/bootstrap.js"></script>
<script>
$(function() {
$('.carousel').carousel();
});
</script>

Related

Animation script not working after AJAX call

I have some problem with my animation script after page call with AJAX. In this case I load that page if opened in mobile screen browser. I have 2 files called index.php and mobile.php. I put AJAX in index.php so when user openend www.example.com it will load index.php first and then check if user open that page in mobile browser it will make AJAX call to load mobile.php. In mobile.php there is some carousel slider animation and when it load with AJAX the slider animation not working anymore. It's maybe the JQuery not initialized when onload is triggered.
This is my AJAX in index.php :
<script>
window.mobilecheck = function() {
var check = false;
if(window.innerWidth<768){
check=true;
}
return check;
}
if(window.mobilecheck()){
$.ajax({
'type': 'POST',
'url': 'mobile.php',
'data': {test:'test'},
'success': function(response) {
//alert(response);
$("html").html(response);
}
});
}
</script>
And this is my mobile.php :
<!DOCTYPE html>
<html>
<head>
<title></title>
<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
body {
background-color: #eaeaea;
}
</style>
</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="1.png" alt="Los Angeles" style="width:25%;">
</div>
<div class="item">
<img src="2.png" alt="Chicago" style="width:25%;">
</div>
<div class="item">
<img src="3.png" alt="New york" style="width:25%;">
</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 don't know why when mobile.php load with AJAX the animation not working. Please anyone can give me some advise to solve this. Thanks.
You need to redirect the page if you found user using mobile like below. One more thing, You have not added Carousel jquery plugin in mobile.php
<script>
window.mobilecheck = function() {
var check = false;
if(window.innerWidth<768){
check=true;
}
return check;
}
if(window.mobilecheck()){
window.location.href = 'mobile.php';
}
</script>

Bootstrap : home page slider not working

I'm using BS 3.0, the problem is that I've added all the codes for scripts and slider itself but it does not rotate images. This is the order of the js files:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<Script src="http://alvarotrigo.com/fullPage/vendors/jquery.slimscroll.min.js"></script>
And a few more after this. To add images I have this code:
<div class="container-fluid">
<div class="row">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- 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">
<div class="item active">
<img src="images/slide1.jpg" alt="..." class="img-responsive">
<div class="carousel-caption lead visible-lg visible-md" >
<h1 class="text-danger">Welcome To<span class="white-bg">Site</span></h1>
</div>
</div>
<div class="item">
<img src="images/slider_2.png" alt="..." class="img-responsive">
<div class="carousel-caption visible-lg visible-md" >
<h1 class="text-danger">Welcome To<span class="white-bg">site</span></h1>
</div>
</div>
<div class="item">
<img src="images/slider_3.png" alt="..." class="img-responsive">
<div class="carousel-caption lead visible-lg visible-md" >
<h1 class="text-danger">Welcome To<span class="white-bg">site</span></h1>
</div>
</div>
</div>
</div> <!-- Carousel -->
</div>
</div>
You might have forgot to add the trigger and CSS file for the Bootstrap (It will not work without the CSS file, and will not give an error in the console either)
$('.carousel').carousel({
interval: 3000
})
Here is a working fiddle, i added the CSS library and the jQuery code to trigger the slider: http://jsfiddle.net/43j8ebh6/1/

Can't edit Bootstrap Carousel js

I'm trying to edit the interval for the slider with a .carousel script within the html but it doesn't seem to be working. I am also trying to edit the carousel to achieve something like this:
but I can't seem to find what to edit and what to edit it with.
Here's code
<div class="text-center container-final">
<div id="myCarousel" class="carousel slide" data-ride="carousel" style="border-radius:25px !important; overflow:hidden !important; background-color:#2a2a2a !important;">
<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" style="overflow:hidden; background-color:#2a2a2a;">
<div class="item active" style="border:3px solid #d9534f; border-radius:25px; overflow:hidden; background-color:#2a2a2a;">
<img src="images/img001.jpg" alt="Img1" class="img-responsive">
<div class="carousel-caption">
<a class="btn btn-game1">Game1</a>
</div>
</div>
<div class="item" style="border:3px solid #5cb85c; border-radius:25px; overflow:hidden; background-color:#2a2a2a;">
<img src="images/img002.jpg" alt="Img2" class="img-responsive">
<div class="carousel-caption">
<a class="btn btn-game2">Game2</a>
</div>
</div>
<div class="item" style="border:3px solid #f0ad4e; border-radius:25px; overflow:hidden; background-color:#2a2a2a;">
<img src="images/img003.jpg" alt="Img3" class="img-responsive">
<div class="carousel-caption">
<a class="btn btn-game3">Game3</a>
</div>
</div>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev" style=" overflow:hidden;">
<span class="icon-prev">‹</span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next" style=" overflow:hidden;">
<span class="icon-next">›</span>
</a>
</div>
</div>
$('#myCarousel').carousel({
interval: 9000
});
There are two ways to set interval for slider, one is
Data Attributes method: (Mention data-interval at your carousel slide div)
<div class="text-center container-final">
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="9000">
--
--
</div>
</div>
Oher method is with javascript:
Add following script at end of your HTML file:
<script>
$('#myCarousel').carousel({
interval: 9000
})
</script>

bootstrap 3.1.1 carousel controls don't work

I'm building a website using Bootstrap but I can't make the carousel work at all, the left and right nor the indicator will change the slide.
<div id="slideshow" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#slide0" data-slide-to="0" class="active"></li>
<li data-target="#slide1" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" role="listbox">
<!-- 1st slide -->
<div class="item active" id="slide0">
<div id="mainFeature">
<div class="col-lg-6 col-lg-offset-1 col-md-6" >
<img class="screenshot">
</div>
<div class="col-lg-4 alta">
<h2>heading</h2>
<p class="lefted">some text</p>
<p class="lefted">other text</p>
</div>
</div>
</div>
<!-- second slide -->
<div class="item" id="slide1">
<div id="mainFeature">
<div class="col-lg-6 col-lg-offset-1 col-md-6" >
<img class="screenshot">
</div>
<div class="col-lg-4 alta">
<h2>heading</h2>
<p class="lefted">some text</p>
<p class="lefted">other text</p>
</div>
</div>
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#slideshow" data-slide="prev">‹</a>
<a class="carousel-control right" href="#slideshow" data-slide="next">›</a>
</div>
this is the html markup, the carousel is displayed corretly and the slideshow work automatically but I can't go to the next/prev slide.
I tried to include this script:
$('.carousel').carousel({
interval: 3000
})
$('.carousel-control.left').click(function() {
$('#slide').carousel('prev');
});
$('.carousel-control.right').click(function() {
$('#slide').carousel('next');
});
still no luck, and yes bootstrap.js is linked to the html.
Any advice?
<ol class="carousel-indicators">
<li data-target="#slide0" data-slide-to="0" class="active"></li>
<li data-target="#slide1" data-slide-to="1"></li>
</ol>
The indicators are not working cause the data-target is the id of carousel not slide.
data-target="#slideshow"
Your controls are outside the div#slideshow, remove the </div> just before the controls html code
You have a tag '</div>' unusefull just before 'Carousel Nav' comment :
Bootply : http://www.bootply.com/zqAmnp3ekY
Code :
<div id="slideshow" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#slide0" data-slide-to="0" class="active"></li>
<li data-target="#slide1" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" role="listbox">
<!-- 1st slide -->
<div class="item active" id="slide0">
<div id="mainFeature">
<div class="col-lg-6 col-lg-offset-1 col-md-6">
<img class="screenshot">
</div>
<div class="col-lg-4 alta">
<h2>heading</h2>
<p class="lefted">some text</p>
<p class="lefted">other text</p>
</div>
</div>
</div>
<!-- second slide -->
<div class="item" id="slide1">
<div id="mainFeature">
<div class="col-lg-6 col-lg-offset-1 col-md-6">
<img class="screenshot">
</div>
<div class="col-lg-4 alta">
<h2>heading</h2>
<p class="lefted">some text</p>
<p class="lefted">other text</p>
</div>
</div>
</div>
</div>
<!-- </div> COMMENT THIS LINE-->
<!-- Carousel nav -->
<a class="carousel-control left" href="#slideshow" data-slide="prev">‹</a>
<a class="carousel-control right" href="#slideshow" data-slide="next">›</a>
</div>

how to navigate two carousel by single navigator at same time

There I have used 2 carousel 1st is slide to text and second is navigate image inside mobile frame but both are not sliding same time if it will navigate by navigator then mov
live on http://ashish.net63.net I have used bootstrap carousel here if you have any other carousel for this type of alider please help me thanks in advance
$(function(){
$('.carousel-sync').on('slid.bs.carousel', function(ev) {
$('.carousel-sync').removeClass('sliding');
});
$('.carousel-indicators li').on('click', function() {
$('#myCarousel1,#myCarousel2').carousel(parseInt(this.getAttribute('data-slide-to')));
});
});
<div class="col-md-6 col-sm-12 col-xs-12">
<div id="myCarousel1" class="carousel slide carousel-sync" data-ride="carousel" data-pause="false">
<ol class="carousel-indicators">
<li data-slide-to="0" class="active"></li>
<li data-slide-to="1"></li>
<li data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div class="carousel-caption">
<h1>Example headline.</h1>
<p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
</div>
</div>
<a class="carousel-arrow carousel-arrow-prev" href="[id*=myCarousel]" data-slide="prev">
</a>
<a class="carousel-arrow carousel-arrow-next" href="[id*=myCarousel]" data-slide="next">
</a>
</div><!-- /.carousel -->
2nd carousel from here
<div class="col-md-6 col-sm-12 col-xs-12">
<div class="mo-holder img-responsive">
<div id="myCarousel2" class="carousel slide carousel-sync" data-ride="carousel" data-pause="false">
<div class="carousel-inner">
<div class="item active">
<img src="images/1screen.jpg" class="img-responsive" alt="...">
</div>
</div>
</div>
</div>
You can use something like:
$( document ).ready(function() {
$('#carousel1').carousel({
interval: 10000
});
$('#carousel2').carousel({
interval: 10000
});
});
This way both carousels will start up with an interval of 10 seconds inbetween slides.

Categories

Resources