I am using 'create-react-app' to develop e web application. I am using Context API to get the data to this component, named Carousal.js
From the bootstrap for React, but my images are not showing up in the carousal. I tried testing if the image is rendering by putting
I am not getting what am I doing wrong? ** img and img2 are from the context API
My code is below:
export default class Details extends Component {
render() {
return (
<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>
</ol>
<div className="carousel-inner">
<div className="carousel-item">
<img className="d-block w-100" src={img} alt="Second slide"/>
</div>
<div className="carousel-item">
<img className="d-block w-100" src={img2} alt="Third slide"/>
</div>
</div>
<a className="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span className="carousel-control-prev-icon" aria-hidden="true"></span>
<span className="sr-only">Previous</span>
</a>
<a className="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span className="carousel-control-next-icon" aria-hidden="true"></span>
<span className="sr-only">Next</span>
</a>
</div>
)
}}
Related
I am attempting to implement a Carousel from Bootstrap in my CRA project. I am essentially using the provided code from the documentation:
<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="..." 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>
<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>
It works no problem, the carousel shows up and I am able to scroll through it. However, it does not autoplay when loaded.
Some things I tested that get it to autoplay:
I tab over to something else in my web broswer (blank tab or something), have React do a hot reload (put a new line after an import and saving works), then tab back to my development server. This starts the autoplay no problem.
Manually clicking through ALL the images on the carousel (in any order - 123, 213, 231, etc.) also starts the autoplay after a slight delay.
I'm stumped, but I have seen that Bootstrap's JavaScript can interfere with React's JavaScript. Anyone have any ideas?
In the code that you provided in the question, no mention of autoplay... why not use the Bootstrap's built in autoplay mechanism data-interval="500" - for the specific duration you need, pass the value from React... No need for us to write the JavaScript
.carousel-inner img {
width: 100%;
height: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="500">
<!-- Indicators -->
<ul 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>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://www.w3schools.com/bootstrap4/la.jpg" alt="Los Angeles" width="1100" height="500">
</div>
<div class="carousel-item">
<img src="https://www.w3schools.com/bootstrap4/chicago.jpg" alt="Chicago" width="1100" height="500">
</div>
<div class="carousel-item">
<img src="https://www.w3schools.com/bootstrap4/ny.jpg" alt="New York" width="1100" height="500">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#myCarousel" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
I have added Bootstrap in Angular-Seed project. The carousel-indicators are working fine but there is problem with the Prev/Next button.
On clicking Prev button, it switches to Last image & stays on it even if you click prev again. On clicking Next button, it switches to 2nd image & stays on it.
Tried replacing JQuery/Bootstrap with the CDN links but their versions is not the issue.
Here is the carousel I'm using:-
<div class="container">
<div id="carouselControls" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselControls" data-slide-to="0" class="active"</li>
<li data-target="#carouselControls" data-slide-to="1"></li>
<li data-target="#carouselControls" data-slide-to="2"></li>
<li data-target="#carouselControls" data-slide-to="3"></li>
<li data-target="#carouselControls" data-slide-to="4"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="d-block w-100" src="Main.jpg" alt="">
</div>
<div class="item">
<img class="d-block w-100" src="mainOne.jpg" alt="">
</div>
<div class="item">
<img class="d-block w-100" src="numberFive.jpg" alt="">
</div>
<div class="item">
<img class="d-block w-100" src="numberFour.jpg" alt="">
</div>
<div class="item">
<img class="d-block w-100" src="numberThree.jpg" alt="">
</div>
</div>
<a class="left carousel-control" href="#carouselControls" 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="#carouselControls" role="button"
data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true">
</span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
I'm all new to react.
Why does my page not re render on mouse over and mouse out when my state changes? If I look at console.log, I can see the state changes. But I can't get this to work. Here is my code:
export default class Nav extends React.PureComponent {
constructor(props) {
super(props);
this.navLevelOneId = '';
this.state = {
showSubMenu: []
};
}
// Mouse over function
handleHover = (id,event) => {
let showSubMenu=this.state.showSubMenu;
showSubMenu[id]=!showSubMenu[id]
this.setState({showSubMenu: showSubMenu}, () => {
console.log(this.state.showSubMenu);
});
}
render() {
return (
<div ref="megaMenu" className="navbar navbar-default navbar-static-top">
<div className="container">
<div className="navbar-header">
<button type="button" className="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span className="icon-bar"></span>
<span className="icon-bar"></span>
<span className="icon-bar"></span>
</button>
</div>
<div className="navbar-collapse collapse">
<ul className="nav navbar-nav">
<li onMouseOver={this.handleHover.bind(this,0)} onMouseOut={this.handleHover.bind(this,0)}>
<a>Home</a>
</li>
<li className="dropdown menu-large" onMouseOver={this.handleHover.bind(this,1)} onMouseOut={this.handleHover.bind(this,1)}>
<a className="dropdown-toggle" data-toggle="dropdown">Product Listing</a>
<ul className={"dropdown-menu megamenu row " + this.state.showSubMenu[1]}>
<li>
<div className="col-sm-6 col-md-3">
<a href="" className="thumbnail">
<img src="http://placehold.it/150x120" alt="test" />
</a>
</div>
<div className="col-sm-6 col-md-3">
<a href="" className="thumbnail">
<img src="http://placehold.it/150x120" alt="test" />
</a>
</div>
<div className="col-sm-6 col-md-3">
<a href="" className="thumbnail">
<img src="http://placehold.it/150x120" alt="test" />
</a>
</div>
<div className="col-sm-6 col-md-3">
<a href="" className="thumbnail">
<img src="http://placehold.it/150x120" alt="test" />
</a>
</div>
</li>
</ul>
</li>
<li className="dropdown menu-large" onMouseOver={this.handleHover.bind(this,2)} onMouseOut={this.handleHover.bind(this,2)}>
<a className="dropdown-toggle" data-toggle="dropdown">Categories</a>
<ul className={"dropdown-menu megamenu row " + this.state.showSubMenu[2]}>
<li>
<div className="col-sm-6 col-md-3">
<a href="" className="thumbnail">
<img src="http://placehold.it/150x120" alt="test" />
</a>
</div>
<div className="col-sm-6 col-md-3">
<a href="" className="thumbnail">
<img src="http://placehold.it/150x120" alt="test" />
</a>
</div>
<div className="col-sm-6 col-md-3">
<a href="" className="thumbnail">
<img src="http://placehold.it/150x120" alt="test" />
</a>
</div>
<div className="col-sm-6 col-md-3">
<a href="" className="thumbnail">
<img src="http://placehold.it/150x120" alt="test" />
</a>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
);
}
}
Check out the difference between using Component and PureComponent.
Briefly, PureComponent performs a shallow comparison on state change. That means that it compares only references for state objects and arrays (in your case this.state.showSubMenu is an array and it's reference doesn't change so React won't force a rerender there)
import React from 'react';
import ReactDom from 'react-dom';
export class Home extends React.Component {
render() {
return (
<div className="container">
<div className="row">
<div className="col-md-12">
<div id="carousel-example-1z" className="carousel slide carousel-fade" data-ride="carousel">
<ul className="carousel-indicators">
<li data-target="#carousel-example-1z" data-slide-to="0" className="active"></li>
<li data-target="#carousel-example-1z" data-slide-to="1"></li>
<li data-target="#carousel-example-1z" data-slide-to="2"></li>
</ul>
<div className="carousel-inner" role="listbox">
<div className="carousel-item active">
<img className="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(130).jpg" alt="First slide" />
</div>
<div className="carousel-item">
<img className="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(129).jpg" alt="Second slide" />
</div>
<div className="carousel-item">
<img className="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(70).jpg" alt="Third slide" />
</div>
</div>
<a className="carousel-control-prev" href="#carousel-example-1z" role="button" data-slide="prev">
<span className="carousel-control-prev-icon" aria-hidden="true"></span>
<span className="sr-only">Previous</span>
</a>
<a className="carousel-control-next" href="#carousel-example-1z" role="button" data-slide="next">
<span className="carousel-control-next-icon" aria-hidden="true"></span>
<span className="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
);
}
}
export default Home;
One thing I can tell for sure is you're exporting the component twice:
here:
export class Home extends React.Component {
and here:
export default Home;
Just pick one way.
The problem was I was not using Bootstrap latest version 4.1 and the I used it, problem solved but there are many problem with 4.1 and not supporting gylphicons in bootstrap please give me any solution of it.
I tried to make the carousel with ng-repeat. The image loads successfully, but the previous and next button do not work.
Here is my code
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item {{::($index === 0 ? 'active' : '')}}" ng-repeat="movie in popularMovies track by $index">
<div class="row">
<img class="d-block w-100" src="{{movie.image}}" alt="{{movie.name}}">
</div>
</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>
Try adding your Angular Elements to the below code and it will work.
I guess your next and previous were not working because there might be few errors in importing js files
Let me know if this fixes your problem.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/js/bootstrap.js"></script>
<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://cdn.pixabay.com/photo/2013/04/06/11/50/image-editing-101040_1280.jpg" alt="{{movie.name}}">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://demo.phpgang.com/crop-images/demo_files/pool.jpg" alt="{{movie.name}}">
</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>