I m designing mobile view web-app.
I want to display images in Carousel. when I directly write code (I m getting the code here: https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_carousel&stacked=h) then it works fine. but when I m append the MySQL code its display in-line format like this:
this is my carousel code:-
<div class="row">
<div class="col s12">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" id="marquee">
</div>
</div>
</div>
</div>
and this is javascript code:-
$(document).ready(function()
{
var url="http://api.dentallabworld.com/marquee.php"; //This file returns json data
$.getJSON(url,function(result){
console.log(result);
$.each(result, function(i, field){
var id=field.Id;
var marquee=field.Image;
$("#marquee").append('<div class="item active"><img src="http://www.dentallabworld.com/dental/images/featured_brand/'+marquee+'" alt="Los Angeles" style="width:100%;"></div>');
});
});
});
I want to display proper carousel code
Because your loop add class="item active" each element and show all of them. You can add class="item" except first.
This might works:
$.each(result, function(i, field){
var id=field.Id;
var marquee=field.Image;
if(i==0){
$("#marquee").append('<div class="item active"><img src="http://www.dentallabworld.com/dental/images/featured_brand/'+marquee+'" alt="Los Angeles" style="width:100%;"></div>');
} else {
$("#marquee").append('<div class="item"><img src="http://www.dentallabworld.com/dental/images/featured_brand/'+marquee+'" alt="Los Angeles" style="width:100%;"></div>');
}
});
Related
What I want to do:
I have a bootstrap carousel and 5 divs. When I hover on the first div I want to show the first carousel-item...etc
What I did:
I deactivated the auto play with data-interval="false"
When hovering those controlling items, the following function is called:
function changeImage(index) {
$("#carousel").carousel(index); // index is the active carousel-item's index
}
What happened:
Before hovering on any controlling item, the carousel doesn't auto play.
After hovering on any controlling item, the carousel displays the expected carousel-item, however the carousel starts auto-playing.
What I tried:
Using Jquery I set the interval to false after each time I navigate in the carousel:
function changeImage(index) {
$("#carousel").carousel(index);
$('#carousel').carousel({
interval: false
})
}
But it didn't work.
Full code:
<div id="carousel" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div class="carousel-item">
<img src="..."/>
</div>
<div class="carousel-item active">
<img src="..."/>
</div>
<div class="carousel-item">
<img src="..."/>
</div>
<div class="carousel-item">
<img src="..."/>
</div>
</div>
</div>
<div id="controls">
<div onmouseover="changeImage(0)">1</div>
<div onmouseover="changeImage(1)">2</div>
<div onmouseover="changeImage(2)">3</div>
<div onmouseover="changeImage(3)">4</div>
<div onmouseover="changeImage(4)">5</div>
</div>
<script>
$('#carousel').on('slide.bs.carousel', function () {
$('#carousel').carousel({
interval: false
})
})
function changeImage(index) {
$("#carousel").carousel(index);
}
</script>
I am trying to achieve the following:
<div class="item">
<div class="container-fluid">
<div class="row">
<div class="col-md-3">IMG</div>
<div class="col-md-9">TEXT</div>
</div>
</div>
</div>
<div class="item">
<div class="container-fluid">
<div class="row">
<div class="col-md-3">IMG</div>
<div class="col-md-9">TEXT</div>
</div>
</div>
</div>
Here is what I have so far:
var ws_ftr = data.ws_ftr.records;
console.log(JSON.stringify(ws_ftr));
jQuery.each(ws_ftr, function(index, ftr) {
jQuery('.carousel-inner').append('<div class="item">');
jQuery('.item').append('<div class="container-fluid">');
jQuery('.container-fluid').append('<div class="row">');
jQuery('.row').append('<div class="col-md-3"><img src="img/features_sliding/'+ftr[3] +'" alt="feature-'+ftr[2]+'"/></div><div class="col-md-9"><h2>'+ftr[2]+'</h2>'+ftr[1]+'</div>');
Which gives me this, I stopped at the first major error because I believe the others will be corrected once I fix it...
<div class="item">
<div class="container-fluid">
<div class="row">
<div class="col-md-3">IMAGE</div>
<div class="col-md-9">TEXT</div>
**<div class="col-md-3">IMG</div>
<div class="col-md-9">TEXT</div>**
This should not be giving me the col-md-3 and col-md-9 for each loop, but instead should be giving me the entire item block.
I am fairly new to jQuery/javascript and am learning as I go. Can anyone explain to me what I have done wrong and the best way to correct? Thanks so much!
1.Instead of multiple .append() do every-thing in single .append()
2.Close all the div's that you started.
jQuery('.carousel-inner').append('<div class="item"><div class="container-fluid"><div class="row"><div class="col-md-3"><img src="img/features_sliding/'+ftr[3] +'" alt="feature-'+ftr[2]+'"/></div><div class="col-md-9"><h2>'+ftr[2]+'</h2>'+ftr[1]+'</div></div></div></div>');
Note- seems that non-closed divs are creating the issue.
Just noted that in your jQuery you never closed your any of your divs. So continuing with your code it can be completed like so:
var ws_ftr = data.ws_ftr.records;
console.log(JSON.stringify(ws_ftr));
$.each(ws_ftr, function(index, ftr) {
$('.carousel-inner').append('<div class="item">');
$('.item').append('<div class="container-fluid">');
$('.container-fluid').append('<div class="row">');
$('.row').append('<div class="col-md-3"><img src="img/features_sliding/'+ftr[3] +'" alt="feature-'+ftr[2]+'"/></div><div class="col-md-9"><h2>'+ftr[2]+'</h2>'+ftr[1]+'</div>');
$('.container-fluid').append('</div>');
$('.item').append('</div>');
$('.carousel-inner').append('</div>');
);
I believe this can also be completed this way:
var ws_ftr = data.ws_ftr.records;
console.log(JSON.stringify(ws_ftr));
$.each(ws_ftr, function(index, ftr) {
$('.carousel-inner').append('<div class="item"></div>');
$('.item').append('<div class="container-fluid"></div>');
$('.container-fluid').append('<div class="row"></div>');
$('.row').append('<div class="col-md-3"><img src="img/features_sliding/'+ftr[3] +'" alt="feature-'+ftr[2]+'"/></div><div class="col-md-9"><h2>'+ftr[2]+'</h2>'+ftr[1]+'</div>');
);
I am working on angular carousal to make images slides which are coming as an array.
But unfortunately its not working as an slider.
How to solve this problem ? Any solution ?
//HTML
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item {{::($index === 0 ? 'active' : '')}}" ng-repeat="img in vehicleImgArr"> <img src="{{img}}">
<div class="container">
<div class="carousel-caption"> </div>
</div>
</div>
</div>
</div>
<ol class="carousel-indicators">
<li data-target="#myCarousel" ng-repeat="img in vehicleImgArr" data-slide-to="{{img}}"></li>
</ol>
//JS
var app = angular.module('VehicleDetails', ['angularUtils.directives.dirPagination']);
app.controller('vehiclefulldetails',['$scope', '$http', function($scope, $http){
if($scope.vehicletrxdetails[0].document_name != null){
$scope.vehicleImg = $scope.vehicletrxdetails[0].document_name;
$scope.vehicleImgArr = $scope.vehicleImg.split(',');
}
}]);
Example: vehicletrxdetails[0].document_name = https://files.allaboutbirds.net/wp-content/uploads/2015/06/prow-featured.jpg, https://www.scientificamerican.com/sciam/cache/file/268F292B-5DDD-4DB1-B5ABC6541A70ECDF_source.jpg
Any help would be great.
Thanks in advance
Anyways I fixed it using,
$("ol.carousel-indicators").click(function(e){
e.preventDefault();
$(this).parent().carousel($(this).data("slide"));
});
Trying to replicate this simple jquery snippet I have from my old project into angular2. Basically selecting a carousel image index onclick="" or (click)="".
In jQuery its simple as the code below, however when I do the same in angular2 I get .carousel() is not a function. I've imported jQuery and bootstrap but the snippet below doesn't seems want to work.
// this works on plain jquery
selectImage = function() {
$('#myCarousel').carousel(2)
}
in my angular2 its pretty similar:--
import { carousel } from 'bootstrap';
import $ from "jquery";
declare var carousel: any;
// doesn't work shows the error below
selectImage() {
$('#myCarousel').carousel(2);
}
Trying to select image from this div
<button (click)="selectImage()"> Select image (2)</button>
<div class="carousel slide" id="myCarousel">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item" data-slide-number="0">
<img src="./assets/imgs/4d4853533136_01-lg.jpg"></div>
<div class="item" data-slide-number="1">
<img src="./assets/imgs/4d4853533136_03.jpg"></div>
<div class="item" data-slide-number="2">
<img src="./assets/imgs/4d4853533136_02.jpg"></div>
<div class="item" data-slide-number="3">
<img src="./assets/imgs/4d4853533136_04.jpg"></div>
</div>
</div>
Error message: ERROR TypeError: __WEBPACK_IMPORTED_MODULE_3_jquery___default(...)(...).carousel is not a function
Question is how can I do the same function as my jQuery snippet in angular2?
Bootstrap select specified image number Ref
You have to use [(activeSlide)]="activeSlideIndex" as below. Set "activeSlideIndex" in your click event Or any other event as per requirement
<carousel [interval]="myInterval" [noWrap]="noWrapSlides" [(activeSlide)]="activeSlideIndex">
<slide *ngFor="let slide of slides; let index=index">
<img [src]="slide.image">
<div class="carousel-caption">
<h4>Slide {{index}}</h4>
<p>{{slide.text}}</p>
</div>
</slide>
</carousel>
Hello All these codes working ok for me except one thing - I'd like to stop it when is come to last slide ( 6th slide ) but he is going to clone 1 , 2 and 3 more slides (depends of resolution) and after that it's stops. I am beginner in java script and cannot find solution..Please anyone:
HTML
<div id="package" class="carousel carousel-showmanymoveone slide row" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-6 col-sm-4 col-xl-3"><img src="http://placehold.it/500/0054A6/fff/&text=1" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-6 col-sm-4 col-xl-3"><img src="http://placehold.it/500/0054A6/fff/&text=2" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-6 col-sm-4 col-xl-3"><img src="http://placehold.it/500/0054A6/fff/&text=3" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-6 col-sm-4 col-xl-3"><img src="http://placehold.it/500/0054A6/fff/&text=4" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-6 col-sm-4 col-xl-3"><img src="http://placehold.it/500/0054A6/fff/&text=5" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-6 col-sm-4 col-xl-3"><img src="http://placehold.it/500/0054A6/fff/&text=6" class="img-responsive"></div>
</div>
</div>
<a class="left carousel-control" href="#package" data-slide="prev"><i class="glyphicon glyphicon-chevron-left strel"></i></a>
<a class="right carousel-control" href="#package" data-slide="next"><i class="glyphicon glyphicon-chevron-right strel"></i></a>
</div>
JAVASCRIPT
(function(){
// setup your carousels as you normally would using JS
// or via data attributes according to the documentation
// http://getbootstrap.com/javascript/#carousel
$('#package').carousel({ interval: false, pause:true });
}());
(function(){
$('.carousel-showmanymoveone .item').each(function(){
var itemToClone = $(this);
for (var i=1;i<4;i++) {
itemToClone = itemToClone.next();
// wrap around if at end of item collection
if (!itemToClone.length) {
itemToClone = $(this).siblings(':first');
}
// grab item, clone, add marker class, add to collection
itemToClone.children(':first-child').clone()
.addClass("cloneditem-"+(i))
.appendTo($(this));
//listener for after slide
jQuery('.carousel-showmanymoveone').on('slid.bs.carousel', function(){
//Each slide has a .item class to it, you can get the total number of slides like this
var totalItems = jQuery('.carousel-showmanymoveone .item').length;
//find current slide number
var currentIndex = jQuery('.carousel-showmanymoveone .item div.active').index() + 1;
//if slide number is last then stop carousel
if(totalItems == currentIndex){
clearInterval(jQuery('.carousel-showmanymoveone .item').data('bs.carousel').interval);
} // end of if
});
}
});
}());
Setting the wrap option to false makes the carousel to stop cycling automatically.
$('#package').carousel({
interval: 1000,
wrap: false
});
Also, you can use data-wrap="false" in the carousel's HTML
EDIT
You can detect first and last slide with this code:
$('#package').on('slid.bs.carousel', '', function() {
var $this = $(this);
if($('.carousel-inner .item:first').hasClass('active')) {
console.log('first slide');
} else if($('.carousel-inner .item:last').hasClass('active')) {
console.log('last slide');
}
});