Owl Carousel 2 not showing navigation dots - owl-carousel-2

I am trying out owl-carousel 2.3.4 (https://owlcarousel2.github.io/OwlCarousel2/) - all is fine except that the navigation dots are not showing. They aren't images so I don't know why it's not loading. I was wondering what I am doing wrong. I can see that it's working here (https://codepen.io/Ittisafur/pen/ggqzwY) but this uses owl-carousel version 1.3.3.
<style type="text/css">
.owl-carousel div.content
{
box-sizing:border-box;
background-color:#fff;
border:1px solid red;
min-height:150px;
padding:10px;
margin:10px;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<div class="owl-carousel">
<div class="content">
<p>Text 1</p>
</div>
<div class="content">
<p>Text 2</p>
</div>
<div class="content">
<p>Text 3</p>
</div>
<div class="content">
<p>Text 4</p>
</div>
<div class="content">
<p>Text 5</p>
</div>
<div class="content">
<p>Text 6</p>
</div>
<div class="content">
<p>Text 7</p>
</div>
<div class="content">
<p>Text 8</p>
</div>
<div class="content">
<p>Text 9</p>
</div>
<div class="content">
<p>Text 10</p>
</div>
</div>
<script>
$(document).ready(function()
{
$('.owl-carousel').owlCarousel(
{
center:false,
items:5,
loop:true,
margin:10,
dots: true,
autoplay:true
});
});
</script>

Add the owl-theme class to your container:
<div class="owl-carousel owl-theme">

Add the owl-theme class to your container:
<div class="owl-carousel owl-theme">
<div class="pr-2 pl-2 item"> </div>
<div class="pr-2 pl-2 item"> </div>
</div>

Related

toggle accordion only with icon & add a click event on button

I want to toggle the accordion only with the icons to add a click event on the button. How do I do this? I have tried this--
<html>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<div id="app">
<div id="t_accordion">
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header " id="headingOne">
<button #click="toggleTheme" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
User
</button>
</h2>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button #click="toggleTheme" class="accordion-button " type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
View
</button>
</h2>
</div>
<div>
<div id="collapseOne" class="accordion-collapse collapse " aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>User Content</strong>
</div>
</div>
<div id="collapseTwo" class="accordion-collapse collapse show" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>View Content</strong>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Don't forget to include Vue from CDN! -->
<script src="https://unpkg.com/vue#2"></script>
<script>
new Vue({
el: '#app', //Tells Vue to render in HTML element with id "app"
data() {
return {
message: 'Hello World!'
}
},
methods:{
toggleTheme(){
// alert('clicked')
this.isActive = !this.isActive;
}
}
});
</script>
<style>
.accordion-button {
pointer-events:none;
}
.accordion-button::after {
pointer-events: all;
}
</style>
</html>
In this snippet The toggle on icon is working but Click event on button does not work.
How do I do the accordion toggle on icon & click event on button separately?
I just split the button in two ways
<html>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<div id="app">
<div id="t_accordion">
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header " id="headingOne">
<button class="d-flex bg-white mx-auto">
<a #click="toggleTheme">User</a>
</button>
</h2>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="d-flex bg-white mx-auto">
<a #click="toggleTheme">View</a>
</button>
</h2>
</div>
<div>
<div id="collapseOne" class="accordion-collapse collapse " aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>User Content</strong>
</div>
</div>
<div id="collapseTwo" class="accordion-collapse collapse show" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>View Content</strong>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Don't forget to include Vue from CDN! -->
<script src="https://unpkg.com/vue#2"></script>
<script>
new Vue({
el: '#app', //Tells Vue to render in HTML element with id "app"
data() {
return {
message: 'Hello World!'
}
},
methods:{
toggleTheme(){
// alert('clicked')
this.isActive = !this.isActive;
}
}
});
</script>
<style>
.accordion-button {
pointer-events:none;
}
.accordion-button::after {
pointer-events: all;
}
</style>
</html>

Add Vertical Lines inside Cards

I want to make such a card with a bootstrap meaning I want to divide it into three parts regardless of what the card contains of data and icons
But I was not able to divide it into three parts, how can I do that?
And I was able to display the card in this way:
How can i solve this problem?
Card.vue:
<template>
<div>
<div class="card bg-light mb-3 mr-50" style="max-width: 25rem; height: 10rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Light card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make</p>
</div>
</div>
</div>
</template>
<script>
</script>
<style>
</style>
Is this what your looking for ? You can use bootstrap grid for this, Checkout the docs
.row{
background-color: #efefef;
}
.col{
background-color: white;
margin: 5px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="card">
<div class="container-fluid">
<div class="row">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
</div>

Web page layout with bootstrap-4.1.2

My goal is to get like this.
I use bootstrap-grid.min.css from bootstrap-4.1.2
What do I do wrong? My code
<div class="wrapper d-flex flex-column" style="min-height: 100vh;">
<section class="main d-flex flex-grow-1">
<div class="container-fluid d-flex align-items-stretch">
<div class="row">
<div class="col-md-3">
<div class="menu">
Aside
</div>
</div>
<div class="col-md-9">
<div class="text">
Main
</div>
</div>
</div>
</div>
</section>
<footer class="footer">
Footer
</footer>
</div>
You need to make changes in your structure. I have made some changes for you, please see if it serves the purpose.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<header class="footer">
Header
</header>
<div class="wrapper d-flex flex-column" style="min-height: calc(100vh - 24px);">
<section class="main d-flex flex-grow-1">
<div class="container-fluid">
<div class="row" style="height:100%;">
<div class="col col-md-3" style="background-color:blue;">
<div class="menu">
Aside
</div>
</div>
<div class="col col-md-9" style="background-color:pink;">
<div class="text">
Main
</div>
</div>
</div>
</div>
</section>
<footer class="footer">
Footer
</footer>
</div>

Bootstrap 3 tabs not work correctly

um developing a website and that should has few tabs according to my dream,
but thing is when I click a tab it shows only contents which is between heading tag,not P tags,
Here's my code.please help me to fulfill my dream :-D
<div class="panel panel-default">
<div class="panel-body tabs">
<ul class="nav nav-pills" data-tabs="tabs">
<li class="active">Tab1
</li>
<li>Tab2
</li>
<li>Tab3
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1">
<h4>Heading1</h4>
<p>text</p>
</div>
<div class="tab-pane fade" id="tab2">
<h4>Heading2</h4>
<p>text</p>
</div>
<div class="tab-pane fade" id="tab3">
<h4>Heading3</h4>
<p>text</p>
</div>
</div>
</div>
</div>
I think you were missing the jQuery link.
The code works.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="panel panel-default">
<div class="panel-body tabs">
<ul class="nav nav-pills" data-tabs="tabs">
<li class="active">Tab1
</li>
<li>Tab2
</li>
<li>Tab3
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1">
<h4>Heading1</h4>
<p>text in p</p>
</div>
<div class="tab-pane fade" id="tab2">
<h4>Heading2</h4>
<p>text in p</p>
</div>
<div class="tab-pane fade" id="tab3">
<h4>Heading3</h4>
<p>text in p</p>
</div>
</div>
</div>
</div>
Output :
You need to Enable tabbable tabs via JavaScript
<script>
$('.nav-pills a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
</script>

Dijit Layout: How to display ContentPanes inline?

In the following HTML, I want to display the two ContentPanes in the top region beside each other. In normal HTML this could be done using spans, or display: inline. How can this be achieved in Dijit?
<div>
<div data-dojo-attach-point="_containerNode" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="gutters: false, design: 'headline'">
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'top'">
</div>
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'top'">
</div>
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'center'">
</div>
</div>
Wrap the two divs in another BorderContainer like:
<div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="gutters: false, design: 'headline'">
<div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region: 'top', gutters: false">
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'left'"> </div>
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'right'"> </div>
</div>
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'center> </div>
</div>