Trying to replicate this simple jquery snippet I have from my old project into angular2. Basically selecting a carousel image index onclick="" or (click)="".
In jQuery its simple as the code below, however when I do the same in angular2 I get .carousel() is not a function. I've imported jQuery and bootstrap but the snippet below doesn't seems want to work.
// this works on plain jquery
selectImage = function() {
$('#myCarousel').carousel(2)
}
in my angular2 its pretty similar:--
import { carousel } from 'bootstrap';
import $ from "jquery";
declare var carousel: any;
// doesn't work shows the error below
selectImage() {
$('#myCarousel').carousel(2);
}
Trying to select image from this div
<button (click)="selectImage()"> Select image (2)</button>
<div class="carousel slide" id="myCarousel">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item" data-slide-number="0">
<img src="./assets/imgs/4d4853533136_01-lg.jpg"></div>
<div class="item" data-slide-number="1">
<img src="./assets/imgs/4d4853533136_03.jpg"></div>
<div class="item" data-slide-number="2">
<img src="./assets/imgs/4d4853533136_02.jpg"></div>
<div class="item" data-slide-number="3">
<img src="./assets/imgs/4d4853533136_04.jpg"></div>
</div>
</div>
Error message: ERROR TypeError: __WEBPACK_IMPORTED_MODULE_3_jquery___default(...)(...).carousel is not a function
Question is how can I do the same function as my jQuery snippet in angular2?
Bootstrap select specified image number Ref
You have to use [(activeSlide)]="activeSlideIndex" as below. Set "activeSlideIndex" in your click event Or any other event as per requirement
<carousel [interval]="myInterval" [noWrap]="noWrapSlides" [(activeSlide)]="activeSlideIndex">
<slide *ngFor="let slide of slides; let index=index">
<img [src]="slide.image">
<div class="carousel-caption">
<h4>Slide {{index}}</h4>
<p>{{slide.text}}</p>
</div>
</slide>
</carousel>
Related
What I want to do:
I have a bootstrap carousel and 5 divs. When I hover on the first div I want to show the first carousel-item...etc
What I did:
I deactivated the auto play with data-interval="false"
When hovering those controlling items, the following function is called:
function changeImage(index) {
$("#carousel").carousel(index); // index is the active carousel-item's index
}
What happened:
Before hovering on any controlling item, the carousel doesn't auto play.
After hovering on any controlling item, the carousel displays the expected carousel-item, however the carousel starts auto-playing.
What I tried:
Using Jquery I set the interval to false after each time I navigate in the carousel:
function changeImage(index) {
$("#carousel").carousel(index);
$('#carousel').carousel({
interval: false
})
}
But it didn't work.
Full code:
<div id="carousel" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div class="carousel-item">
<img src="..."/>
</div>
<div class="carousel-item active">
<img src="..."/>
</div>
<div class="carousel-item">
<img src="..."/>
</div>
<div class="carousel-item">
<img src="..."/>
</div>
</div>
</div>
<div id="controls">
<div onmouseover="changeImage(0)">1</div>
<div onmouseover="changeImage(1)">2</div>
<div onmouseover="changeImage(2)">3</div>
<div onmouseover="changeImage(3)">4</div>
<div onmouseover="changeImage(4)">5</div>
</div>
<script>
$('#carousel').on('slide.bs.carousel', function () {
$('#carousel').carousel({
interval: false
})
})
function changeImage(index) {
$("#carousel").carousel(index);
}
</script>
I'm trying to target dynamic added elements to work with lightgallery.js. See the exemple bellow:
<div id="animated-thumbs" class="page-divs-middle">
<!-- STATIC EXAMPLE -->
<div class="col-md-3 col-xs-3 text-nowrap spacer-page-models fit pulsar">
<a href="assets/img/01.jpg" data-lightbox="image-1">
<img class="img-responsive img-responsive-center cover" src="assets/img/01.jpg">
</a>
</div>
<div class="col-md-3 col-xs-3 text-nowrap spacer-page-models fit pulsar">
<a href="assets/img/01.jpg" data-lightbox="image-1">
<img class="img-responsive img-responsive-center cover" src="assets/img/01.jpg">
</a>
</div>
<!-- STATIC EXAMPLE -->
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#animated-thumbs').lightGallery({
thumbnail:true,
selector: 'a',
download:false,
share:false,
autoplayControls: false,
});
})
</script>
The code above is a static example that's demonstrate how to use lightgallery script, this works as expected. But I'm trying to make the script works adding elements dynamically, like this:
<div id="animated-thumbs" class="page-divs-middle">
<!-- Elements here were dynamically added -->
<!-- Elements here were dynamically added -->
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#animated-thumbs').lightGallery({
thumbnail:true,
selector: 'a',
download:false,
share:false,
autoplayControls: false,
});
})
</script>
JavaScript
var target = $('#animated-thumbs');
target.append('<div class="col-md-3 col-xs-3 text-nowrap spacer-page-models fit pulsar"><img class="img-responsive img-responsive-center cover" src="assets/img/01.jpg"></div>');
But it's not working because document was loaded previously. Someone can help me?
You need to append html to id="animated-thumbs" before initialising gallery, or reinitialize gallery after appending html.
Something like:
$('#animated-thumbs').lightGallery().destroy(true);
$('#animated-thumbs').append('<div><h3>some html to add</h3></div>');
$('#animated-thumbs').lightGallery({ //params });
Please note that this is just description code and it will not work if you just copy it. Check gallery documentation on how to call destroy method (usually they all have it) and apply it to your code. Or if there is 'reinit' method you can skip destroy and just reinit gallery after html appending.
I am trying to select the .next() div to work within a carousel.
However, it seems to be returning all .children() rather than the .next()
HTML
<nav class="slider-navigation">
<div class="left-arrow"></div>
<div class="right-arrow"></div>
</nav>
<div class="slides">
<div class="slide" id="slide1"></div>
<div class="slide" id="slide2"></div>
<div class="slide" id="slide3"></div>
<div class="slide" id="slide4"></div>
</div>
JQUERY
$(".left-arrow").click(function () {
var currentSlide = $(this).parent().siblings(".slides").children().next();
// Do something with currentSlide.
});
When I console.log(currentSlide) in the browser it returns all 4 children of .slides.
The same happens for $(".right-arrow").click() I just did not want to add duplicate code
Any help?
Thanks
another option is to set the first element to the "current" class and use it to start the navigation between the slides.
*on prev control click, if there is no element before this one so nothing will happen and vice versa, so that's ok but if you want it to change direction after the last/first element got the "current" class so tell me and i will update the code...
Here it is:
HTML:
<nav class="slider-navigation">
<div class="left-arrow">left</div>
<div class="right-arrow">right</div>
</nav>
<div class="slides">
<div class="slide current" id="slide1"></div>
<div class="slide" id="slide2"></div>
<div class="slide" id="slide3"></div>
<div class="slide" id="slide4"></div>
</div>
Jquery:
$(document).ready(function(){
$(".left-arrow").click(function(){
$('.current').prev().addClass('current');
$('.current:first').next().removeClass('current');
});
$(".right-arrow").click(function(){
$('.current').next().addClass('current');
$('.current:last').prev().removeClass('current');
});
});
live example: http://jsfiddle.net/spvLpjct (i've put some CSS to help you understand it).
If the current slide is visible and the rest are hidden you could use:
$(".left-arrow").click(function () {
var currentSlide = $(".slides > .slide:visible").next();
// Do something with currentSlide.
});
I'm trying to use a carousel thumbnails for my items, however the items are generated by another script, I'm trying to load the plugin for carousel but he can not identify the items.
My Real HTML:
<div class="prerecord_main">
<div id="merch">
</div>
</div>
after prepend by another script:
<div class="prerecord_main">
<div id="merch">
<div class="product-container"></div>
<div class="product-container"></div>
<div class="product-container"></div>
<div class="product-container"></div>
<div class="product-container"></div>
</div>
</div>
My jQuery Plugin
$(document).ready(function(){
var owl = $(".prerecord_main #merch");
owl.owlCarousel({
items : 5
});
});
does not work because it can not read the items "product-container"
There is a bootstrap carousel that is changing automatically:
<div id="carousel">
<div class="active"> </div>
<div class=""> </div>
<div class=""> </div>
<div class=""> </div>
</div>
Only one div is set to active at a time, and it cycles through like that.
How can I bind all of carousel's children to another element so that it can set it's specific child to be active as well.
For example:
<div id="copy-cat">
<li class=""> </li>
<li class=""> </li>
<li class=""> </li>
<li class=""> </li>
</div>
<div id="carousel">
<div class="active"> </div>
<div class=""> </div>
<div class=""> </div>
<div class=""> </div>
</div>
How can I bind copy-cat to have the same child active as carousel? Keep in mind, I don't want to copy all of the class attributes- just detect that one is active, and set that same numbered child to active also.
I'd use Bootstrap's slid event callback:
http://jsfiddle.net/isherwood/6xF7k/
$('#carousel').on('slid.bs.carousel', function () {
// get the index of the currently active panel
var myIndex = $(this).find('div.active').index();
// set the element with that index active, deactivating the others
$('#copy-cat').find('li').removeClass('active').eq(myIndex)
.addClass('active');
})
Notice that I changed #copy-cat to ul to make it valid HTML.
http://getbootstrap.com/javascript/#carousel-usage
Given an element x, you can get the index of x in its parent's .children() by calling x.index(). In your example, $("div.active").index() would return 0, the div following would return 1, etc. So you should be able to do something like the following:
$("#copy-cat :nth-child("+(1+$("#carousel div.active").index()) + ")").addClass("active");
(nth-child is 1-index-based, so you need to add 1. You could also call eq(), which is 0-based.)
See this jsFiddle for a rough example.
But this is only a general answer. If there are Bootstrap methods for this purpose, by all means use them.
The Bootstrap carousel has some events that you can tap into.
Information about the events can be found in the "Events" section under the Carousel documentation.
I would recommend doing something like:
<div id="copy-cat">
<div id="copy-1" class="active"></div>
<div id="copy-2" class=""></div>
<div id="copy-3" class=""></div>
<div id="copy-4" class=""></div>
</div>
<div id="carousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active" data-transition-to="#copy-1">
<p>something1</p>
</div>
<div class="item" data-transition-to="#copy-2">
<p>something2</p>
</div>
<div class="item" data-transition-to="#copy-3">
<p>something3</p>
</div>
<div class="item" data-transition-to="#copy-4">
<p>something4</p>
</div>
</div>
</div>
Add a listener as described in the event section, and inspect the relatedTarget.
Use the data-transition-to to figure out the class to add the active class to.
Javascript to support this approach:
$('#carousel').carousel({
interval:false //or whatever options you want
});
$('#carousel').on('slide.bs.carousel',function (event) {
$('#copy-cat .active').removeClass('active');
$(event.relatedTarget.dataset.transitionTo).addClass('active');
});
$('#carousel').carousel('next');
This is is the fiddle ...I disabled transitioning & you will have to inspect the DOM to see that the copy-cat div is being changed.