<link rel="stylesheet" href="../swiper/swiper-3.4.2.min.css">
<script src="../swiper/swiper-3.4.2.min.js"></script>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide aa">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<div class="swiper-pagination"></div>
</div>
It does not work.
you can use this component made for Polymer which wraps around Swiper.js
Related
I'm working with bootstrap 4.4.1. My goal is to expand accordion one panel at a time and close other panels which are previously open. I couldn't achieve this. I noticed one more issue, that my goal is achieved when bootstrap 3.3.1 is used. I mean accordion open one panel at a time is working in bootstrap 3.3.1, but not working in 4.4.1.
Bootstrap 4.4.1
<div class="panel-group" id="accordion1">
<div class="panel panel-default">
<div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1" data-target="#collapseOne1">
<h4 class="panel-title">Collapsible Group Item #1</h4>
</div>
<div id="collapseOne1" class="panel-collapse collapse">
<div class="panel-body">...</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1" data-target="#collapseTwo1">
<h4 class="panel-title">Collapsible Group Item #2</h4>
</div>
<div id="collapseTwo1" class="panel-collapse collapse">
<div class="panel-body">...</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1" data-target="#collapseThree1">
<h4 class="panel-title">Collapsible Group Item #3</h4>
</div>
<div id="collapseThree1" class="panel-collapse collapse">
<div class="panel-body">...</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
Bootstrap 3.3.1
<div class="panel-group" id="accordion1">
<div class="panel panel-default">
<div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1" data-target="#collapseOne1">
<h4 class="panel-title">Collapsible Group Item #1</h4>
</div>
<div id="collapseOne1" class="panel-collapse collapse">
<div class="panel-body">...</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1" data-target="#collapseTwo1">
<h4 class="panel-title">Collapsible Group Item #2</h4>
</div>
<div id="collapseTwo1" class="panel-collapse collapse">
<div class="panel-body">...</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1" data-target="#collapseThree1">
<h4 class="panel-title">Collapsible Group Item #3</h4>
</div>
<div id="collapseThree1" class="panel-collapse collapse">
<div class="panel-body">...</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
Is it feasible to achieve this on bootstrap 4.4.1?
Thanks in advance
You need to set data-parent="#accordion1" property to div#collapseOne1, div#collapseTwo1 and div#collapseThree1 instead of your divs with class panel-title.
working example on codepen
You can also add class="accordion" to your wrapper (div#accordion1) and use cards to style your accordion. Refer to accordions
<div class="panel-group" id="accordion1">
<div class="panel panel-default">
<div class="panel-heading" data-toggle="collapse" data-target="#collapseOne1">
<h4 class="panel-title">Collapsible Group Item #1</h4>
</div>
<div id="collapseOne1" class="panel-collapse collapse show" data-parent="#accordion1">
<div class="panel-body">Body 1</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading collapsed" data-toggle="collapse" data-target="#collapseTwo1">
<h4 class="panel-title">Collapsible Group Item #2</h4>
</div>
<div id="collapseTwo1" class="panel-collapse collapse" data-parent="#accordion1" >
<div class="panel-body">Body 2</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" data-toggle="collapse" data-target="#collapseThree1">
<h4 class="panel-title">Collapsible Group Item #3</h4>
</div>
<div id="collapseThree1" class="panel-collapse collapse" data-parent="#accordion1">
<div class="panel-body">Body 3</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
following the documentation I try to implement a modal when you click on a button. What I did is the following.Inside a form I have a button:
<div class="col-12 offset-md-10">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdropLive"> Launch static backdrop modal
</button>
</div>
In the bottom of the code, over the scripts I have:
<div class="modal fade" id="staticBackdropLive" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLiveLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="staticBackdropLiveLabel">Modal title</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
</button>
</div>
<div class="modal-body">
<p>I will not close if you click outside of me. Don't even try to press escape key.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Understood</button>
</div>
</div>
</div>
</div>
The button appear correctly but when I click on it the modal doesn't show.
I have another modal for confirmation of logout and it works correctly. I'm using bootstrap 5.
Suggestions? Thanks
UPDATE: removing the -bs it works. Why this? I remember -bs is needed for bootstrap 5
The code you posted above is working fine. Check your HTML and CSS.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div class="col-12 offset-md-10">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdropLive"> Launch static backdrop modal
</button>
</div>
<div class="modal fade" id="staticBackdropLive" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLiveLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="staticBackdropLiveLabel">Modal title</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
</button>
</div>
<div class="modal-body">
<p>I will not close if you click outside of me. Don't even try to press escape key.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Understood</button>
</div>
</div>
</div>
</div>
EDIT
You probably didn't include Bootstrap 5, but Bootstrap 4 into your project.
Bootstrap 4:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
Bootstrap 5:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
please tell me why my modal in bootstrap 3 not showing
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal">Login</button>
<div class="fade modal" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-describedby="loginModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
tes
</div>
</div>
</div>
</div>
and this is my css include in my bootstrap
<link href="css/style.css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-theme.css" rel="stylesheet">
this is my js include in my bootstrap
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/docs.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="js/ie10-viewport-bug-workaround.js"></script>
Try this : Include Jquery , Bootstrap JS & CSS
Example
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"> Header</h4>
</div>
<div class="modal-body">
<p>Some text.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
I want to insert this modal box on my webpage, but I don't have the css of this code:
http://www.bootply.com/testazoid/14LH4kZul2#
you'r might be looking for this
<body onload="myFunction()">
<h1>Hello World!</h1>
<script>
function myFunction() {
alert("Page is loaded");
}
</script>
</body>
</html>
This modal from bootstrap. you need bootstrap JS and CSS
refer this https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_modal&stacked=h
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('#myModal').modal('show');
});
</script>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
I am trying to add an image slider to my page but when scrolling left on the image slider, it causes the side menu to reveal itself as well. I still want the side menu to work on the page, just not in the div containing the image slider.
Below are the relevant files with some sections omitted for brevity. Basically, a page called clients.html is injected between the ion-nav-view tags in index.html. This clients page has a custom directive called img-slider, whose html is defined in directive.html. The image slider has a container "swiper container", and this is the container in which I want the side menu to be disabled. Any dragging events outside this div should still trigger the left menu.
In case it's relevant, the image slider uses a third party library called Swiper.
index.html
<!DOCTYPE html>
<html>
<head>
...
</head>
<body ng-app="starter">
<ion-side-menus>
<!-- Center content -->
<ion-side-menu-content ng-controller="menuCtrl as vm">
<div class="list">
<div class="item">
<a href="#/clients">
<i class="icon ion-person-stalker"></i>
Clients
</a>
</div>
<div class="item">
<a href="#/appointments">
<i class="icon ion-calendar"></i>
Meetings
</a>
</div>
<div class="item">
<a href="#/products">
<i class="icon ion-pricetag"></i>
Products
</a>
</div>
<div class="item">
<a href="#/sales">
<i class="icon ion-social-usd"></i>
Sales
</a>
</div>
<div class="item" ng-click="vm.logout()">
Disconnect
</div>
</div>
</ion-side-menu-content>
<!-- Left menu -->
<ion-side-menu side="left">
</ion-side-menu>
<ion-side-menu-content>
<ion-nav-view></ion-nav-view>
</ion-side-menu-content>
</ion-side-menus>
</body>
</html>
clients.html
<ion-view view-title="Commercial: Clients">
<ion-header-bar align-title="center">
<h1 class="title">Commercial: Clients</h1>
<div class="buttons">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</div>
</ion-header-bar>
<ion-pane>
<ion-content>
<img-slider></img-slider>
</ion-content>
</ion-pane>
</ion-view>
directive.html
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
directive.js
(function () {
angular.module('starter')
.controller('directiveCtrl', ["$ionicSideMenuDelegate" , function ($ionicSideMenuDelegate) {
var vm = this;
$ionicSideMenuDelegate.canDragContent(false);
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
slidesPerView: 3,
paginationClickable: true,
spaceBetween: 30,
freeMode: true
});
}])
.directive('imgSlider', function() {
return {
restrict: 'E',
templateUrl: 'app/directives/directive.html',
controller: "directiveCtrl"
};
});
}());
I just modified your code by adding an ng-show tag it worked for me
<div class="swiper-container" ng-show="menu()">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
and in directive.js file
(function () {
angular.module('starter')
.controller('directiveCtrl', ["$ionicSideMenuDelegate" , function ($ionicSideMenuDelegate) {
var vm = this;
//$ionicSideMenuDelegate.canDragContent(false);
$scope.menu = function(){
$ionicSideMenuDelegate.canDragContent(false);
return true;
}
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
slidesPerView: 3,
paginationClickable: true,
spaceBetween: 30,
freeMode: true
});
}])
.directive('imgSlider', function() {
return {
restrict: 'E',
templateUrl: 'app/directives/directive.html',
controller: "directiveCtrl"
};
});
}());
If having any queries please reply me