I'm using the Carousel from Bootstrap 5.0.2 in my (single-page) Vue 3 app. The carousel works fine when I initially open the page. However, when I navigate with the Vue router to another view and go back the Carousels automatic slide effect stops working. The controls are still working but theres just no automatic transition anymore. I can imagine that this has something to do with Vue removing the whole component from the DOM and later attaching again, but I have no idea how to fix that problem.
<template>
<div class="welcome">
<div id="carouselExampleSlidesOnly" class="carousel slide carousel-fade" data-bs-ride="carousel"
data-bs-pause="false" data-bs-interval="3000" style="width: 600px" >
<div class="carousel-inner">
<div class="carousel-item active">
<img src="../assets/welcome_slideshow/dummy_1.jpg" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="../assets/welcome_slideshow/dummy_2.jpg" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="../assets/welcome_slideshow/dummy_3.jpg" class="d-block w-100">
</div>
</div>
<!-- controls -->
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleSlidesOnly" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleSlidesOnly" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
-->
</div>
</div>
</template>
Notice you are using BS5. I recently hit this exact issue!
Not especially a solution, but after a lot of pain
mounted () {
// Bootstrap x Vue bug that stops the carousel working on navigating
new bootstrap.Carousel($("#exampleSelector")).cycle()
},
Whack this in your exports section.
This allows it to work every time, its a bit clumsy, but its a viable workaround for now. Know its a bit late, but saw you were the only other person suffering from this, maybe it will help someone else!
Think its an issue with Boostrap or Vue maybe both together.
Related
I'm using vue-slick-carousel to build a slider. I have an issue with image which I wrapped as a link. When I click on image redirect doesn't happen. Also I have a title under image which I wrapped as a link too, and with text it works great, but when I click on image it doesn't. It doesn't work only on mobile devices, on desktop when I click on image it makes redirect.
Here is my code:
<VueSlickCarousel
ref="slick"
v-bind="slickOptions"
class="post-category__slider"
>
<div
v-for="post in posts"
:key="`post-${post.id}`"
class="post-category__list-item"
>
<div class="row">
<div class="col-lg-6">
<div
class="post-category__list-item-image mb-4"
>
<a
:href="`/${item.slug}/${post.slug}`"
>
<img
:src="$store.state.env.panelUrl + post.get_thumbnail"
:alt="post.title"
>
</a>
</div>
</div>
<div class="col-lg-6">
<div class="d-lg-flex flex-lg-wrap flex-lg-column justify-content-lg-between h-100">
<div class="mb-4">
<h4 class="post-card__text-block-title">
<a :href="`/${item.slug}/${post.slug}`">
{{ post.title }}
</a>
</h4>
<div>
{{ post.short_story }}
</div>
</div>
</div>
</div>
</div>
</div>
</VueSlickCarousel>
Try adding pointer-events: none to the images. It should do the trick.
please share your properties for a better picture, also try adding only the property with its object something like this: :href="item.slug/post.slug", but for better reference provide your properties.
So I have this carousel in my home. I didn't do any specific config for the bootstrap carousel. I just left it with the default value. I don't initialize it in the JS.
Video :
https://drive.google.com/file/d/1zMANI5AWab1xO74kQbb4Rq8fRyvkMMNC/view?usp=sharing
So, it's working normally sometimes. But there is a case that happen randomly that the carousel freezes. After doing some research, turned out that the class of the carousel didn't change (see the video).
When I clicked the arrow, the carousel change the siblings of the .active class to .next.left then after that, the .next became the .active.
But sometimes it's stuck, and not changing. That's when it freezes.
And it's random, sometime even the second time click is already freezes.
But sometime, it took like 50+ clicks to get the error.
I've tried to research it and some of the forums here suggest to rearrange the script. I tried to load jquery first then bootstrap.js. But the freezes still occurs.
It should be running without problem and always responsive to the click.
Here's the code
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div id="banner-carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#banner-carousel" data-slide-to="0" class="active"></li>
<li data-target="#banner-carousel" data-slide-to="1"></li>
<li data-target="#banner-carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<h1>First</h1>
</div>
<div class="item">
<h1>Second</h1>
</div>
<div class="item">
<h1>Third</h1>
</div>
</div>
<a class="left carousel-control" href="#banner-carousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#banner-carousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
Update:
I've researched here and there, and there's one way that make it works.
https://gist.github.com/jonraasch/373874#file-jquery-support-transition-js
By adding that line, it works, but in logged some console error everytime it slides.
"Uncaught TypeError: Cannot convert undefined or null to object"
I have had a search and cannot find this exact problem so I hope the question is not duplicate.
First time users of Bootstrap 3.
From reading here and the bootstrap documentation I believe the navbar should have its own container such as:
<nav id="myNavbar" class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/index.html">My Site</a>
</div>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav">
<li class="active"><span class="glyphicon glyphicon-home"></span> Home</li>
<li><span class="glyphicon glyphicon-list-alt"></span> Services</li>
<li><span class="glyphicon glyphicon-info-sign"></span> About</li>
<li><span class="glyphicon glyphicon-envelope"></span> Contact</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">content goes here and this content is under the navbar</div>
</div>
The body of the page then has its own container. Is that Correct?
I have done that and then added a row but the first row content is under the navbar.
Have I missed something like a class that I should add to the first row to ensure it starts below the navbar and not after it?
I found a similar question where the answer was to ensure the navbar had "navbar-fixed-top" but I already have that.
Read documentation carefully.
According to Bootstrap navbar docs:
The fixed navbar will overlay your other content, unless you add padding to the top of the body. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.
body {
padding-top: 70px; // Your navbar height
}
Make sure to include this after the core Bootstrap CSS.
If I understand your problem correctly that you want content below the navbar just write
navbar-fixed
instead of
navbar-fixed-top
like this
<nav id="myNavbar" class="navbar navbar-default navbar-inverse navbar-
fixed"role="navigation">
it will work
see this fiddle fiddle
are you looking for this ???
This is caused by the Bootstrap class fixed-top, Fixed navbars use position: fixed, which pulls the Nav from the normal flow of the DOM.
For this to have an effect, having your content below the Navbar not overflow unto the Navbar, BootStrap Docs>> https://getbootstrap.com/docs/4.5/components/navbar/
Under the #Placement section, advise you to give custom CSS to the body.
Add some padding to the <body style="padding: somepadding"> element.
I want to make close function of card-reveal like FAB button.
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="http://materializecss.com/images/office.jpg">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right"></i></span>
<p>This is a link</p>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
</div>
</div>
Here is my JSFiddle
What I need? Although material design Icon now work in this example, I need to make "close" button as fab. It means, even card-reveal content scroll down, close button keeps position in card-reveal section and visible.
Is it possible?
The nature of the card component seems to make this tough to achieve without getting hacky and mixing strange CSS properties. I think the best I can achieve that still looks pleasing is a FAB that travels up and down with the card-reveal. Another solution may exist, but it may not be as clean.
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="http://materializecss.com/images/office.jpg">
</div>
<div class="card-content">
<span class="card-title grey-text text-darken-4">
Card Title
</span>
<a class="activator btn-floating red right"></a>
<p>This is a link</p>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">
Card Title
<a class="card-title btn-floating red right"></a>
</span>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
</div>
</div>
thanks for helping:
here is my objectif: make Make a fullscreen responsive slider on a homepage with joomla:
the main problem my template's slider position is in multiple container just like these
<div>
<div id="ja-slider" class="wrap ">
<div class="main">
<div class="main-inner1 clearfix">
<div class="ja-moduletable ;Position: slider" id="Mod104">
<div class="moduletable-inner clearfix">
<div class="ja-box-ct clearfix">
<div id="slider" class="favslider">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
what I wish is:
<div>
<div id="ja-slider" class="wrap ">
<div id="slider" class="favslider">
</div>
</div>
</div>
is there anyone could help? thanks a lots! I'm not a programmer but I understand html and CSS.
thanks again! hoping this thread could helps others!
You might be able to override the existing code using an extension like ReReplacer or similar:
http://extensions.joomla.org/extensions/edition/replace/4336