We Keep Coding

How to change Image of Bootstrap Carousel on Mobile View?

/*Carousel CSS for Mobile View*/
#media (max-width: 425px){
#banner-one img{
background-image: url("/images/mobile_banner1.jpg") !important;
}
#banner-two img{
background-image: url("/images/mobile_banner2.jpg") !important;
}
#banner-three img{
background-image: url("/images/mobile_banner3.jpg") !important;
}
#banner-four img{
background-image: url("/images/mobile_banner4.jpg") !important;
}
}
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div id="banner-one" class="carousel-item active">
<img class="d-block w-100" src="/images/banner-one.jpg" alt="First slide">
</div>
<div id="banner-two" class="carousel-item">
<img class="d-block w-100" src="/images/banner-two.jpg" alt="Second slide">
</div>
<div id="banner-three" class="carousel-item">
<img class="d-block w-100" src="/images/banner-three.jpg" alt="Third slide">
</div>
<div id="banner-four" class="carousel-item">
<img class="d-block w-100" src="/images/banner-four.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>
I have a Bootstrap Carousel in my project it works perfect in each and every view. But I want to change the carousel images of every slide in the Mobile View. I have tried everything but failed.

You can set both images , and play on their visibility by css .
see below snippet ( use full screen to switch between views ):
.desk-img {
display: block;
}
.mobile-img {
display: none;
}
#media (max-width: 700px) {
.desk-img {
display: none !important;
}
.mobile-img {
display: block;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div id="banner-one" class="carousel-item active">
<img class=" w-100 desk-img" src="https://via.placeholder.com/800x380?text=slide%201" alt="First slide">
<img class=" w-100 mobile-img" src="https://via.placeholder.com/800x380?text=mobile slide%201" alt="First slide">
</div>
<div id="banner-two" class="carousel-item">
<img class=" w-100 desk-img" src="https://via.placeholder.com/800x380?text=slide%202" alt="Second slide">
<img class=" w-100 mobile-img" src="https://via.placeholder.com/800x380?text=mobile slide%202" alt="Second slide">
</div>
<div id="banner-three" class="carousel-item">
<img class=" w-100 desk-img" src="https://via.placeholder.com/800x380?text=slide%203" alt="Third slide">
<img class=" w-100 mobile-img" src="https://via.placeholder.com/800x380?text=mobile slide%203" 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>

i think you can just use picture element,
<picture>
<source media="(max-width: 425px)" srcset="mobile-img.jpg" />
<source media="(max-width: 768px)" srcset="tablet-img.jpg" />
<img src="desktop-or-default-img.jpg" class="d-block w-100" alt="..." />
</picture>
In this case, mobile-img.jpg will be used if the screen is below 425px, tablet-img.jpg will be used if the screen is below 768px-425px, and desktop-or-default-img.jpg will be used if the screen is at (any)px-768px.

How can i make my carousel work in Angular 8

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/

Multiple Item carousel (converting JS to TS file)

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>

Problem with carousel while loading image dynamically

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.

how to create image slider with left and right arrow buttons in bootstrap

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