How to show individual elements for the javascript loop function?

How to show individual elements for the javascript loop function? - javascript

I'm trying to show data from a JSON file unto a webpage using a boostrap slider. I have used the following javascript code:
$(function functionName() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var response = JSON.parse(xhttp.responseText);
var restaurant = response.restaurant;
var output = "";
for (var i = 0; i < restaurant.length; i++) {
output += "<div class='row'><div class='col-sm-12'>" + "<img class='d-block' width='100%' src=" + restaurant[i].image + "></div>" + "<div id='addd' class='col-sm-12'>" + restaurant[i].name + "</div>";
}
$(".carousel-item").html(output);
});
#txt {
float: right;
top: 0;
position: absolute;
}
body {
background-color: black;
}
.carousel-indicators {
position: relative;
top: 500
}
.carousel-control-next,
.carousel-control-prev {
position: fixed;
width: 50px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<body>
<div class="container">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<!-- 'active' element is needed for this plugin -->
<div class="carousel-item active">
<div class="row">
<div class="col-sm-6">
<img class="d-block" width="100%" alt="img">
</div>
<div id="txt" class="col-sm-6">txt</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-sm-6">
<img class="d-block" width="100%" alt="img">
</div>
<div id="txt" class="col-sm-6">txt</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.js"></script>
The data was successfully loaded on the page but it loaded all of the data once. The slide showed all of the information stacked on top the other while repeating the process every when a new slide is activated. I only want to show one object per slide. How can I parse the loop per object without stopping it entirely?

$(function functionName() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var response = JSON.parse(xhttp.responseText);
var restaurant = response.restaurant;
var output = "";
for (var i = 0; i < restaurant.length; i++) {
output += "<div class='row'><div class='col-sm-12'>" + "<img class='d-block' width='100%' src=" + restaurant[i].image + "></div>" + "<div id='addd' class='col-sm-12'>" + restaurant[i].name + "</div>";
}
$(".carousel-item").html(output);
});
#txt {
float: right;
top: 0;
position: absolute;
}
body {
background-color: black;
}
.carousel-indicators {
position: relative;
top: 500
}
.carousel-control-next,
.carousel-control-prev {
position: fixed;
width: 50px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<body>
<div class="container">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<!-- 'active' element is needed for this plugin -->
<div class="carousel-item active">
<div class="row">
<div class="col-sm-6">
<img class="d-block" width="100%" alt="img">
</div>
<div id="txt" class="col-sm-6">txt</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-sm-6">
<img class="d-block" width="100%" alt="img">
</div>
<div id="txt" class="col-sm-6">txt</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.js"></script>

Related

Is there any way to stop auto-playing of bootstrap carousel slide?

I'm making a carousel slide with Bootstrap carousel. I want to stop auto-playing of slides and I would like to make a button, which controls to toggle the auto-playing on/off.
I've searched about it already and it recommended me to add an attribute data-interval=false for the carousel div or to add a script: $('.carousel').carousel({ interval: false, }).
It stops auto-playing when the above values are set as default value but when I want to toggle the auto-playing on/off, it doesn't work and keeps auto-playing.
Here's the script I have so far:
var total = $('.carousel-item').length;
var currentIndex = $('div.active').index() + 1;
$('.current_slide').html(currentIndex + ' / ' + total);
$('.carousel').on('slid.bs.carousel', function() {
currentIndex = $('div.active').index() + 1;
var text = currentIndex + ' / ' + total;
$('.current_slide').html(text);
});
function navAutoplay() {
if ($('.if_paused').hasClass('carousel_now')) {
$('*.carousel_now').removeClass('carousel_now');
$('.if_started').addClass('carousel_now');
}
else {
$('*.carousel_now').removeClass('carousel_now');
$('.if_paused').addClass('carousel_now');
}
}
$(document).ready(function() {
if ($('.if_started').hasClass('carousel_now')) {
$('.carousel').carousel({
interval: 7000
});
}
else {
$('.carousel').carousel({
interval: false
});
}
})
The html code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="carouselExampleFade" data-interval="7000" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg" class="d-block w-100" alt="...">
</div>
</div>
<div class="carousel_nav">
<div class="current_slide">
</div>
<a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<div class="corousel_nav_autoplay">
<a class="if_paused">
<span onclick="navAutoplay()"></span>
</a>
<a class="if_started carousel_now">
<span onclick="navAutoplay()"></span>
</a>
</div>
<a class="carousel-control-next" href="#carouselExampleFade" 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 id="carouselExampleFade" data-interval="7000" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/slide01_01.png" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/slide02_01.png" class="d-block w-100" alt="...">
</div>
</div>
<div class="carousel_nav">
<div class="current_slide">
</div>
<a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<div class="corousel_nav_autoplay">
<a class="if_paused">
<span onclick="navAutoplay()"></span>
</a>
<a class="if_started carousel_now">
<span onclick="navAutoplay()"></span>
</a>
</div>
<a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<script>
var total = $('.carousel-item').length;
var currentIndex = $('div.active').index() + 1;
$('.current_slide').html(currentIndex + ' / ' + total);
$('.carousel').on('slid.bs.carousel', function() {
currentIndex = $('div.active').index() + 1;
var text = currentIndex + ' / ' + total;
$('.current_slide').html(text);
});
</script>
<script>
function navAutoplay() {
if ($('.if_paused').hasClass('carousel_now')) {
$('*.carousel_now').removeClass('carousel_now');
$('.if_started').addClass('carousel_now');
}
else {
$('*.carousel_now').removeClass('carousel_now');
$('.if_paused').addClass('carousel_now');
}
}
$(document).ready(function() {
if ($('.if_started').hasClass('carousel_now')) {
$('.carousel').carousel({
interval: 7000
});
}
else {
$('.carousel').carousel({
interval: false
});
}
})
</script>

Hi according to docs you should be able to toggle carusel using those methods:
.carousel('cycle')
// to enable cycling
.carousel('pause')
// to stop cycling thru items
I think if you call .carusel() with options object it initilizes it again and may not work as you expect

You just have to read the docs from bootstrap, it's documented there.
Here's an example on how you would implement it.
function navAutoplay() {
const isAutoPlayEnabled = $('#toggle-auto-play').text() === 'Pause';
if (isAutoPlayEnabled) {
// Pause carousel if autoplay is enabled
$('#carouselExampleIndicators').carousel('pause');
$('#toggle-auto-play').text('Auto Play');
} else {
// Enable Auto Play if it's paused
$('#carouselExampleIndicators').carousel({
interval: 500, // Your choice of interval
});
$('#toggle-auto-play').text('Pause');
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"
></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"
></script>
</head>
<body>
<div
id="carouselExampleIndicators"
class="carousel slide"
data-ride="carousel"
>
<ol class="carousel-indicators">
<li
data-target="#carouselExampleIndicators"
data-slide-to="0"
class="active"
></li>
<li
data-target="#carouselExampleIndicators"
data-slide-to="1"
class=""
></li>
<li
data-target="#carouselExampleIndicators"
data-slide-to="2"
class=""
></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img
class="d-block w-100"
data-src="holder.js/800x400?auto=yes&bg=777&fg=555&text=First slide"
alt="First slide [800x400]"
src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_178a69a8120%20text%20%7B%20fill%3A%23555%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_178a69a8120%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.9140625%22%20y%3D%22218.3%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
data-holder-rendered="true"
/>
</div>
<div class="carousel-item">
<img
class="d-block w-100"
data-src="holder.js/800x400?auto=yes&bg=666&fg=444&text=Second slide"
alt="Second slide [800x400]"
src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_178a69a8120%20text%20%7B%20fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_178a69a8120%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23666%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22247.3125%22%20y%3D%22218.3%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
data-holder-rendered="true"
/>
</div>
<div class="carousel-item">
<img
class="d-block w-100"
data-src="holder.js/800x400?auto=yes&bg=555&fg=333&text=Third slide"
alt="Third slide [800x400]"
src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_178a69a8120%20text%20%7B%20fill%3A%23333%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_178a69a8120%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23555%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22276.9921875%22%20y%3D%22218.3%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
data-holder-rendered="true"
/>
</div>
</div>
<a
class="carousel-control-prev"
href="#carouselExampleIndicators"
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="#carouselExampleIndicators"
role="button"
data-slide="next"
>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- Toggle button -->
<div>
<button id="toggle-auto-play" class="btn btn-primary" onclick="navAutoplay()">Pause</button>
</div>
</body>
</html>

I've already tried .carousel('pause'); and .carousel('cycle'); to toggle the auto-playing, and it didn't work.
function navAutoplay() {
if ($('.if_paused').hasClass('carousel_now')) {
$('*.carousel_now').removeClass('carousel_now');
$('.if_started').addClass('carousel_now');
$('.carousel').carousel('cycle');
}
else {
$('*.carousel_now').removeClass('carousel_now');
$('.if_paused').addClass('carousel_now');
$('.carousel').carousel('pause');
}
}

Carousel bootstrap loads, but doesn't slide and controls unresponsive

I have been currently working on a weather app, and I have 2 versions(sort of) One that works with cards, and my most recent attempt, to work as carousel's. Right now I am just trying to get the carousel to work in general. I have tried a few things, and I'm sure I am just overlooking something simple, like perhaps maybe a missing script tag to load it. I have 2 versions inside this one, the one I was trying for myself, and then the one straight from the bootstrap CDN, just to see if it worked. Turns out the one copied directly from there doesn't work, this is what also leads me to believe I am missing something in script. Everything below with the ajax methods is part of my first version, as I am not using it in this instance. I've also tried commenting it out just because, and no luck. Here's what I've got:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
Title
</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<style>
.card:hover
{
-webkit-box-shadow: -1px 9px 40px -12px rgba(0,0,0,0.75);
-moz-box-shadow: -1px 9px 40px -12px rgba(0,0,0,0.75);
box-shadow: -1px 9px 40px -12px rgba(0,0,0,0.75);
}
.cardHolder
{
padding-left: 15px!important;
padding-right: 15px!important;
/*text-align: center;*/
}
.card {
/*display: inline-block;*/
}
#rowDiv
{
margin: auto;
text-align: center;
width: 60%;
}
#submitWeather
{
height: 40px;
font-size: 15px;
font-weight: bold;
}
/*#h3Center*/
/*{*/
/*text-align: center!important;*/
/*}*/
</style>
</head>
<body>
<div class="jumbotron" style="margin-bottom:0; color: white; background-color: burlywood">
<h2 class="text-center" style="font-size:50px; font-weight:600">
Get Current Weather
</h2>
</div>
<div class="container">
<div class="row d-flex justify-content-center">
<h3 class="text-xl-right text-primary" id="h3Center">
Enter city name
</h3>
<span id="error"></span>
</div>
<div class="row form-group form-inline justify-content-center" id="rowDiv">
<input type="text" name="city" id="city" class="form-control" placeholder="City Name">
<button id="submitWeather" class="btn btn-primary">
Search City
</button>
</div>
</div>
<!--<div id="mainCarousel" class="carousel slide" data-ride="carousel">-->
<!--<ol class="carousel-indicators">-->
<!--<li data-target="mainCarousel" data-slide-to="0" class="active"></li>-->
<!--<li data-target="mainCarousel" data-slide-to="1"></li>-->
<!--<li data-target="mainCarousel" data-slide-to="2"></li>-->
<!--</ol>-->
<!--<div class="carousel-inner">-->
<!--<div class="carousel-item active" id="carousel0">-->
<!--<img class="d-block w-100" src="https://puu.sh/Ci82C/2637fb03aa.png">-->
<!--</div>-->
<!--<div class="carousel-item" id="carousel1">-->
<!--<img class="d-block w-100" src="https://puu.sh/Ci994/032784aba7.png">-->
<!--</div>-->
<!--<div class="carousel-item" id="carousel2">-->
<!--<img class="d-block w-100" src="https://puu.sh/Ci994/032784aba7.png">-->
<!--</div>-->
<!--</div>-->
<!--<a class="carousel-control-prev" href="#mainCarousel" 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="#mainCarousel" role="button" data-slide="next">-->
<!--<span class="carousel-control-next-icon" aria-hidden="true"></span>-->
<!--<span class="sr-only">Next</span>-->
<!--</a>-->
<!--</div>-->
<!---->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://puu.sh/Ci994/032784aba7.png" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://puu.sh/Ci82C/2637fb03aa.png" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://puu.sh/Ci82C/2637fb03aa.png" alt="Third slide">
</div>
</div>
<a class="left carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!--<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>-->
<!--<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$('.carousel').carousel();
$(document).ready(function()
{
$('.cardHolder1').toggle();
$('.cardHolder').toggle();
$('#submitWeather').click(function()
{
var city = $("#city").val();
if (city !== '')
{
$.ajax({
url: "http://api.openweathermap.org/data/2.5/forecast?q="
+ city
+ "&units=imperial"
+ "&APPID=3c5c80a5cc759dc7c25ab64c0c9ebadd",
type: "GET",
datatype: "jsonp"
}).done(function(data)
{
console.log(data);
console.log(data.list[0].main.temp);
$('.cardHolder').slideToggle();
$('.cityName').html(city);
$('.tempDiv').html('<h6>Current Temp - ' + data.list[0].main.temp + ' Degrees</h6>');
$('.humDiv').html('<h6>Sky Description - ' + data.list[0].weather[0].description + '</h6>');
$('.lowTemp').html('<h6>Lowest Temp - ' + data.list[0].main.temp_min + '</h6>');
$('.cloudDiv').html(data.list[0].dt_txt);
$('.lowTemp1').html('<h6>Lowest Temp - ' + data.list[8].main.temp_min + '</h6>');
$('.tempDiv1').html('<h6>Current Temp - ' + data.list[8].main.temp + ' Degrees</h6>');
$('.humDiv1').html('<h6>Sky Description - ' + data.list[8].weather[0].description + '</h6>');
$('.cloudDiv1').html(data.list[8].dt_txt);
$('.lowTemp2').html('<h6>Lowest Temp - ' + data.list[16].main.temp_min + '</h6>');
$('.tempDiv2').html('<h6>Current Temp - ' + data.list[16].main.temp + ' Degrees</h6>');
$('.humDiv2').html('<h6>Sky Description - ' + data.list[16].weather[0].description + '</h6>');
$('.cloudDiv2').html(data.list[16].dt_txt);
$('#city').val('');
})
} else
{
$('#error').html('Field can not be empty');
}
})
})
</script>
</body>
</html>

Random images are coming in carousel

I have created a slider, it works fine but when I slide to next contents it shows the random images in the slider. I want to show these images as I have added them into the code. I don't want randomly sliding images.
Javascript
$('#myCarousel').carousel({
interval: 000,
})
$('.carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i=0;i<2;i++) {
next=next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
HTML
<div class="carousel slide" id="myCarousel3" data-ride="carousel" data-interval="000" data-pause="hover">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-3"><img src="computers/img/dell.jpeg" alt=" " class="img-responsive thumb" />
</div>
</div>
<div class="item">
<div class="col-xs-3"><img src="computers/img/acer.jpg" alt=" " class="img-responsive thumb" />
</div>
</div>
<div class="item">
<div class="col-xs-3"><img src="computers/img/asus.jpg" alt=" " class="img-responsive thumb" />
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel3" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel3" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>

in your for loop just change
for (var i=0;i<1;i++) {
i < 2 to i < 1; I hope this is what you want, As i tried this and get the result are in sequence.
please check
https://codepen.io/atulraj89/pen/zjRwxR
And if you want result to be something else,pls explain.

So I found an example on Bootstrap with Jquery and bootstrap.
HTML:
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<!-- Slide One - Set the background image for this slide in the line below -->
<div class="carousel-item active" style="background-image: url('computers/img/dell.jpeg')">
<div class="carousel-caption d-none d-md-block">
<h3>First Slide</h3>
<p>This is a computer from Dell</p>
</div>
</div>
<!-- Slide Two - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('computers/img/acer.jpg')">
<div class="carousel-caption d-none d-md-block">
<h3>Second Slide</h3>
<p>This is a computer from Acer</p>
</div>
</div>
<!-- Slide Three - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('computers/img/asus.jpg')">
<div class="carousel-caption d-none d-md-block">
<h3>Third Slide</h3>
<p>This is a computer from Asus</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
CSS:
.carousel-item {
height: 65vh;
min-height: 300px;
background: no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
In your HTML you need to add the CSS, Jquery and bootstrap js.
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="vendor/jquery/jquery.min.js"></script>
<link href="css/your_css.css" rel="stylesheet">
Source: https://startbootstrap.com/template-overviews/half-slider/

how to disable left and right arrow in slide using bootstrap

I need to create a slide when the image is first the left arrow should be hide and when the last image is active right arrow should be hide. I had added my code here. Is there any other alternative method to replace or any new method. Is there any option to modify the code, Can anyone point me in the right direction?
$("[id^=viewDocs]").on("click", function () {
var docId = $(this).attr("id");
var docIndex = docId.substr(docId.length - 1);
var activeItemId = $(this).data("value");
$("div>div.item").removeClass("active");
$("#"+activeItemId).addClass("active");
var appName = $('#SavepatientResultsDetails_appName').val();
var paramValue = $(this).data("id");
$("#myModal").removeClass("hidden");
$('#downloadDocId').attr('href',appName+'/apps/PatientDetailsDoctor/ViewPatientTestResults/downloadUploadDocs?testResultsDocsId='+paramValue);
var modal = document.getElementById("myModal");
modal.style.display = "block";
});
$('#myCarousel').on('slide.bs.carousel', function (ev) {
var itemId = ev.relatedTarget.id;
var paramValue = $('#'+itemId).data('value');
var appName = $('#SavepatientResultsDetails_appName').val();
$('#downloadDocId').attr('href',appName+'/apps/PatientDetailsDoctor/ViewPatientTestResults/downloadUploadDocs?testResultsDocsId='+paramValue);
});
.carousel-inner > .item > img,
.carousel-inner > .item > div,
.carousel-inner > .item > a > img {
width: 100%;
margin: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="downloadDocId" href="/doctorclinic/apps/PatientDetailsDoctor/ViewPatientTestResults/downloadUploadDocs?testResultsDocsId=100250">
<span class="download-file" onclick="document.getElementById('myModal').style.display='none'"><i class="glyphicon glyphicon-download-alt"></i></span>
</a>
<a id="downloadDocId" href="#">
<span class="close-popup" onclick="document.getElementById('myModal').style.display='none'">×</span>
</a>
<div class="modal-content1" id="img01">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li id="indicator1" data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li id="indicator2" data-target="#myCarousel" data-slide-to="1" class=""></li>
<li id="insesrtIndicator" class="hidden"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div id="insertCarouselItem" class="hidden"></div>
<div class="item active" data-value="100250" id="docPdf1">
<div id="pdfDoc1">
<canvas height="841" width="595" style="display: block;"></canvas>
</div>
</div>
<div class="item" data-value="100301" id="docImage2"></div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev" style="display: none;">
<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>
</div>

You can use these JavaScript codes.
First:
$('.left').hide();
$('#carousel-example-generic').on('slid.bs.carousel', function (ev) {
var carouselData = $(this).data('bs.carousel');
var currentIndex = carouselData.getActiveIndex();
if (currentIndex >= 1) {
$('.left').show();
}
else {
$('.left').hide();
}
if (currentIndex === (carouselData.$items.length-1)) {
$('.right').hide();
$('.left').show();
}
else {
$('.right').show();
}
})
Second
$('.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));
}
});
$('#myCarousel').on('slid', '', checkitem);
$(document).ready(function(){
checkitem();
});
function checkitem()
{
var $this = $('#myCarousel');
if($('.carousel-inner .item:first').hasClass('active')) {
$this.children('.left.carousel-control').hide();
} else if($('.carousel-inner .item:last').hasClass('active')) {
$this.children('.right.carousel-control').hide();
} else {
$this.children('.carousel-control').show();
}
}
Here I used the second JavaScript example and made what you want:
$('.left').hide();
$('#carousel-example-generic').on('slid.bs.carousel', function (ev) {
var carouselData = $(this).data('bs.carousel');
var currentIndex = carouselData.getActiveIndex();
if (currentIndex >= 1) {
$('.left').show();
}
else {
$('.left').hide();
}
if (currentIndex === (carouselData.$items.length-1)) {
$('.right').hide();
$('.left').show();
}
else {
$('.right').show();
}
})
<head>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<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="//placehold.it/1024x600" class="img-responsive">
<div class="carousel-caption">
one
</div>
</div>
<div class="item">
<img src="//placehold.it/1024x600/999" class="img-responsive">
<div class="carousel-caption">
two
</div>
</div>
<div class="item">
<img src="//placehold.it/1024x600/bbb" class="img-responsive">
<div class="carousel-caption">
three
</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>
</div>
</div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
Hope it'll helps you. Good luck! :)

Align Bootstrap Carousel Image

I'm using a Bootstrap carousel to display images and their respective captions. The image can be portrait, landscape.
I'm able to correctly display landscape images in the carousel with their caption below. In case of Portrait images I'm trying to align the centre image to the right so that it does not overlap with the caption. I changed the CSS property in file bootstrap.min.css but it's not working.
CSS code...
.carousel-inner {
position: relative;
align: right;
width: 100%;
overflow: hidden;
Any idea how to align Portrait image to the right without affecting the other 2 images?
The obj parameter is contains the image src, caption details. The values are being returned by an ajax function being called to the back-end service.
HTML Code..
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<div id="carouselObject">
<div id="carousel-example-generic" class="carousel slide" data-pause="true" data-interval="5000000"> <!--data-interval= 5000 seconds-->
<div class="carousel-inner" role="listbox" id="carouselinner">
</div>
<a class="left carousel-control" href="#/carousel-example-generic" role="button"> <!--data-slide="prev"-->
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true" onclick="loadPrevSlide()" id="leftcarouselbutton"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#/carousel-example-generic" role="button"> <!--data-slide="next"-->
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true" onclick="loadNextSlide()" id="rightcarouselbutton"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>

i have created code pen for similar carousel slider. have a look at once it may helpful for you.
<head> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="carosel-example">
<div id="carousel-example-captions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-captions" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-captions" data-slide-to="1" class=""></li>
<li data-target="#carousel-example-captions" data-slide-to="2" class=""></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img alt="900x500" src="https://cdn.photographylife.com/wp-content/uploads/2014/06/Nikon-D810-Image-Sample-6.jpg">
<div class="carousel-caption">
<h3>First slide </h3>
<p> ContentContentContentContentContentContent</p>
</div>
</div>
<div class="item">
<img alt="900x500" src="https://cdn.photographylife.com/wp-content/uploads/2014/06/Nikon-D810-Image-Sample-6.jpg">
<div class="carousel-caption">
<h3>Second slide</h3>
<p>Content</p>
</div>
</div>
<div class="item">
<img src="http://a.static.trunity.net/files/299501_299600/299598/vertical-farming-chris-jacobs.jpg">
<div class="carousel-caption">
<h3>Third slide</h3>
<p>Content</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-example-captions" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-captions" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
///// CSS code goes here
.carousel-caption {
color: #000;
}.carosel-example, .new-caption-area {
width: 600px;
margin: auto;
color: #000;
}
////////////// JS CODE
jQuery(function ($) {
$('.carousel').carousel();
var caption = $('div.item:nth-child(1) .carousel-caption');
$('.new-caption-area').html(caption.html());
caption.css('display', 'none');
$(".carousel").on('slide.bs.carousel', function (evt) {
var caption = $('div.item:nth-child(' + ($(evt.relatedTarget).index() + 1) + ') .carousel-caption');
$('.new-caption-area').html(caption.html());
caption.css('display', 'none');
});
});
http://codepen.io/srinivasr/pen/EPdxKG

Develop Reference

JavaScript is the programming language of the Web.

How to show individual elements for the javascript loop function? - javascript

Related

Is there any way to stop auto-playing of bootstrap carousel slide?

Carousel bootstrap loads, but doesn't slide and controls unresponsive

Random images are coming in carousel

how to disable left and right arrow in slide using bootstrap

Align Bootstrap Carousel Image

Categories

Resources