I have tried doing carousel in bootstrap but it does not load on Firefox or Google chrome in Windows 8.This is the code I wrote,so can someone please explain to me what i did wrong.
<html>
<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>
<div class="carousel-inner">
<div class="item">
<img src="img/Capture.PNG" />
<div class="item">
<img src="img/img1.PNG" />
<div class="item">
<img src="img/img3.PNG" />
</div>
<a class="left carousel-control" href="#mycarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#mycarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</body>
</html>
You should include carousel.js in bootstrap3 and close your div item
Please include carousel.js in your html document
Refer to download carousel.js:
http://getbootstrap.com/javascript/#carousel
Close your div "item" tag, then set the first "item" to "active"
<div class="carousel-inner">
<div class="active item">
<img src="Capture.PNG" />
</div>
<div class="item">
<img src="img1.PNG" />
</div>
<div class="item">
<img src="img3.PNG" />
</div>
</div>
Then the most important thing, is don't forget to load "bootstrap.css"
=> http://getbootstrap.com/2.3.2/assets/css/bootstrap.css.
Because bootsrap used that css file.
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>
I have this for the html
<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="http://placehold.it/1200x315" alt="...">
<div class="carousel-caption">
<h3>Caption Text</h3>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x315" alt="...">
<div class="carousel-caption">
<h3>Caption Text</h3>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x315" alt="...">
<div class="carousel-caption">
<h3>Caption Text</h3>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div> <!-- Carousel -->
I've added the hosted jquery and local bootstrap.js as below to the head of the html file
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
After the carousel didnt work, I moved the jquery reference to the bottom of the html page to see if it would load since html loads from top to bottom but still no luck. Any ideas on how I can get this to work?I'm new to JQuery so please kindly be descriptive.
Try this:
<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.5/js/bootstrap.min.js"></script>
Check if jquery
if (typeof jQuery != 'undefined') {
alert("jQuery library is loaded!");
}else{
alert("jQuery library is not found!");
}
and also check in chrome hit f12 for developer mode and check under sources if jquery and boostrap are properly loaded. Check console tab if some errors occurred
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.
here is the code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div>
<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>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="Images/Design/facebook.png" alt="..."/>
<div class="carousel-caption">
<h3>...</h3>
<p>...</p>
</div>
</div>
<div class="item ">
<img src="Images/Design/linkedin.png" alt="..."/>
<div class="carousel-caption">
<h3>...</h3>
<p>...</p>
</div>
</div>
<div class="item ">
<img src="Images/Design/yahoo.jpg" alt="..."/>
<div class="carousel-caption">
<h3>...</h3>
<p>...</p>
</div>
</div>
<div class="item ">
<img src="Images/Design/Mahdi_Hesari#YMail.com.jpg" alt="..."/>
<div class="carousel-caption">
<h3>...</h3>
<p>...</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
<script src="js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery.js"></script>
</body>
</html>
i think every thing is ok and it have to work. but it's not working even when i click on next and prev buttons.
where is the problem?
i'm using bootsrap version v 3.0.3 in visual studio 2012.
thank you very much
You have to include first jQuery library, then bootstrap.js:
<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
Likely, you are currently getting this error: Uncaught ReferenceError: jQuery is not defined
You need to reverse the order in wihch you include the jquery/boostrap js files. Bootstrap has jquery as a prerequisite, so it needs to find it there by the time it's loaded.
Just looking for some examples on how to implement Apps Script htmlservice form processing examples jquery. Google docs are not sufficient for me (https://developers.google.com/apps-script/guides/html-service).
In the link bellow you will find an example of using JQuery and Carousel in Html Service.
https://script.google.com/d/1Qk3-RG9ilqeOsDgQIC5xcMXNs8Y5hhoViNptCry5GRhlFGu14JaPmzWy/edit?usp=sharing
Any troubles just let me know.
-- Raw code:
-- THe page
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-carousel.js"></script>
<div id="carousel-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">
<div class="item active">
<img src="https://si0.twimg.com/profile_images/2042490978/SRC_HiRes_RGB_Twitter.jpg" alt="Teste">
<div class="carousel-caption">
Abc
</div>
</div>
<div class="item ">
<img src="https://www.src.org/web/img/src-logo-print.png" alt="Teste 2">
<div class="carousel-caption">
Abc 2
</div>
</div>
<div class="item ">
<img src="https://si0.twimg.com/profile_images/2042490978/SRC_HiRes_RGB_Twitter.jpg" alt="Teste 3">
<div class="carousel-caption">
Abc 3
</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>
<script>
$('.carousel').carousel();
</script>
-- The Apps Script
function doGet() {
return HtmlService.createTemplateFromFile("pag.html").evaluate().setSandboxMode(HtmlService.SandboxMode.NATIVE);
}