arch/bootstrap4
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

bootstrap and Jquery

Browse Source
This commit is contained in:
QkoSad
2022-10-17 16:48:37 +03:00
parent c9c4feead2
commit 523f2b2a4e
2 changed files with 43 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/styles.css
+6
View File
@@ -56,4 +56,10 @@ body{
top: 0;
left: 0;
min-height: 300px;
}
#carouselButton {
right:0px;
position: absolute;
bottom: 0px;
z-index: 1;
}
index.html
+37 -8
View File
@@ -159,13 +159,26 @@
<div class="form-group row">
<div class="col-12 col-sm-2 col-form-label">Selection</div>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-success active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Non-Smoking
</label>
<label class="btn btn-danger">
<input type="radio" name="options" id="option2" autocomplete="off"> Smoking
</label>
</div>
<label class="btn btn-success active">
<input
type="radio"
name="options"
id="option1"
autocomplete="off"
checked
/>
Non-Smoking
</label>
<label class="btn btn-danger">
<input
type="radio"
name="options"
id="option2"
autocomplete="off"
/>
Smoking
</label>
</div>
</div>
<div class="form-group row">
<label class="col-12 col-sm-2 col-from-label"
@@ -317,6 +330,9 @@
>
<span class="carousel-control-next-icon"></span>
</a>
<button class="btn btn-danger btn-sm" id="carouselButton">
<span id="carousel-button-icon" class="fa fa-pause"></span>
</button>
</div>
</div>
</div>
@@ -465,5 +481,18 @@
<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
<script>
$("#carouselButton").click(function () {
if ($("#carouselButton").children("span").hasClass("fa-pause")) {
$("#mycarousel").carousel("pause");
$("#carouselButton").children("span").removeClass("fa-pause");
$("#carouselButton").children("span").addClass("fa-play");
} else if ($("#carouselButton").children("span").hasClass("fa-play")) {
$("#mycarousel").carousel("cycle");
$("#carouselButton").children("span").removeClass("fa-play");
$("#carouselButton").children("span").addClass("fa-pause");
}
});
</script>
</body>
</html>