Develop Reference

Owl Carousel change content of the element on click

I have a problem with owl carousel and till now I don't have any ideas how to fix it.
So on the image 1 you can see the normal behaviour of the slider. On the second one you will see the extended functionality of it. The idea is very simple, when user click on the element, he should expand it, but when the element is expanded all other element goes to 2 rows and I don't want to happen.
Image 1
Image 2
also Source code of one element
<div class="element box-shadow">
<div class="child">
<div class="row">
<div class="col-xs-12 col-md-8">
<span>05.</span>
<h3>Graphic Designer</h3>
<p class="inventive">Inventive Studio</p>
<p class="view-more">View more <img src="assets/images/view-more.svg" /></p>
</div>
<div class="col-xs-12 col-md-4 portfolio-image" >
<img src="assets/images/inventive-small-img.png" />
</div>
</div>
</div>
<div class="parent hidden">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="row">
<div class="col-xs-12 col-md-8">
<div class="row " style="margin-bottom: 15px;" >
<div class="col-xs-12 col-md-3">
<img src="assets/images/inventive-small-img.png" style="width:34px" class="rounded-circle">
</div>
<div class="col-xs-12 col-md-9 text no-padding" >
<h3>Graphic Designer</h3>
<p class="inventive">Inventive Studio</p>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4 social-el" style="padding-left:0;">
<div class="stars">
<img class="mr-2" src="assets/images/full_star.svg" />
<img class="mr-2" src="assets/images/full_star.svg" />
<img class="mr-2" src="assets/images/half_star.svg" />
<img class="mr-2" src="assets/images/empty_star.svg" />
<img src="assets/images/empty_star.svg" />
</div>
</div>
</div>
<img src="assets/images/inventive-studio-img.png" class="img-fluid">
<div class="content">
<p >Designing and producing catalogs, sales sheets, proposals, scenario illustrations, brochures, posters, custom displays for trade shows and in-house exhibits and all others items.</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<a class="view-less" href="#"><img src="assets/images/view-more.svg"/> View Less</a>
</div>
<div class="col-xs-12 col-md-6">
<div class="stars">
<img src="assets/images/Facebook.svg"/>
<img class="mr-10" src="assets/images/twitter.svg"/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
also will share and jquery code
$(".owl-carousel").owlCarousel({
margin:10,
loop: true,
autoWidth: true,
items:3,
rewind: true,
autoplay: true,
responsiveClass:true,
});
$('.work').each(function(i, el) {
$parent = $(el);
$('.element', $parent).each(function(i, item) {
$element = $(item)
$element.on('click', function(e) {
$current = $(this)
console.log($current)
if ($('.parent', $current).hasClass('hidden')) {
$('.parent', $current).removeClass('hidden');
$current.addClass('expand-element');
$current.css('border-radius', 10)
$('.child', $current).addClass('hidden');
} else {
$current.removeClass('expand-element');
$('.parent', $current).removeClass('visible').addClass('hidden');
$current.css('border-radius', 20)
$('.child', $current).removeClass('hidden');
}
})
})
})

How to hide next and previous buttons for a single image in carousel?

I am working on a website in which I want to place next and previous buttons on images so that its easy for the users to navigate through the images.
The php code which I have used with carousel classes are:
<div class="text-center border-right px-0">
<div id="owl_item_images" class="owl-carousel owl-theme">
<?php
if(isset($data['item']->media))
{
foreach ($data['item']->media as $media)
{
echo '<div class="item">
<div class="item_image_wrapper mx-auto">
<img class="item_images_carousel" src="'.$media->url.'">
</div>
</div>';
//'.$media->url.';
}
}
?>
</div>
</div>
The HTML code rendered at the front end is:
<div id="owl_item_images" class="owl-carousel owl-theme owl-loaded owl-drag">
<div class="owl-stage-outer owl-height" style="height: 350px;">
<div class="owl-stage" style="transform: translate3d(-7677px, 0px, 0px); transition: 1.5s; width: 8530px;">
<div class="owl-item">
<div class="item">
<div class="item_image_wrapper mx-auto">
<img class="item_images_carousel" src=".jpg">
</div>
</div>
</div>
<div class="owl-item">
---
</div>
<div class="owl-item">
---
</div>
<div class="owl-item">
---
</div>
<div class="owl-item active" style="width: 853px;">
<div class="item">
<div class="item_image_wrapper mx-auto">
<img class="item_images_carousel" src=".jpg">
</div>
</div>
</div>
</div>
</div>
<div class="owl-nav disabled">
<div class="owl-prev">prev</div>
<div class="owl-next">next</div>
</div>
<div class="owl-dots">
<div class="owl-dot"><span></span></div>
<div class="owl-dot"><span></span></div>
<div class="owl-dot"><span></span></div>
-
-
-
-
<div class="owl-dot active"><span></span></div>
</div>
</div>
Problem Statement:
I am wondering what changes I should do in the PHP code (as html code is rendered at the front end) above so that previous/next buttons are visible.
UPDATE:
On removing display none I can see next and previous buttons but I am wondering still how I can hide next and previous buttons from a single image.
<div class="owl-nav disabled">
<div class="owl-prev">prev</div>
<div class="owl-next">next</div>
</div>
.owl-carousel .owl-dots.disabled, .owl-carousel .owl-nav.disabled {
/* display: none; */
}

For owl carousel navigation is disabled by default. We have to enable it while initializing the carousel.
$(document).ready(function(){
$(".owl-carousel").owlCarousel({
nav : true;
});
});
You can refer this link for additional options

The owl-carousel will automatically disable the owl-prev and owl-next if there is only one item in the list.
So first verify that you have more than one item in the list. Try examples with increasing numbers of items and see when/if owl-prev and owl-next appear. There is logic in the library to disable the control under certain circumstances.
Otherwise look to link below that suggests ways to change the owl library class to avoid the problem under certain circumstances.
https://github.com/OwlCarousel2/OwlCarousel2/issues/1809

Not sure if i fully understand your question but maybe remove "disabled" from here:
<div class="owl-nav disabled">

Controlling two slider's components with same buttons/controllers in owlcarousel?

I have two owl carousel. And one is over the other. One is image with some content and other is only content. And the both slider needs to change together.
This the code below for content slider
<div id="owkey-content-slider" class="owl-carousel">
<div class="item">
<div class="slider-content">
<h4>WE CREATE</h4>
</div>
</div>
<div class="item">
<div class="slider-content">
<h4>WE BUILD</h4>
</div>
</div>
<div class="item">
<div class="slider-content">
<h4>WE OFFER</h4>
</div>
</div>
<div class="item">
<div class="slider-content">
<h4>WE DELIVER</h4>
</div>
</div>
</div>
This is the codes for image slider
<div class="header-bg-image-slide">
<div id="owkey-bg-slider" class="owl-carousel">
<div class="item">
<img src="img/owkey-slider-2.jpg">
<div class="number-item">01</div>
</div>
<div class="item">
<img src="img/owkey-slider.jpg">
<div class="number-item">02</div>
</div>
<div class="item">
<img src="img/shutterstock_327808505.jpg">
<div class="number-item">03</div>
</div>
<div class="item">
<img src="img/owkey-head.png">
<div class="number-item">04</div>
</div>
</div>
And they are initialized in the same conditions/parameters. They are changing together. But, when button was clicked those buttons are for the image slider and that doesn't change the other slider's contents certainly.
<script type="text/javascript">
$(document).ready(function() {
var owl = $("#owkey-bg-slider, #owkey-content-slider");
owl.owlCarousel({
navigation : true,
navigationText: ["<i class=\"fa fa-angle-up\">","<i class=\"fa fa-angle-down\">"],
singleItem : true,
transitionStyle : "fade",
autoPlay: true,
touchDrag: false,
mouseDrag: false
});
})
</script>
And I think experienced owl carousel user can help me in this.
There are solution for this problem in here that is for any other kind of slider but not for owl carousel.

Use Flickity Slider, it's a much better slider plugin.

OWL Carousel 2 incorrect width, shows all items

I have the following OWL Carousel 2 initialization code:
$(document).ready(function(){
moment.locale('nl-NL');
$("#owl-slider").owlCarousel({
items: 1,
responsive: false,
nav : false,
loop: false,
dots: true,
dotsEach: 1,
autoplaySpeed : 300,
dotsSpeed : 400,
autoPlay: true,
navRewind: true,
animateOut: 'fadeOut'
});
});
This results in the following html of the carousel:
<div class="item-list" id="newsblock">
<div id="owl-slider" class="owl-carousel owl-theme owl-loaded">
<div class="owl-stage-outer">
<div class="owl-stage" style="transform: translate3d(-934px, 0px, 0px); transition: 0s; width: 1401px;">
<div class="owl-item" style="width: 467px; margin-right: 0px;">
<div class="item">
<img width="100%" src="/SITES/FOCUS-DEV/NIEUWS/PUBLISHINGIMAGES/INKTPOT.PNG?RenditionID=5" data-themekey="#">
<div class="header">
<h2 class="title">
<a title="Nieuwsbericht" href="https://testprorail.sharepoint.com/sites/Focus-DEV/nieuws/Paginas/Nieuwsbericht.aspx" rel="bookmark">Nieuwsbericht</a>
</h2>
<div class="time">17 November</div>
</div>
</div>
</div><div class="owl-item" style="width: 467px; margin-right: 0px;">
<div class="item">
<img width="100%" src="/SITES/FOCUS-DEV/NIEUWS/PUBLISHINGIMAGES/8628PEPERNOTEN-550X485.JPG?RenditionID=5" data-themekey="#">
<div class="header">
<h2 class="title">
<a title="Nog meer nieuws" href="https://testprorail.sharepoint.com/sites/Focus-DEV/nieuws/Paginas/Nog-meer-nieuws.aspx" rel="bookmark">Nog meer nieuws</a>
</h2>
<div class="time">17 November</div>
</div>
</div>
</div>
<div class="owl-item active" style="width: 467px; margin-right: 0px;">
<div class="item">
<img width="100%" src="/SITES/FOCUS-DEV/NIEUWS/PUBLISHINGIMAGES/INKTPOT.PNG?RenditionID=5" data-themekey="#">
<div class="header">
<h2 class="title">
<a title="Test" href="https://testprorail.sharepoint.com/sites/Focus-DEV/nieuws/Paginas/test.aspx" rel="bookmark">Test</a>
</h2>
<div class="time">17 November</div>
</div>
</div>
</div>
</div>
</div><div class="owl-controls">
<div class="owl-nav">
<div class="owl-prev" style="display: none;">prev</div>
<div class="owl-next" style="display: none;">next</div>
</div>
<div class="owl-dots" style="">
<div class="owl-dot"><span></span></div>
<div class="owl-dot"><span></span></div>
<div class="owl-dot active"><span></span></div>
</div>
</div>
</div>
</div>
The problem is that the width of the owl-stage div is set to the width of all three items instead of 1. All items are shown instead of 1.
Please provide some guidance on what could be the solution!
Kind Regards.

I solved my problem by adding this code to css:
.owl-item {
float: left;
}
.owl-carousel {
overflow: hidden;
}

Add singleItem:true to your javascript.
This will make it display only a single image at a time.

The width of the owl stage div will always extend past the parent carousel container (div id="owl-slider" class="owl-carousel owl-theme") if there is more than one item in the carousel. This is easily fixed by setting overflow to hidden in your CSS.
.owl-carousel {
overflow: hidden;
}

Jquery Cycle2 not initializing

I was setting up a slideshow using the first version of cycle and then thought I'd update to the newest version, but once I linked the file, my slideshow broke. I'm not sure why it is working in version 1 but not 2. I even get a console message : [cycle2] --c2 init-- .
Ideas?
HTML:
<div class="row">
<div class="span1">
<div class="chevron">
<i class="icon-chevron-left"></i>
</div>
</div>
<div class="span8">
<div class="slide-show-container noselect">
<div class="slide">
<img src="http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images.jpg" />
</div>
<div class="slide">
<div id="highcharts01"> </div>
</div>
<div class="slide">
<div id="highcharts02"> </div>
</div>
<div class="slide">
<img src="http://www.h3dwallpapers.com/wp-content/uploads/2014/08/Landscape-wallpapers-1.jpeg" />
</div>
</div>
</div>
<div class="span1">
<div class="chevron">
<i class="icon-chevron-right"></i>
</div>
</div>
</div>
<div class="row" id="slideNav">
<div class="offset1 span8 noselect" id="circleNav">
</div>
</div>
JS:
$('.slide-show-container').cycle({
fx: 'fade',
speed: 500,
timeout: 0,
next: ".icon-chevron-right",
prev: ".icon-chevron-left",
pager: "#circleNav",
after: initCharts
});

What are the differences between your code, and the one below?
Deleted after: initCharts and timeout: 0 from your JS.
Added jquery.cycle.all.js and jquery.min.js
Added position: relative; to .slide-show-container
Added position: absolute; and z-index: 5; for images
It's working now, however I guess your pagers won't show up because I don't have the CSS containing the images for divs.
$(document).ready(function() {
$('.slide-show-container').cycle({
fx: 'fade',
speed: 500,
next: ".icon-chevron-right",
prev: ".icon-chevron-left",
pager: "#circleNav"
});
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle.all.js"></script>
<div class="row">
<div class="span1">
<div class="chevron">
<i class="icon-chevron-left"></i>
</div>
</div>
<div class="span8">
<div class="slide-show-container noselect" style="position: relative;">
<div class="slide">
<img src="http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images.jpg" width="180" height="180" style="position: absolute; z-index: 5;"/>
</div>
<div class="slide">
<div id="highcharts01"> </div>
</div>
<div class="slide">
<div id="highcharts02"> </div>
</div>
<div class="slide">
<img src="http://www.h3dwallpapers.com/wp-content/uploads/2014/08/Landscape-wallpapers-1.jpeg" width="180" height="180" style="position: absolute; z-index: 5;"/>
</div>
</div>
</div>
<div class="span1">
<div class="chevron">
<i class="icon-chevron-right"></i>
</div>
</div>
</div>
<div class="row" id="slideNav">
<div class="offset1 span8 noselect" id="circleNav" >
</div>
</div>
Hope that someway I could help with this, also you wanted something like this.