I have a carousel that I copied from the documentation of bootstrap 4 but it only shows one image. How can I make my carousel show all images?.Im new using Angular
Here's my code:
<div class=" bg-success text-white py-5 text-center">
<h1 >header</h1>
</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>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="./assets/images/leadlogic_1.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="./assets/images/leadlogic_2.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="./assets/images/leadlogic_3.jpg" alt="Third slide">
</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>
use ngx-bootstrap Carousel Component :
https://valor-software.com/ngx-bootstrap/#/carousel
You need to follow below steps to work bootstrap carousel in your Angular project
Install below dependencies
npm i bootstrap
npm i jquery
npm i popper.js#1.14.3
Then add css and js file in your angular.json file.
In styles section add bootstrap.min.css
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
]
In the scripts section add jquery, bootstrap and popper js files
"scripts": [
"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.min.js" ,
"./node_modules/popper.js/dist/umd/popper.min.js"
]
Now you can add your bootstrap carousel in your template file. Also you need to change data-slide-to="0" to [attr.data-slide-to]="0"
you can use ngb-carousel for lesser code
use this command to install ngx-bootstrap
npm install --save #ng-bootstrap/ng-bootstrap
import ng-bootstrap in your module.ts file
import {NgbModule} from '#ng-bootstrap/ng-bootstrap';
and add html code
<ngb-carousel *ngIf="cars">
<div *ngFor="let item of cars">
<ng-template ngbSlide>
<div class="picsum-img-wrapper">
<img [src]="item" alt="Random first slide" class="mh-100" style="width: 100%; height: 35vh">
</div>
</ng-template>
</div>
</ngb-carousel>
you can check out my stackblitz here https://stackblitz.com/edit/angular-ngbcarouseldemo
It works doing the things that says the next link https://uxworks.online/how-to-add-dynamic-carousel-in-angular-in-simple-steps/
Related
I've successfully built a little drag and drop builder with grapesjs. Works great. The problem I'm facing is when dragging a bootstrap carousel inside the builder. The carousel works as expected on a regular page. But when inside the framework, only the first image shows up and I'm unable to use the controls to switch from one image to another. I've looked into the lory plugin but I'd love to be able to do this with bootstrap. Any grapesjs expert who can help?
See my builder here on Codepen :
https://codepen.io/hellomev/pen/RwRaNpZ
To reproduce : Open Blocks. Then drag and drop one of the carousel inside the builder.
grapejs
function customPlugin(editor){
//slide1
editor.BlockManager.add('slide1', {
category : 'Carousel',
label: '<h1><i class="far fa-play-circle fa-lg"></i></h1> Slides only',
content : '<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(35).jpg"> </div> <div class="carousel-item"> <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(33).jpg"> </div> <div class="carousel-item"> <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(31).jpg"> </div> </div> </div>'
});
//slide2
editor.BlockManager.add('slide2', {
category : 'Carousel',
label: '<h1><i class="far fa-play-circle fa-lg"></i></h1> Slides With controls',
content : '<div id="carouselExampleControls" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(45).jpg" alt="First slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(46).jpg" alt="Second slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(47).jpg" alt="Third slide"> </div> </div> <a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>'
});
}
var editor = grapesjs.init({
container : '#gjs_container',
storageManager: {
type: 'remote',
autosave: true,// Store data automatically
autoload: true,// Autoload stored data on init
stepsBeforeSave: 1,
urlStore: 'queries/save_webpage.php',
urlLoad: 'queries/load_webpage.php',
// For custom parameters/headers on requests
params: { _some_token: '' },
headers: { Authorization: 'Basic' },
},
plugins: [
customPlugin
],
pluginsOpts: {},
canvas: {
styles: [
'https://use.fontawesome.com/releases/v5.8.2/css/all.css',
'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap',
'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css',
'https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/css/mdb.min.css',
],
scripts: [
'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js',
'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js',
'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js',
'https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/js/mdb.min.js',
],
}
});
I'm using a bootstrap carousel to implement it in my angular project And I need to convert my js file to a ts file. I am new to this hence I'm not sure on how to convert and implement it to a ts file. I tried to follow some bootstrap example online but It doesn't seems to work
This is my HTML code:
<h1>Use Bootstrap's carousel to show multiple items per slide.</h1>
<div class="row">
<div class="col-md-12">
<div class="carousel slide multi-item-carousel" id="theCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-4"><img src="http://placehold.it/300/f44336/000000" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/300/e91e63/000000" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/300/673ab7/000000" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/300/4caf50/000000" class="img-responsive"></div>
</div>
<!-- Example item end -->
</div>
<a class="left carousel-control" href="#theCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#theCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
</div>
AND TS FILE:
import { Component, OnInit } from '#angular/core';
import { FormBuilder, FormGroup } from '#angular/forms';
#Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss']
})
export class LoginComponent {
// Instantiate the Bootstrap carousel
$('.multi-item-carousel').carousel({
interval: false
});
// for every slide in carousel, copy the next slide's item in the slide.
// Do the same for the next, next item.
$('.multi-item-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));
}
});
}
First check for bootstrap dependency in package.json file in your angular project.
if it is not there then install it by
npm i --save bootstrap
add in you angular.json file
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css
],
"scripts": [
"./node_modules/bootstrap/dist/js/bootstrap.min.js",
]
After that you need just html code of bootstrap
OR you can add bootstrap by cdn also
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"
/>
Than put you bootstrap HTML code in any component of html file
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Third slide">
</div>
</div>
</div>
You can try this code. This is worked for me and you have to add the only HTML.
HTML Code:
<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">
<div class="item active">
<img src="assets/images/Slide01.png" alt="">
</div>
<div class="item">
<img src="assets/images/Slide02.png" alt="">
</div>
<div class="item">
<img src="assets/images/Slide03.png" alt="">
</div>
<div class="item">
<img src="assets/images/Slide04.png" alt="">
</div>
<div class="item">
<img src="assets/images/Slide05.png" alt="">
</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>
I have used bootstrap material carousel. It works fine when I load image statically.Like:
<div class="row" >
<div class="container-fluid">
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel" data-interval="1000">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="view">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(15).jpg" alt="First slide">
<div class="mask rgba-black-slight"></div>
</div>
<div class="carousel-caption">
<h3 class="h3-responsive">First Event</h3>
<p>This is our first event.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(16).jpg" alt="Second slide">
<div class="carousel-caption">
<h3 class="h3-responsive">Second Event</h3>
<p>This is our second event.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(17).jpg" alt="Third slide">
<div class="carousel-caption">
<h3 class="h3-responsive">Third Event</h3>
<p>This is our third event.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
<i class="material-icons">keyboard_arrow_left</i>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
<i class="material-icons">keyboard_arrow_right</i>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
But when I load images from database i.e dynamically, carousel's images splits in block view and carousel doesn't works anymore. Like when I load in this way:
<div class="row" >
<div class="container-fluid">
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel" data-interval="1000">
<div class="carousel-inner">
{{#each events}}
<div class="carousel-item active">
<div class="view">
<img class="d-block w-100" src="/uploads/{{file}}" alt="First slide">
<div class="mask rgba-black-slight"></div>
</div>
<div class="carousel-caption">
<h3 class="h3-responsive">{{title}}</h3>
<p>{{description}}</p>
</div>
</div>
{{/each}}
</div>
<a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
<i class="material-icons">keyboard_arrow_left</i>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
<i class="material-icons">keyboard_arrow_right</i>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
When I load in this way images are seen in block view one after another instead of carousel.
I can see those images but not as a carousel. I mean I am getting images from back end but they are not displayed well.
For kind information I have used node js and handlebars as template engine.
What is wrong here? I am new to node and sorry if it was a simple question.
The class active is included in all slides, that's why all of them are visible.
FIrst for all, remove the class active in the slides, and with jQuery you can: $('.carousel-item:first-child').addClass('active').
https://api.jquery.com/first-child-selector/
This will add the class active for the first node .carousel-item finded.
Hope it helped.
Cheers.
I need create image slider to move left and right with arrow buttons. please see my existing images here
<div class="col-md-3 animated fadeInUp" >
<div class="tourbox">
<div style="background-image:url(); width:100%; height:100%;" class="zoom" >
</div>
</div>
<div class="col-md-12 text-center tourboxInner1"><img src="img/icons/info.png" width="30px"></div>
<div class="col-md-12 text-center tourboxInner">CLASSICAL TOUR</div>
</div>
<div class="col-md-3 animated fadeInUp">
<div class="tourbox">
<div style="background-image:url(); width:100%; height:100%;" class="zoom" >
</div>
</div>
<div class="col-md-12 text-center tourboxInner1"><img src="img/icons/info.png" width="30px"></div>
<div class="col-md-12 text-center tourboxInner">TEA COUNTRY TOUR</div>
</div>
my image slider example link here
I need show four images in the page at one time and need move left and right one by one with new images. I am using bootstrap here. how can I do this please help me?
hey hello Brother may be my answer helped you totally using bootstrap no custom css and js
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="http://www.planwallpaper.com/static/images/desktop-year-of-the-tiger-images-wallpaper.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="http://www.gettyimages.com/gi-resources/images/Embed/new/embed2.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://www.w3schools.com/w3css/img_fjords.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
here is working fiddle
First, sorry about my english.
I want to do a slider with transitions like this http://pumamaritimeservices.com/beta/ but with bootstrap, i did before a carousel but i don't know if i can do transitions like the first link.
My new slider is the next: http://pumamaritimeservices.com/beta3/
My code is:
<div style="height: 90%;" id="myCarousel" class="carousel slide">
<!-- 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">
<!-- Set the first background image using inline CSS below. -->
<div class="fill hidden-xs" style="background-image:url('img/slider/01.jpg');"></div>
<div class="fill show-xs" style="background-image:url('img/slider/01_corta.jpg');"></div>
<div class="carousel-caption">
<h2 class="pull-left"><span style="background-color: #B9A004; padding: 5px 15px;">Cargo Surveys</span><br /><br /><span style="background-color: #B9A004; padding: 5px 15px; font-size: 20px">LEARN MORE</span></h2>
</div>
</div>
<div class="item">
<!-- Set the second background image using inline CSS below. -->
<div class="fill hidden-xs" style="background-image:url('img/slider/02.jpg');"></div>
<div class="fill show-xs" style="background-image:url('img/slider/02_corta.jpg');"></div>
<div class="carousel-caption">
<h2 class="pull-left"><span style="background-color: #012540; padding: 5px 15px;">Containers and Cargo in Containers Surveys</span><br /><br /><span style="background-color: #012540; padding: 5px 15px; font-size: 20px;">LEARN MORE</span></h2>
</div>
</div>
<div class="item">
<!-- Set the third background image using inline CSS below. -->
<div class="fill hidden-xs" style="background-image:url('img/slider/03.jpg');"></div>
<div class="fill show-xs" style="background-image:url('img/slider/03_corta.jpg');"></div>
<div class="carousel-caption">
<h2 class="pull-left"><span style="background-color: #B81818; padding: 5px 15px;">More than 680 Lloyd’s Agents around the world</span></h2>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
Can I do any transition in my existing slider? I really need help with this, i don't want the tipical fade in and fade out, i want enter the image at the left and the text too, and it out at right
you can find more examples and tutorial from this links.
tutorialrepublic
and
mobirise