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"
Related
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.
I see the indicators in the carousel where I can click an element to go to the next slider or the previous slider. Is it possible to directly slide to a specified carousel item from controls external to the carousel?
I was trying to add an external panel (to the carousel component) with links to specific slides. I'm trying to do something like the jquery news slider used at easy-quiz.net. This is a jquery extention and have the callback working to change the highlighted item but want to be able to click one of the items and get the carousel to focus on the corresponding item.
The easiest thing to achieve that is to mark up the external controls both with the data-target and the data-slide-to attributes. data-target identifies the carousel by id, while data-slide-to identifies the slide within the carousel with an integer (starting with 0).
Please see the example below with pure Bootstrap 4 markup and without additional javascript.
<div class="d-flex">
<!-- “External” carousel controls -->
<div id="external-controls" class="col-auto btn-group-vertical" role="group" aria-label="External carousel buttons">
<button class="btn btn-primary" data-target="#main-carousel" data-slide-to="0" type="button">First slide</button>
<button class="btn btn-primary" data-target="#main-carousel" data-slide-to="1" type="button">Second slide</button>
<button class="btn btn-primary" data-target="#main-carousel" data-slide-to="2" type="button">Last slide</button>
</div>
<!-- Carousel -->
<div id="main-carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="http://placehold.it/400x225/422040/fff?text=Slide+1" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://placehold.it/400x225/e57a44/fff?text=Slide+2" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://placehold.it/400x225/e3d985/fff?text=Slide+3" alt="Third slide">
</div>
</div>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>
Other than that, you can always use the .carousel(number) method via javascript in order to slide to a specific slide item.
So, in case you would like to create a custom –maybe simpler– markup, you could do so by writing up something as follows.
$('#external-controls').on('click', 'a', function(event) {
event.preventDefault();
// `this` is the clicked <a> tag
// `$.index()` returns the position of `this` relative to its sibling elements
var target = $(this).index();
$('#main-carousel').carousel(target);
})
<div class="d-flex">
<!-- “External” carousel controls -->
<div id="external-controls" class="col-auto btn-group-vertical" role="group" aria-label="External carousel buttons">
<a class="btn btn-primary" href="#">First slide</a>
<a class="btn btn-primary" href="#">Second slide</a>
<a class="btn btn-primary" href="#">Last slide</a>
</div>
<!-- Carousel -->
<div id="main-carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="http://placehold.it/400x225/422040/fff?text=Slide+1" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://placehold.it/400x225/e57a44/fff?text=Slide+2" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://placehold.it/400x225/e3d985/fff?text=Slide+3" alt="Third slide">
</div>
</div>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>
Yes it is Possible, I personally use Revolution slider to achieve this.
Check out this website where I used the carousel: http://4kaststrategies.com/
at the footer of the carousel, you will see a tiny round button where you can navigate to any of the item image you want.
look up the documentation: https://www.themepunch.com/revsliderjquery-doc/slider-revolution-jquery-5-x-documentation/
Did you skip the Carousel With indicators in the documentation? That example is showing you how you can directly slide to a particular item.
The following code is being used to achieve this:
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
Notice the attribute data-slide-to.
<button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
The simple way to use slide carousel using external button or image or anything is :
By using,
data-bs-target="(idname)"
data-bs-slide-to="(array number)"
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>
Why aren't the carousel-indicators or carousel-controls working here...
<div id="#myCarousel" class="carousel slide" data-ride="carousel">
<!-- 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>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active" id="slide1">
<div class="container">
<div class="carousel-caption">
<h2>Title</h2>
<p>Text...p>
<p><a class="btn btn-md btn-success" href="#" role="button">Button</a></p>
</div>
</div>
</div>
<div class="item" id="slide2">
<div class="container">
<div class="carousel-caption">
<h2>Factors Suite</h2>
<p>Enjoy a luxury stay in the Factors Suite which features furniture crafted from reclaimed timber and works by contemporary Scottish artists.</p>
<p><a class="btn btn-md btn-info" href="#" role="button">View Gallery</a></p>
</div>
</div>
</div>
</div><!-- end carousel-inner -->
<a 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>
</a>
<a 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>
</a>
</div><!-- end carousel -->
At the foot of my page I have:
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/docs.min.js"></script>
I have tried using bootstrap.js instead - that doesn't work. Driving me mad this because I have the Carousel example from the Bookstrap 3 website, which works when I test it, and it is identical!
This is all live at the following URL:
http://www.cairnsmorecottages.co.uk/rickwood/index.php
Hoping some bright spark will spot the glaring mistake because there clearly is one here (my conception?)! Thank you.
NJ
Why ID from DIV <div id="#myCarousel" class="carousel slide" data-ride="carousel"> include '#' character?
Remove '#' from id
EDITED AFTER COMMENTS:
Review your html div tags. You can compare your html with this:
https://jsfiddle.net/35esebmp/
check this solution, work fine for me
$(document).ready(function(e) {
$(".carousel-indicators").click(function(){
$(".carousel").carousel('prev');
})
$(".left").click(function(){
$(".carousel").carousel('prev');
})
$(".right").click(function(){
$(".carousel").carousel('next');
})
});
i have downloaded a bootstrap carousel template and everything works fine aside from the controls of the carousel. I can see the controls but nothing happens when i click on the left or right control. Any help would be much appreciated. Here are (what i think are) the relevant lines of code:
thanks for your help !
<!-- Carousel
================================================== -->
<div 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>
<div class="carousel-inner">
<div class="item active">
<div class="carousel-caption">
<h1>Bootstrap 1 Carousel Layout</h1>
<p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p>
</div>
</div>
</div>
<div class="carousel-inner">
<div class="item">
<div class="carousel-caption">
<h1>Bootstrap 2 Carousel Layout</h1>
<p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p>
</div>
</div>
</div>
<div class="carousel-inner">
<div class="item">
<div class="carousel-caption">
<h1>Bootstrap 3 Carousel Layout</h1>
<p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p>
</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>
</div>
<!-- /.carousel -->
here are the script references:
<!-- script references -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
I think you misunderstood the documentation. There should be only ONE <div class="carousel-inner">. This is the wrapper for your "items". Change your html between the indicators and the controls like this and you should have more success:
<div class="carousel-inner">
<div class="item active">
<div class="carousel-caption">
<h1>Bootstrap 1 Carousel Layout</h1>
<p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p>
</div>
</div>
<div class="item">
<div class="carousel-caption">
<h1>Bootstrap 2 Carousel Layout</h1>
<p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p>
</div>
</div>
<div class="item">
<div class="carousel-caption">
<h1>Bootstrap 3 Carousel Layout</h1>
<p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p>
</div>
</div>
</div>
Also, if you want the carousel to automatically begin cycling on load, you can add: data-ride="carousel"To the outermost div (the one with your id)
EDIT: One other thing I forgot to mention...
If you don't add some content to the item div, you won't see anything, not even your captions. That's because the captions are set to the bottom of the item div. If you just want to test things out without the content, just add the following css to cause the item div to have some height (I also added a background color so the white text will show up better against the white background):
div.item {
height: 500px;
background-color: green;
}