I have added Bootstrap Carousel and a Back to Top Button to my rails app. Everything works perfect.
Is there anyway in which I can combine Bootstraps Carousel's Next Button
with my Back to Top button? Or perhaps add this functionality to the Carousel
Next Buttons?
Allowing a user to turn the page with Carousel's Next Button, without having to scroll up to read the next page every time he starts a new page.
New to Rails, Please help :)
This is my code...
VIEWS (Show.html.erb)
<div id="top"></div>
<div id="message">
<%= image_tag("Back_to_Top.png", alt: "rss feed") %>
</div>
<div class="row">
<div class="span12">
<div class="container fill">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="active item">
<div class="fill" style="background-image:url('//placehold.it//000000/FFF');">
<div class="container">
<div class="center"><%= image_tag #book.titlephoto.url(:original) %></div>
</div>
</div>
</div>
<% unless #book.book_images.blank? %>
<% #book.book_images.each do |image| %>
<div class="item">
<div class="fill" style="background-image:url('//placehold.it/1024x700/000000');">
<div class="container">
<div class="center"><%= image_tag image.page.url(:original) %></div>
</div>
</div>
</div>
<% end %>
<% end %>
</div>
<div class="pull-center">
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
</div>
</div>
</div>
I ended up customizing the carousel.js and adding scrollTop(0) like this.
Carousel.prototype.next = function () {
if (this.sliding) return
return this.slide('next').scrollTop(0)
}
Carousel.prototype.prev = function () {
if (this.sliding) return
return this.slide('prev').scrollTop(0)
}
You can also change these two lines
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
To this....
<a class="carousel-control left" href="#myCarousel" onclick="$(this).closest('.carousel').carousel('prev').scrollTop(0)">‹</a>
<a class="carousel-control right" href="#myCarousel" onclick="$(this).closest('.carousel').carousel('next').scrollTop(0)">›</a>
Related
I'm using cshtml from Umbraco. I want to create slider on homepage. The image appear on page but "active" item not working. (THIS SOLVED)
Another problem is I want to add different caption for each slide. How to add that?
#{
var images = Model.Content.GetPropertyValue<IEnumerable<IPublishedContent>>("backgroundSlider").ToList();
}
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
#for (var i = 0; i < images.Count; i++)
{
<div class="#(i < 1 ? " active":"") item" data-slide-number="#i">
<img src='#images[i].Url'>
</div>
}
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
The main problem seems to be your .carousel-item class, which was specified as .item instead. These have to be the same as they are specified in the documentation for everything to work as expected.
#{
var images = Model.Content.GetPropertyValue<IEnumerable<IPublishedContent>>("backgroundSlider").ToList();
}
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
#for (var i = 0; i < images.Count; i++)
{
<div class="#(i < 1 ? " active":"") carousel-item" data-slide-number="#i">
<img src='#images[i].Url' class="d-block w-100">
</div>
}
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
For captioning, this is a suitable Bootstrap docs example that would help you:
#{
var images = Model.Content.GetPropertyValue<IEnumerable<IPublishedContent>>("backgroundSlider").ToList();
}
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
#for (var i = 0; i < images.Count; i++)
{
<div class="#(i < 1 ? " active":"") carousel-item" data-slide-number="#i">
<img src='#images[i].Url' class="d-block w-100">
<div class="carousel-caption d-none d-md-block">
<h5>#images[i].Title</h5>
<p>#images[i].Description</p>
</div>
</div>
}
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
In the example above I'm assuming your image title is in your Title property and caption is in Description. Feel free to amend these as needed.
I am trying to make a carousal through repeater in asp .net and it works well. but the issue is that it scrolls only one image at a time but i want 4 images together to scroll at a time. I am pasting my code below. I googled it and got some clue that to change "visible:4" in any of the jS files. please help.
<div class="well well-small">
<h4>Featured Products <small class="pull-right">200+ featured products</small></h4>
<div class="row-fluid">
<div id="featured" class="carousel slide">
<div class="carousel-inner">
<asp:Repeater ID="Repeater2" runat="server" DataSourceID="SqlDataSource1">
<ItemTemplate>
<div class="item <%# (Container.ItemIndex == 0 ? "active" : "") %>">
<ul class="thumbnails">
<li class="span3">
<div class="thumbnail" >
<i class="tag"></i>
<a href="product_details.html">
<img src='<%# Eval("ImagePath") %>' />
</a>
<div class="caption">
<h5>Product name</h5>
<h4><a class="btn" href="product_details.html">VIEW</a> <span class="pull-right">$222.00</span></h4>
</div>
</div>
</li>
</ul>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
<a class="left carousel-control" href="#featured" data-slide="prev">‹</a>
<a class="right carousel-control" href="#featured" data-slide="next">›</a>
</div>
</div>
</div>
This question already has answers here:
Bootstrap carousel multiple frames at once
(16 answers)
Closed 4 years ago.
I have this Bootstrap Carousel which shows 2 item each in Desktop view. However, I want to show one item at a time in Mobile view. How can I achieve this?
https://jsfiddle.net/v9t2pz9b/
HTML
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="col-sm-6">
block1
</div>
<div class="col-sm-6">
block2
</div>
</div>
<div class="item">
<div class="col-sm-6">
block3
</div>
<div class="col-sm-6">
block4
</div>
</div>
<div class="item">
<div class="col-sm-6">
block5
</div>
<div class="col-sm-6">
block6
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
JS:
$(document).ready(function(){
$("#myCarousel").carousel();
});
Something like as this shown in the design. I want to show only one slide at a time in mobile:
$(document).ready(function(){
$("#myCarousel").carousel();
if ( $(window).width() < 640 ) {
$('.col-sm-6').unwrap().addClass('item');
$('.col-sm-6:first').addClass('active');
}
});
Where 640 is your mobile breakpoint. Check out unwrap() , it removes the element's parent while not affecting its content.
I am trying to get the index of several carousels from bootstrap. At this moment I get only the index of one carousel.
Here is the code.
<body ng-app="menuAPP" ng-controller="mainController">
<!-- ------------------------------------------------------ -->
<!-- SLIDER DE BASES DE BRAZOS ROBOTICOS -->
<div id="container" class="c-wrapper" style="width: 60%; margin-left: 20%" align="center">
<!-- Con class="carousel" no sale error pero no funciona-->
<div id="Carousel-roboticArmB" class="carousel slide" >
<ol class="carousel-indicators">
<li data-target="#Carousel-roboticArmB" data-slide-to="0" class="active"></li>
<%
for(int i=1;i<=bases.size();i++)
{
%><li data-target="#Carousel-roboticArmB data-slide-to="<%out.println(i); %>" class></li><%
}
%>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<%
boolean activo=true;
for(Pieza i: bases)
{
String url = i.getImg();
if(activo)
{
activo=false;
%>
<div class="item active" id="base">
<img src="<%out.println(url);%>" alt="IMG-NOT FOUND">
<div class="carousel-caption">
<h3><%out.println(i.getNombre());%></h3>
<p><%out.println(i.getDescripcion());%></p>
</div>
</div>
<%
}
else
{
%>
<div class="item" id="base">
<img src="<%out.println(url);%>" alt="IMG-NOT FOUND">
<div class="carousel-caption">
<h3><%out.println(i.getNombre());%></h3>
<p><%out.println(i.getDescripcion());%></p>
</div>
</div>
<%
}
}
%>
</div>
<!-- Controls -->
<a ng-non-bindable class="left carousel-control" href="#Carousel-roboticArmB" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Anterior</span>
</a>
<a ng-non-bindable class="right carousel-control" href="#Carousel-roboticArmB" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Siguiente</span>
</a>
<input type="hidden" id="sliderValue" name ="sliderValue" value={{}}>
</div>
</div>
<hr>
<!-- ------------------------------------------------------ -->
<!-- SLIDER DE ANTEBRAZOS ROBOTICOS -->
<div id="container" class="c-wrapper" style="width: 60%; margin-left: 20%" align="center">
<!-- Con class="carousel" no sale error pero no funciona-->
<div id="Carousel-roboticArmA" class="carousel slide" >
<ol class="carousel-indicators">
<li data-target="#Carousel-roboticArmA" data-slide-to="0" class="active"></li>
<%
for(int i=1;i<=antebrazos.size();i++)
{
%><li data-target="#Carousel-roboticArmA data-slide-to="<%out.println(i); %>" class></li><%
}
%>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<%
activo=true;
for(Pieza i: antebrazos)
{
String url = i.getImg();
if(activo)
{
activo=false;
%>
<div class="item active" id="ante">
<img src="<%out.println(url);%>" alt="IMG-NOT FOUND">
<div class="carousel-caption">
<h3><%out.println(i.getNombre());%></h3>
<p><%out.println(i.getDescripcion());%></p>
</div>
</div>
<%
}
else
{
%>
<div class="item" id="ante">
<img src="<%out.println(url);%>" alt="IMG-NOT FOUND">
<div class="carousel-caption">
<h3><%out.println(i.getNombre());%></h3>
<p><%out.println(i.getDescripcion());%></p>
</div>
</div>
<%
}
}
%>
</div>
<!-- Controls -->
<a ng-non-bindable class="left carousel-control" href="#Carousel-roboticArmA" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Anterior</span>
</a>
<a ng-non-bindable class="right carousel-control" href="#Carousel-roboticArmA" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Siguiente</span>
</a>
<input type="hidden" id="sliderValue" name ="sliderValue" value={{}}>
</div>
</div>
<hr>
<!-- ------------------------------------------------------ -->
<!-- SLIDER DE MANOS ROBOTICOS -->
<div id="container" class="c-wrapper" style="width: 60%; margin-left: 20%" align="center">
<!-- Con class="carousel" no sale error pero no funciona-->
<div id="Carousel-roboticArmM" class="carousel slide" >
<ol class="carousel-indicators">
<li data-target="#Carousel-roboticArmM" data-slide-to="0" class="active"></li>
<%
for(int i=1;i<=manos.size();i++)
{
%><li data-target="#Carousel-roboticArmM data-slide-to="<%out.println(i); %>" class></li><%
}
%>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<%
activo=true;
for(Pieza i: manos)
{
String url = i.getImg();
if(activo)
{
activo=false;
%>
<div class="item active" id="mano">
<img src="<%out.println(url);%>" alt="IMG-NOT FOUND">
<div class="carousel-caption">
<h3><%out.println(i.getNombre());%></h3>
<p><%out.println(i.getDescripcion());%></p>
</div>
</div>
<%
}
else
{
%>
<div class="item" id="mano">
<img src="<%out.println(url);%>" alt="IMG-NOT FOUND">
<div class="carousel-caption">
<h3><%out.println(i.getNombre());%></h3>
<p><%out.println(i.getDescripcion());%></p>
</div>
</div>
<%
}
}
%>
</div>
<hr>
<!-- Controls -->
<a ng-non-bindable class="left carousel-control" href="#Carousel-roboticArmM" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Anterior</span>
</a>
<a ng-non-bindable class="right carousel-control" href="#Carousel-roboticArmM" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Siguiente</span>
</a>
<input type="hidden" id="sliderValue" name ="sliderValue" value={{}}>
</div>
</div>
<!-- ------------------------------------------------------ -->
<form id="formShowBrazo" method="post" action="redirect" >
<input type="button" value="Probar brazo seleccionado" ng-click="show()" class="btn btn-primary"/>
</form>
<script>
var app = angular.module('menuAPP', ['ui.bootstrap']);
app.controller('mainController', function($scope, $http, $window, $location) {
$scope.hideError=true;
$scope.show = function() {
$scope.currentBaseIndex = $("#brazo, div.active").index() + 1;//Saca el indice actual del carousel
$scope.currentAnteIndex = $("#antebrazo, div.active").index() + 1;//Saca el indice actual del carousel
$scope.currentManoIndex = $("#mano, div.active").index() + 1;//Saca el indice actual del carousel
var params = "Data :"+$scope.currentBaseIndex+":"+$scope.currentAnteIndex+":"+$scope.currentManoIndex;
var data = angular.toJson(params)
$http({
method: 'POST',
url: 'showPieza',
data: 'Data=' + data,
headers : {
'Content-Type' : 'application/x-www-form-urlencoded'
}
}).success(function(response)
{
post("formShowBrazo");
});
};
function isActive(slide) {
return slide.active;
};
});
</script>
</body>
Here need a string with the index of all carousel
var params = "Data :"+$scope.currentBaseIndex+":"+$scope.currentAnteIndex+":"+$scope.currentManoIndex;
The problem is that all values are the index of the first carousel (id="Carousel-roboticArmB")
EXAMPLE
1º carousel index: 2
2º carousel index: 4
3º carousel index: 1
Expected output: "Data :4:2:1"
Real output: "Data :2:2:2"
Solved
$scope.currentBaseIndex = $("div.active#base").index() + 1;
$scope.currentAnteIndex = $("div.active#ante").index() +
$scope.currentManoIndex = $("div.active#mano").index() + 1;
The solution was change the position of ID and class.
Hope someone will find this helpful.
The below link of the slider which I created using JS fiddle is not working. Please help
Slider link
<div class="row">
<div id="myCarousel" class="carousel slide vertical">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<img src="http://placehold.it/600x400&text=First+Slide">
</div>
<div class="item">
<img src="http://placehold.it/600x400&text=Second+Slide">
</div>
<div class="item">
<img src="http://placehold.it/600x400&text=Third+Slide">
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
Do let me know if you need anything else.
how about this
The external resources which you have linked was giving error.
$('.carousel').carousel({
interval: 3000
})
for cdn use maxcdn