i designed this slider and its working good but its not response and i cant use it properly in mobiles, can any one help me just to make it responsive.
fiddle here https://jsfiddle.net/iamrahulkumar001/m5yt0pjf/
i have tried using different sliders but none works for me i am using bootstrap 4
https://jsfiddle.net/iamrahulkumar001/m5yt0pjf/ i have the slider working here
<div class="brain_sliders row" style="position: relative;">
<div id='brain_sliders' class="carousel slide" data-ride="carousel" data-pause="hover">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-md-4 col-sm-12"><img class="d-block w-100" src="https://in.bmscdn.com/showcaseimage/eventimage/super-30-10-07-2019-05-32-06-583.jpg" alt="1 slide"></div>
<div class="col-md-4 col-sm-12"><img class="d-block w-100" src="https://in.bmscdn.com/showcaseimage/eventimage/midori-with-pianist-ieva-jokubaviciute-05-07-2019-12-08-11-888.jpg" alt="2 slide"></div>
<div class="col-md-4 col-sm-12"><img class="d-block w-100" src="https://in.bmscdn.com/showcaseimage/eventimage/bade-miyan-deewane-10-07-2019-03-32-41-494.jpg" alt="3 slide"></div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-md-4 col-sm-12"><img class="d-block w-100" src="https://in.bmscdn.com/showcaseimage/eventimage/mahabharata--the-epic-tale-10-07-2019-11-24-21-041.jpg" alt="4 slide"></div>
<div class="col-md-4 col-sm-12"><img class="d-block w-100" src="https://in.bmscdn.com/showcaseimage/eventimage/midori-with-pianist-ieva-jokubaviciute-05-07-2019-12-08-11-888.jpg" alt="5 slide"></div>
<div class="col-md-4 col-sm-12"><img class="d-block w-100" src="https://in.bmscdn.com/showcaseimage/eventimage/bade-miyan-deewane-10-07-2019-03-32-41-494.jpg" alt="6 slide"></div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#brain_sliders" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Geri</span>
</a>
<a class="carousel-control-next" href="#brain_sliders" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">İleri</span>
</a>
</div>
it's not exactly the right solution, but you can create two sliders. One for resolution less than md (d-block d-md-none) and your (d-none d-md-block).
I used this solution only once, because I was solving the same problem and needed to solve it quickly.
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 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>
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-md-3 home__li-align" ng-
repeat="electronic in allItem.slice(0,4) | filter :enter code here 'electronics'">
<a ui-sref="" ng-click="`enter code here`view(mobile)">
<img ng-src="../asset/img/{{electronic.image[0]}}" alt="Not Found" style="height: 200px;width:50%;" />
<div class="home__label-align">{{electronic.product_name}}</div>
<div class="home__label-align"> ₹: {{electronic.cost}}</div>
</a>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-3 home__li-align" ng-repeat="electronic in allItem.slice(4,8) | filter : 'electronics'">
<a ui-sref="" ng-click="view(mobile)">
<img ng-src="../asset/img/{{electronic.image[0]}}" alt="Not Found" style="height: 200px;width:50%;" />
<div class="home__label-align">{{electronic.product_name}}</div>
<div class="home__label-align"> ₹: {{electronic.cost}}</div>
</a>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev" style="margin-bottom: 70px; margin-left: -70px; color: black;"><i class="glyphicon glyphicon-chevron-left" ></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next" style="margin-bottom: 70px; margin-right: -70px; color: black;"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
Only item active class is working and i want 4 div in one slide of carousel then on clicking carousel control. It should bring next carousel having 4 div.So any Solution of that?
I can understand your problem and i created solution fiddle please follow below link.
<script>
var myApp = angular.module('myApp',[]);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
myApp.controller("MyCtrl",MyCtrl);
function MyCtrl($scope) {
$scope.list = [];
for(var i = 0; i< 16;i++){
$scope.list.push(i);
}
}
</script>
<div ng-app="myApp" ng-controller="MyCtrl">
<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" role="listbox">
<div class="item active">
<div class="row">
<div class="col-sm-3" style="height:100px; background:red; color:green; font-size:18px;" ng-repeat="l in list.slice(0,4)">
Hello {{l}}
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-3" style="height:100px; background:red; color:green; font-size:18px;" ng-repeat="l in list.slice(4,8)">
Hello {{l}}
</div>
</div>
</div>
<div class="item">
<img src="http://placehold.it/450x350" alt="Slide 3">
<div class="carousel-caption">
Caption Slide 3
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
http://jsfiddle.net/r2wLz6xr/507/
I am trying to align my carousel to the center but it is not functional as shown in the image.
Here is HTML code for it:
<div class="c-wrapper" position="absolute" align="center">
<div class="col-sm-6 col-md-6" position="absolute" align="center">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" margin: auto; width: 500px; position="absolute" align="center">
<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>
<div class="carousel-inner">
<div class="item active">
<img src="img/temple.jpg" alt="temple" class="img-responsive";>
</div>
<div class="item">
<img src="img/harmonium.jpg" alt="harmonium"
class="img-responsive";>
</div>
<div class="item">
<img src="img/tabla.jpg" alt="tabla" class="img-responsive">
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic"
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="#carousel-example-generic"
role="button" data-slide="next"> <span
class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
You only have added one div tag with - col-sm-6 col-md-6. so, it is only occupying the first six cells of the page. Bootstrap divides the page into 12 cells. so use 3 div tags and first empty div with value as col-sm-3 col-md-3, followed by second div you already have and add another empty div with value as col-sm-3 col-md-3.
<div class="col-sm-6 col-md-6">
|
|
</div>
Here is the fully functional code for carousel
<div class="col-md-12 col-lg-12">
<div class="col-md-6 col-lg-6" style="margin-left: 25%;">
<div id="carousel-example-generic" class="carousel slide"
data-ride="carousel" data-interval="5000">
<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>
<div class="carousel-inner">
<div class="item active">
<img src="img/temple.jpg" alt="temple" class="img-responsive";>
</div>
<div class="item">
<img src="img/harmonium.jpg" alt="harmonium" class="img-responsive";>
</div>
<div class="item">
<img src="img/tabla.jpg" alt="tabla" class="img-responsive">
</div>
</div>
<a class="left carousel-control"
data-target="#carousel-example-generic" 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"
data-target="#carousel-example-generic" role="button"
data-slide="next"> <span
class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<h4>
<p class="text-center"> <figcaption>culpa qui officia deserunt mollitia</figcaption> </p>
</h4>
</div>
</div>
</div>