Using both Bootstrap components carousel and popover, I have encountered some conflict. I need to utilize the carousel inside the popover, however they don't play nice together. Is there a reason for this?
Essentially the concept is pretty simple, if you want to login, the form is inside the popover and if you want to register, utilise the carousel inside the popover and slide to register form.
Any Ideas?
Bootply:
HTML:
<div class="login-popover hide">
<div class="row">
<div class="col-md-12">
<div id="login-register" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner"><!-- Wrapper for slides -->
<div class="item active"> <!-- Active is always 1st image-->
Login Content
</div>
<div class="item">
Register Content
</div>
</div>
<!-- Controls for carousel-->
<a class="left carousel-control" href="#login-register" data-slide="prev">
<span class="glyphicon glyphicon-circle-arrow-left"></span>
</a>
<a class="right carousel-control" href="#login-register" data-slide="next">
<span class="glyphicon glyphicon-circle-arrow-right"></span>
</a>
</div>
</div>
</div>
</div>
Javascript:
$('.login-pop').popover({
placement: 'bottom',
container: '.popover-login',
trigger: 'click',
animation: false,
template: '<div class="popover login" role="tooltip"><div class="arrow"></div><div class="popover-content"></div></div>',
html: true,
content: function () {
return $(this).next('.login-popover').html();
}
});
It is possible to put bootstrap carousel inside tooltip or popover. Take a look at some examples:
http://codepen.io/_danko/pen/wavmjG
Reason why it does not work in your case is because it (carousel) is not initialized. You can initialize it with something like this:
$('.login-pop').on('shown.bs.popover', function () {
// initialize carousel…
$('.carousel-inner').carousel();
});
After further reading Bootstrap popovers create dynamic content so this is not possible.
Related
I have a div that uses a bootstrap carousel with ng-repeat. I also have a way to add items the current list of items.
So if I am in index 0 and I click the add button, I want to be able to slide to the new item.
Currently with what I have, the indexes seem to be set correctly but it just isn't sliding to the new item
$scope.items.splice($scope.currentIndex+1, 0, newItem);
$scope.currentIndex = $scope.currentIndex+1;
$('#myCarousel').carousel($scope.currentIndex);
It just shows the data from item 1 still. But when I do try and click next, it then moves to that new item.
I have also tried it with $('#myCarousel').carousel('next'); which results in the same thing
Edit:
<div id="myCarousel" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div class="item" ng-class="{active:!$index}" ng-repeat="item in items">
// rest of the html
</div>
</div>
</div>
Can you post the html part? also begin with more than 1 slide so that you have at least 3 slides at the end just for debug.
Following your code i compiled something like this, don't know if it's what you are looking for
<body ng-app="cApp" ng-controller="myslides">
<div id="myCarousel" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div ng-repeat="item in items" class="item" ng-class="{active:$index==currentIndex}" >
<div>{{item}}</div>
</div>
<h1>Hello Plunker!</h1>
</div>
<a class="left carousel-control" href="#myCarousel" ng-click="currentIndex=currentIndex!=0?currentIndex-1:items.length-1" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" ng-click="currentIndex=currentIndex<items.length-1?currentIndex+1:0" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
<button class="btn btn-default" ng-click="addslide('another1')">add slide</button>
</body>
with the script
var app = angular.module('cApp', []);
app.controller('myslides', function($scope){
$scope.items = ['this is 1','this is 2'];
$scope.currentIndex = 0;
$scope.addslide=function(newItem){
$scope.items.splice($scope.currentIndex+1, 0, newItem);
$scope.currentIndex = $scope.currentIndex+1;
};
});
Aldo if you are going to use angular, i personally prefer to use angularui that has a simple carousel with prebuild functions and you can still do some customizing.
I'm using themeforest with bootstrap.
When I click in the menu (data-toggle="sidebar"), it refreshes the page preventing me from viewing the menu.
<!-- START MOBILE CONTROLS -->
<div class="container-fluid relative">
<!-- LEFT SIDE -->
<div class="pull-left full-height visible-sm visible-xs">
<!-- START ACTION BAR -->
<div class="header-inner">
<a href="#" class="btn-link toggle-sidebar visible-sm-inline-block visible-xs-inline-block padding-5" data-toggle="sidebar">
<span class="icon-set menu-hambuger"></span>
</a>
</div>
<!-- END ACTION BAR -->
</div>
<div class="pull-center hidden-md hidden-lg">
<div class="header-inner">
<div class="brand inline">
<img src="assets/img/logo.png" alt="logo" data-src="assets/img/logo.png" data-src-retina="assets/img/logo.png" width="78" height="22">
</div>
</div>
</div>
</div>
<!-- END MOBILE CONTROLS -->
In the console, I'm getting the following message:
[Intervention] Unable to preventDefault inside passive event listener
due to target being treated as passive : jquery-3.2.1.min.js:6
And inside jquery, the error is in this part:
preventDefault: function () ... var a = this.originalEvent; ... a.preventDefault(); ...
The error is at: a.preventDefault();
Here's the interesting thing: after several clicks on the menu icon, it shows the menu. That's weird.
Any ideas how to solve this?
I have a carousel button that scrolls back and forward through images.
The issue I have is that the href of the carousel is "#phonedemo" as this is where the images are stored. The scroll also moves to that specific position.
The issue I am having is that the carousel is contained inside another image, and I want the scroll to go to the top of that image.
Changing to href="#contentfeadtures" moves it to the correct position, but it no longer changes the carousel images.
Here is the html.
<div id="contentFeadtures" class="row">
<h1 class="col-White">Features</h1>
<div class="row">
<div id="phonedemo" class="carousel slide" data-ride="carousel">
<div class="phonedemoHouseing">
<div class="phonedemoContainer">
<div class="carousel-inner center-block" role="listbox">
<div class="item active">
<img src="images/carousel-1-ca.jpg" class="img-responsive">
</div>
<div class="item">
<img src="images/carousel-1-.jpg" class="img-responsive">
</div>
<div class="item">
<img src="images/carousel-1-.jpg" class="img-responsive">
</div>
<div class="item">
<img src="images/carousel-1-.jpg" class="img-responsive">
</div>
<div class="item">
<img src="images/carousel-1-.jpg" class="img-responsive">
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#phonedemo" role="button" data-slide="prev">
<img src="images/back.png" class="img-responsive">
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#phonedemo" role="button" data-slide="next">
<img src="images/forward.png" class="img-responsive">
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
jquery
//scrollto
$('.navbar').localScroll(200,{
easing:'elasout'
});
$('section#objective,section#creationdesign,section#features,section#results').localScroll(2000,{
easing:'elasout'
});
So instead of the button scrolling to #phonedemo, I want it go to to #contentfeadtures but retain the moving page ability.
If you are using jQuery then capturing click event of anchor tags and scroll to top of #contentfeadtures may trick out this issue.
$('.carousel-control').on('click', function() {
$('html, body').scrollTo('#contentfeadtures',{duration:'slow', offsetTop : '0'});
});
Another solution you can try out
Replace href with data-target attribute refering to your carousel.
data-target="#phonedemo"
Lokesh Yadav's suggestion of replacing the href with the data-target solved my problem. When I clicked on the carousel control the slide climbed to the top and was hidden behind the menu with affix top. Now it stays static. I'm Brazilian and I needed to translate this comment.
I'm trying to use this template with a custom carousel.
I want the carousel to replace the default header, but when I put the carousel code there, nothing happens.
When I first tried it did appear, but the left and right arrows would not function properly.
Here is the carousel:
<header id="myCarousel" class="carousel slide">
<!-- 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>
</ol>
<!-- Wrapper for Slides -->
<div class="carousel-inner">
<div class="item active">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" style="background-image:url('');"></div>
<div class="carousel-caption">
</div>
</div>
<div class="item">
<!-- Set the second background image using inline CSS below. -->
<div class="fill" style="background-image:url('');"></div>
<div class="carousel-caption">
</div>
</div>
<div class="item">
<!-- Set the third background image using inline CSS below. -->
<div class="fill" style="background-image:url('');"></div>
<div class="carousel-caption">
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</header>
And these scripts are at the bottom of the body
// Closes the sidebar menu
$("#menu-close").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper").toggleClass("active");
});
// Opens the sidebar menu
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper").toggleClass("active");
});
// Scrolls to the selected menu item on the page
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
The reason the carousel wasn't showing up is that the carousel has to be inside the header, not the header itself. Change this
<header id="myCarousel" class="carousel slide">
...
</header>
To this
<header>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
...
</div>
</header>
The previous and next buttons aren't working because your page has a smooth scrolling plugin. Just change this line
$('a[href*=#]:not([href=#])').click(function() { ... }
So that it filters out the carousel buttons, like so
$('a[href*=#]:not([href=#]):not([href=#myCarousel])').click(function() { ... }
(Demo)
Take a look at this Fiddle.
I set the fiddle up with the template and have a Bootstrap carousel fullscreen in place of the image.
The issue why you could not get it to work was because the template site uses a scroll-to in the menu links.
It was a simple fix, all that was needed was to swap the tags to div.
You could use <button>but this would have a shaded gray edge area in from each side.
<!-- Left and right controls -->
<div 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>
</div>
<div 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>
</div>
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