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>
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 bought a html template in themeforest and customized. It has a slider with 3 images. I want to stop the slider after completing 1 loop.
<div id="slider" data-auto="true">
<div id="slide1"><img></div>
<div id="slide2"><img></div>
<div id="slide3"><img></div>
</div>
Now I want to change parent div's attribute to false when slide3 div loads. I'm trying this now.
<script>
$(document).ready(function(){
$("#slide3").load(function(){
$("slider").attr("data-auto", false);
});
});
</script>
I believe data-auto tag simply starts the slider automatically. try searching options like loop: into the js init script to disable slider looping
I can't seem to work out how to get my first accordion panel to open automatically. Problem is, I can't set it to active as it is displaying data with PHP from a database so if I set the div to "active-panel" it applies it to all the panels. Any help would be great! Just to clarify, I'm just trying to get the first one to open automatically. Code:
$('.panel-holder').click(function () {
$(this).closest('.accordion').find('.panel-holder').removeClass('active-panel');
$(this).addClass('active-panel');
PHP
echo "<div class='panel-holder'>
<div class='panel-title'>". $results['job_title'] ."
<i class='icon arrow_carrot-down'></i>
</div>
<div class='panel-content'>
<p class='lead'>". $results['job_summary'] ."</p>
<p>". $results['job_description'] ."</p>
</div>
</div><!--end of individual accordian panel-->";
Just add the "active-panel" class to the first item in PHP only. Are those generated in a loop? Just create a counter variable that increases in every run of the loop. If this counter == 1 (or 0 if you want to start with 0 ;) ) add the css class to your markup.
Ended up creating the following solution:
$('.panel-holder').each(function () {
$(this).closest('.accordion').find('.panel-holder:first').addClass('active-panel');
});
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 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.