I have a Bootstrap.js Carousel based on this tutorial , it has 4 view item , each one looks like that -
<div class="item active"><!-- class of active since it's the first item -->
<div class="carousel-caption">
<p>Caption text1 here</p>
</div>
</div>
Demo here - http://jsfiddle.net/urielz/yu4qE/3/
it also has right and left buttons which slide the content on the menu according the the items order .
So my question is -
Which command (probably any jQuery selector) would cause to load a specific "item" to the menu ?
For example , something like - $('.carousel')[3].showOnMenu(...) to load the 4nd item on the menu .
use .carousel(number)method in carousel
$(document).ready(function(){
$('.carousel').carousel({
interval: 7000
});
$('.carousel').carousel(2);// use this here it index 0 base
});
UPDATED FIDDLE
reference http://getbootstrap.com/javascript/#carousel
Related
I am new to Angular & using an owl carousel in my application. My catch is to display the index of current slide and total number of slides present in the carousel. The current slide index should change with changing slides. For your reference, my HTML is below:
<div class="carousel-custom-nav">
<img src="assets/carousel-prev.svg" class="jo-carousel-prev" (click)="carousel.previous()" />
<p class="mr-ml-10">Active Slide Index / Total No. of Slides</p>
<img src="assets/carousel-next.svg" class="jo-carousel-next" (click)="carousel.next()" />
</div>
By now you might have understood, I actually want to change the paragraph content with respective numbers.
I tried the owl events available in its documentation but couldn't achieve in angular.
I'm trying to set the start position in a fullscreen MaterializeCSS carousel. I want to use it as a gallery image viewer inside a fullscreen modal.
Once gallery image is clicked, the modal opens and the image slider should start at the clicked image. Inside the documentation of MaterializeCSS I couldn't find any important information for that.
Currently the carousel slides to the right image. I only want to delete the slide effect on start and activate it after viewing the first image.
Two of many images to open:
<div class="gallery-item-left col s12 m6">
<img class="responsive-img gallery-item" alt="gallery-image-1" data-position="1" src="...path-to-image-1..." />
</div>
<div class="gallery-item-right col s12 m6">
<img class="responsive-img gallery-item" alt="gallery-image-2" data-position="2" src="...path-to-image-2..." />
</div>
...
My jQuery code
jQuery(document).ready(function($) {
$('body').on('click', '.gallery-item', function() {
var position = $(this).data('position');
$('#img-viewer-modal').modal('open');
$('#img-viewer-carousel').carousel({fullWidth: true, duration: 400});
$('#img-viewer-carousel').carousel('set', [position - 1]);
});
#img-viewer-carousel is simply the carousel id inside my modal.
I'm very thankful for every tip.
The only workaround I've found is to dynamicly change the content items of the carousel.
See example under https://www.codeply.com/go/EiubFqcKcg
I am working on a website in which I want to hide next and previous buttons when there is only one image on the carousel and show next and previous buttons when there are multiple images.
The php code which I have used which I have used in order to rendered multiple images at the front end are:
<div class="col-9 text-center border-right px-0">
<div id="owl_item_images" class="owl-carousel owl-theme">
<?php
if(isset($data['item']->gallery))
{
foreach ($data['item']->gallery as $gallery)
{
echo '<div class="item">
<div class="item_image_wrapper mx-auto">
<img class="item_images_carousel" src="'.$gallery->url.'">
</div>
</div>';
//'.$gallery->url.';
}
}
?>
</div>
</div>
Problem Statement:
I am wondering what carousel code I need to add so that next and previous buttons show up when there are multiple images, and no next and previous buttons show up when there is single image.
What I have tried:
<script>$('#owl_item_images').owlCarousel({nav : false});</script> By using that, all images get visible (with images lining up side by side) inside the carousel.
I also tried with the following code:
$('#owl_item_images').trigger('change.owl.carousel', { nav: true }); but it didn't work as well.
Not tried it but this should do the trick:
if(size($data['item']->gallery)<=1)
{
echo "<script>
$(function(){
$('#owl_item_images').owlCarousel({nav : false});
});
</script>";
}
put this after foreach loop
If I am not missing something, what you asked for is pretty much out of the box.
if you set nav:true owl.carousel itself will show navigation if there is more than one item, and no navigation if there is only one item, as seen in that pen:
https://codepen.io/optionsit/pen/BPGzvV
what version of owl.carousel are you using? and do you have anymore markup in your carousel?
You can count the number of images in the carousel using jQuery. Then, only show the nav if there is more than one image.
Try this:
<script>
var imageCount = $('#owl_item_images .item_images_carousel').length;
var showNav = false;
if (imageCount > 1) showNav = true;
$('#owl_item_images').owlCarousel({nav : showNav});
</script>
I am using a carousel jquery plugin that doesn't have a built in thumbnail nav, so I am trying to build a poor-man's version.
I'm using the Owl Carousel plugin.
So what I need, for this instance, to happen is that if a slide div in the main carousel has a class .active, then I need to have a div in the second carousel, which has the same index, to get a class active.
Main carousel code:
<div id="slide1">
<div class="owl-wrapper-outer">
<div class="owl-wrapper">
<div class="owl-item"></div>
<div class="owl-item active"></div>
<div class="owl-item"></div>
</div>
</div>
</div>
Then here is the carousel which I am using as a nav:
<div id="slide2">
<div class="owl-wrapper-outer">
<div class="owl-wrapper">
<div class="owl-item"></div>
<div class="owl-item"></div> <!-- this should automatically get .active added -->
<div class="owl-item"></div>
</div>
</div>
</div>
I am not sure how to get the index of both elements, then add class active to #slide2 so that they match.
Ok, here is an update, thanks to the code provided by Michael Schmuki. I added this code to a function that is already being used when the slide moves.. and it works.. however, in my slideshow for #slide1, it shows two slides at once. The good thing is is that both of these slides have the active class added automatically, but when I added in this code, only one of the thumbnails in #slide2 get the active class. Is there a reason it isn't picking up both active slides?
Here's the part of the function I'm using:
function animateIn(carousel){
var carousel = $('#slide1');
var nthChildActive = $(this).find(".active").index() + 1;
$('#slide2 .owl-item .slide.active').removeClass('active');
$("#slide2 .owl-wrapper .owl-item:nth-child("+nthChildActive+")").addClass("active");
}
And here is where it is set up in Owl Carousel
carousel.owlCarousel({
items: 2,
pagination:false,
stopOnHover:true,
afterMove: function() {
animateIn();
}
});
You can detect and mark the (multiple) active elements like this:
//detect & mark
$("#slide1 .owl-item").each(function(index) {
if($(this).hasClass("active"))
$("#slide2 .owl-item:nth-child("+(index+1)+")").addClass("active");
});
You can play with the new example on http://jsbin.com/oHOyEZi/7/edit?js,output
But I'm not familiar with Owl Carousel, so you have to figure out by yourself how to specify, that this logic will be fired when the carousel actually slides.
I have implemented jQuery masonry to our site and it works great. Our site is dynamic and users must be able to add/remove masonry box's. The site has an add example but no remove example. Our db is queried returning x number of items. Looping through they are loaded and displayed. Here's a code sample: (we are use F3 framework and the F3:repeat is it's looping mechanism.).
<div id="container" class="transitions-enabled clearfix" style="clear:both;">
<F3:repeat group="{{#productItems}}" value="{{#item}}">
<div id="{{#item.itemId}}">
<div class="box">
<div class="view"> <!-- for css -->
<a onclick='quickRemove("{{#item.itemId}}")>
<img src="{{#item.pic}}" />
</a>
</div>
<p>
{{#item.title}}
</p>
</div>
</div>
</F3:repeat>
</div>
In the javascript code the item id number is unique and is passed into the function. It's also the div id# to distinguish each box. I've tried various combinations and methods but can't seem to get this to work.
function quickRemove(item){
var obj = $('#'+item+'').html(); // item is the product id# but also the div id#
$('#container').masonry('remove',obj);
$('#container').masonry('reloadItems');
$('#container').masonry('reload');
}
Has anyone out there successfully removed an item and how did you do it?
Thx.
Currently you appear to be passing a string full of html to the masonry remove method. Pass it the actual jQuery wrapped element by not including .html()
function quickRemove(item){
var obj = $('#'+item+''); // item is the product id# but also the div id#
$('#container').masonry('remove',obj);
$('#container').masonry('reloadItems');
$('#container').masonry('reload');
}