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.
Related
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 want the swiper gallery to show after clicking on a "Show the gallery" link.
But it looks like Swiper is not working properly if initialized inside a hidden div.
Here is my page:
<div>
<a href=“javascript:;” onclick=“toggle_visibility('gallery');”><img src=“img.jpg” alt=“Click to open the gallery”></a>
</div>
<div id=“gallery” style:“display:none”>
<!— Swiper —>
<div id=“slide-event” class=“swiper-container swiper-container-event”>
<div class=“swiper-wrapper”>
…
</div>
<!— Add Arrows —>
<div id=“show-hide” class=“swiper-button-next”></div>
<div id=“show-hide” class=“swiper-button-prev”></div>
</div>
<!— End Swiper —>
</div>
<script src="js/swiper.jquery.js"></script>
This workaround doesn't work for me:
function reinitSwiper(swiper) {
setTimeout(function () {
swiper.reInit();
}, 500);
}
Maybe there is another a javascript trick? Any suggestion?
I found out these listeners:
observer: true
observer
Set to true to enable Mutation Observer on Swiper and its elements. In this case Swiper will be updated (reinitialized) each time if you change its style (like hide/show) or modify its child elements (like adding/removing slides)
observeParents: true
observeParents
Set to true if you also need to watch Mutations for Swiper parent elements
try to call the method
swiper.update();
when you display the slider
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
I am using JS based Drag Slider DragDealer. The slider div is placed in a content slider that runs using jQuery. The Drag Slider works as long as its parent div is not animated to move to left by 200px.
Fiddle: http://jsfiddle.net/gentrobot/9b5Xg/3/
HTML:
<div style="position:relative;width:400px;height:100px;overflow:hidden;">
<div id="1" style="width:200px;float:left;position:absolute;left:0px;">
Test
</div>
<div id="2" style="width:200px;float:left;position:absolute;left:200px;">
<!-- Drag Slider div starts -->
<div id="my-slider" class="dragdealer">
<div class="red-bar handle">drag me</div>
</div>
<!-- Drag Slider div ends -->
</div>
</div>
Click to slide
jQuery(other than JS for Dragdealer):
$('#clk').click(function(){
$('#1').animate({left:'-200px'});
$('#2').animate({left:'0px'});
});
It works if you drag it to the right long enough, where it used to be before.
What you can have though is specifying a callback parameter that reinitializes the thing.
$('#2').animate({left:'0px'}, function(){
new Dragdealer('my-slider');
});
Normally you should append the element back again to avoid having the same listeners more than once. This is influenced by the way the plugin was written but you can do it like this just to be on the same side.
$('#2').animate({left:'0px'}, function(){
var t = $(this);
var random_placeholder = $('<div></div>').insertBefore(t);
$(this).insertAfter(random_placeholder);
random_placeholder.remove();
new Dragdealer('my-slider');
});