i'm trying to create a carousel that inside of it will be scrollable div with images.
The problem is that the swipe events conflict with eachother.
Plunker (the images are on slide 2)
My code:
<div class="carousel-demo">
<ul rn-carousel rn-carousel-index="carouselIndex" rn-carousel-buffered class="carousel1">
<li ng-swipe-left="left($event)">slide #1</li>
<li ng-swipe-right="right($event)">slide #2
<div class="horizontal-slide">
<div class="span2">
<a href="#" class="thumbnail">
<img src="http://placehold.it/150x100" alt="" />
</a>
</div>
<div class="span2">
<a href="#" class="thumbnail">
<img src="http://placehold.it/150x100" alt="" />
</a>
</div>
<div class="span2">
<a href="#" class="thumbnail">
<img src="http://placehold.it/150x100" alt="" />
</a>
</div>
<div class="span2">
<a href="#" class="thumbnail">
<img src="http://placehold.it/150x100" alt="" />
</a>
</div>
</div>
</li>
<li>slide #3</li>
</ul>
Thank's alot
Avi
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 am new in angular JS and highly appreciate if somebody helps me with the problem.I am trying to bind my gallery.html file to index.html row class div using ng-include directive.The problem is though the gallery is bound it isn't responsive.Here is my code:
<body ng-app='myApp'>
<div class='container'>
<div class='row' ng-include="'gallery.html'">
</div>
</div>
<script>
var myApp = angular.module("myApp",[]);
</script>
</body>
And here is my gallery.html code:
<div class="col-md-4">
<div class="thumbnail">
<div class='img_container'>
<a href="#">
<img src="img/1.jpg" class="img-responsive" alt="Lights">
</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<div class='img_container'>
<a href="#">
<img src="img/2.jpg" class="img-responsive" alt="Nature">
</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<div class='img_container'>
<a href="#">
<img src="img/3.jpg" class="img-responsive" alt="Fjords">
</a>
</div>
</div>
</div> <div class="col-md-4">
<div class="thumbnail">
<div class='img_container'>
<a href="#">
<img src="img/3.jpg" class="img-responsive" alt="Fjords">
</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<div class='img_container'>
<a href="#">
<img src="img/3.jpg" class="img-responsive" alt="Fjords">
</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<div class='img_container'>
<a href="#">
<img src="img/3.jpg" class="img-responsive" alt="Fjords">
</a>
</div>
</div>
</div>
I want my application to display only 9 subdivs/images (with id #menu-entry) in one row which is inside ngReapet. My code is following but it displays only one entry.
<menu role="main-menu" type="toolbar" class="hidden-xs">
<div ng-repeat="game in allGames | orderBy: 'gamename'">
<div id=#row class="col-lg-12 col-md-12 col-sm-12" ng-if="($index +1) % 9 == 1">
<div class="menu-entry">
<a href="category?game={{game.gameid}}" title="{{game.gamename}}!">
<img src="img/icons/{{game.gamename}}_logo.png" alt="Przejdź do działu z {{game.gamename}}!" class="img-responsive" />
</a>
</div>
</div>
<div ng-if="(($index +1) % 9 == 0) || $index == $last "></div>
</div>
</menu>
Hot to fix it to display all menu-entries, 9 in row, displaying as much rows as needed.
<div ng-init="arr=[1,2,3,4,5,6,7,8,9,437,67,436,345,54,1,2,3,4,5,6]"></div>
<span ng-repeat = "i in arr track by $index">
<span>{{i}}</span>
<div ng-if="($index+1)%9==0"></div>
</span>
Even you can use div instead of span but make sure that
<span ng-repeat = "i in arr track by $index">
<span>{{i}}</span>
if you make the above lines to divs, their display property should be inline-block and
<div ng-if="($index+1)%9==0"></div>
its display property should be block to get 9 divs in each row.
https://plnkr.co/edit/Y2cJrUGYcygvM9i6wKx5?p=preview
I made it in following way but maybe there is shorter version? Maybe ngRepeat inside ngRepeat?
<menu role="main-menu" type="toolbar" class="hidden-xs">
<div ng-repeat="game in allGames | orderBy: 'gamename'">
<div class="col-lg-12 col-md-12 col-sm-12" ng-if="$index % 9 == 0">
<div class="menu">
<a href="category?gameid={{allGames[$index].gameid}}" title="{{allGames[$index].gamename}}!">
<img src="img/icons/{{allGames[$index].gamename}}_logo.png" alt="Przejdź do działu z {{allGames[$index].gamename}}!" class="img-responsive" />
</a>
</div>
<div class="menu">
<a href="category?gameid={{allGames[$index+1].gameid}}" title="{{allGames[$index+1].gamename}}!">
<img src="img/icons/{{allGames[$index+1].gamename}}_logo.png" alt="Przejdź do działu z {{allGames[$index+1].gamename}}!" class="img-responsive" />
</a>
</div>
<div class="menu">
<a href="category?gameid={{allGames[$index+2].gameid}}" title="{{allGames[$index+2].gamename}}!">
<img src="img/icons/{{allGames[$index+2].gamename}}_logo.png" alt="Przejdź do działu z {{allGames[$index+2].gamename}}!" class="img-responsive" />
</a>
</div>
<div class="menu">
<a href="category?gameid={{allGames[$index+3].gameid}}" title="{{allGames[$index+3].gamename}}!">
<img src="img/icons/{{allGames[$index+3].gamename}}_logo.png" alt="Przejdź do działu z {{allGames[$index+3].gamename}}!" class="img-responsive" />
</a>
</div>
<div class="menu">
<a href="category?gameid={{allGames[$index+4].gameid}}" title="{{allGames[$index+4].gamename}}!">
<img src="img/icons/{{allGames[$index+4].gamename}}_logo.png" alt="Przejdź do działu z {{allGames[$index+4].gamename}}!" class="img-responsive" />
</a>
</div>
<div class="menu">
<a href="category?gameid={{allGames[$index+5].gameid}}" title="{{allGames[$index+5].gamename}}!">
<img src="img/icons/{{allGames[$index+5].gamename}}_logo.png" alt="Przejdź do działu z {{allGames[$index+5].gamename}}!" class="img-responsive" />
</a>
</div>
<div class="menu">
<a href="category?gameid={{allGames[$index+6].gameid}}" title="{{allGames[$index+6].gamename}}!">
<img src="img/icons/{{allGames[$index+6].gamename}}_logo.png" alt="Przejdź do działu z {{allGames[$index+6].gamename}}!" class="img-responsive" />
</a>
</div>
<div class="menu">
<a href="category?gameid={{allGames[$index+7].gameid}}" title="{{allGames[$index+7].gamename}}!">
<img src="img/icons/{{allGames[$index+7].gamename}}_logo.png" alt="Przejdź do działu z {{allGames[$index+7].gamename}}!" class="img-responsive" />
</a>
</div>
<div class="menu">
<a href="category?gameid={{allGames[$index+8].gameid}}" title="{{allGames[$index+8].gamename}}!">
<img src="img/icons/{{allGames[$index+8].gamename}}_logo.png" alt="Przejdź do działu z {{allGames[$index+8].gamename}}!" class="img-responsive" />
</a>
</div>
</div>
</div>
</menu>
Can someone help me with this? Everything works fine except when you click the right control it goes to the last slide, when you click the left it always goes to the second slide, here is the code.
<!-- BEGIN Carousel Element -->
<div class="container">
<div id="carousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="carousel" data-slide-to="0" class="active"></li>
<li data-target="carousel" data-slide-to="1"></li>
<li data-target="carousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper -->
<div class="carousel-inner">
<div class="item active" data-slide-number="0">
<img src="img/lol1.jpg" alt="">
<div class="carousel-caption">
<h3>Pentakill - Smite and Ignite Now Available</h3>
</div>
</div>
<div class="item" data-slide-number="1">
<img src="img/d3ros.jpg" alt="">
<div class="carousel-caption">
<h3>Diablo 3</h3>
<p>Reaper of Souls</p>
</div>
</div>
<div class="item" data-slide-number="2">
<img src="img/twitchtv.jpg" alt="">
<div class="carousel-caption">
<h3>Twitch.TV Streaming</h3>
<p>Coming Soon</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<script type="text/javascript" >
$('.carousel').carousel();
</script>
</div>