Bellow the following Details For My WordPress and Plugin Details.
WordPress Details:
WordPress Version:4.9.8
WordPress jQuery 1.12.4
plugin Details:
owl-carousel jQuery 1.0.0
plugin Version: 2.1
used WordPress Version: 3.0.1 or higher
Tested up to: 4.9.9
[tc-owl-carousel] Short code
Thank you for giving me clear indications.
Here is the HTML code related to owl carousel:
<div class="tcowl-wrap tc-carousel-container">
<div class="owl-carousel owl-theme tcowl-nav" style="opacity: 1; display: block;">
<div class="owl-wrapper-outer autoHeight" style="height: 452px;">
<div class="owl-wrapper" style="width: 4438px; left: 0px; display: block; transform: translate3d(-317px, 0px, 0px);">
<div class="owl-item" style="width: 317px;">
<div class="carousel-item"><img src="./wp-content/uploads/2018/12/hometurph-slider-5.png"
alt=""></div>
</div>
<div class="owl-item" style="width: 317px;">
<div class="carousel-item"><img src="./wp-content/uploads/2018/12/hometurph-slider-2.png"
alt=""></div>
</div>
<div class="owl-item" style="width: 317px;">
<div class="carousel-item"><img src="./wp-content/uploads/2018/12/hometurph-slider-3.png"
alt=""></div>
</div>
<div class="owl-item" style="width: 317px;">
<div class="carousel-item"><img src="./wp-content/uploads/2018/12/hometurph-slider-1.png"
alt=""></div>
</div>
<div class="owl-item" style="width: 317px;">
<div class="carousel-item"><img src="./wp-content/uploads/2018/12/hometurph-slider-4-1.png"
alt=""></div>
</div>
<div class="owl-item" style="width: 317px;">
<div class="carousel-item"><img src="./wp-content/uploads/2018/12/floyd-slider-4-1.png"
alt=""></div>
</div>
<div class="owl-item" style="width: 317px;">
<div class="carousel-item"><img src="./wp-content/uploads/2018/12/floyd-slider-1-1.png"
alt=""></div>
</div>
</div>
</div>
<div class="owl-controls clickable">
<div class="owl-pagination">
<div class="owl-page active"><span class=""></span></div>
<div class="owl-page"><span class=""></span></div>
</div>
</div>
</div>
I am Using plugin Short Code Method in My WordPress. But Owl Carousel Not working in my WordPress. I am using Starry Theme, but I though this theme only Owl Carousel not Working.
What is the Error indicating in console ?
You can try to change jquery version lower ?
Related
I'm trying to toggle a class .dica-item to .dica-item.active on click. This works fine. However I can not remove the class when another item is clicked. I've seen examples that work fine before however this is a situation where someone is using a list and siblings. Is there anyway to do the same thing here?
<div id="slider-items" class="et_pb_module dica_divi_carousel dica_divi_carousel_0">
<div class="et_pb_module_inner">
<div class="dica-container arrow-show-hover arrow-outer-position" data-desktop="6" data-tablet="3" data-mobile="3" data-speed="250" data-arrow="on" data-dots="off" data-autoplay="off" data-autospeed="1000" data-loop="off" item-spacing="30" center-mode="off" slider-effec="1" cover-rotate="50" pause-onhover="off" data-multislide="off" data-cfshadow="on" data-order="0" data-lazyload="off" data-lazybefore="off" data-scroller_effect="off" data-autowidth="off" data-item_spacing_tablet="30" data-item_spacing_phone="30">
<div class="swiper-container swiper-container-initialized swiper-container-horizontal">
<div class="swiper-wrapper" style="width: 1878.33px; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><div class="et_pb_module dica_divi_carouselitem dica_divi_carouselitem_0 et_clickable swiper-slide-visible swiper-slide-active" style="width: 238.333px; margin-right: 30px;">
<div class="et_pb_module_inner">
<div class="dica-item active">
<div class="dica-image-container"><a class="image" href="#aerospace" data-et-has-event-already="true"><img src="http://meilink.is-een-geweldige-klant.nl/wp-content/uploads/2020/06/Naamloos-1.jpg" alt="" class="dica-item-image"></a></div>
<div class="dica-item-content">
<h4>Aerospace</h4>
<div class="content"></div>
</div>
</div>
</div>
</div><div class="et_pb_module dica_divi_carouselitem dica_divi_carouselitem_1 et_clickable swiper-slide-visible swiper-slide-next" style="width: 238.333px; margin-right: 30px;">
<div class="et_pb_module_inner">
<div class="dica-item active">
<div class="dica-image-container"><a class="image" href="#automotive" data-et-has-event-already="true"><img src="http://meilink.is-een-geweldige-klant.nl/wp-content/uploads/2020/06/Naamloos-1.jpg" alt="" class="dica-item-image"></a></div>
<div class="dica-item-content">
<h4>Automotive</h4>
<div class="content"></div>
</div>
</div>
</div>
</div><div class="et_pb_module dica_divi_carouselitem dica_divi_carouselitem_2 et_clickable swiper-slide-visible" style="width: 238.333px; margin-right: 30px;">
<div class="et_pb_module_inner">
<div class="dica-item active">
<div class="dica-image-container"><a class="image" href="#aerospace" data-et-has-event-already="true"><img src="http://meilink.is-een-geweldige-klant.nl/wp-content/uploads/2020/06/Naamloos-1.jpg" alt="" class="dica-item-image"></a></div>
<div class="dica-item-content">
<h4>Aerospace</h4>
<div class="content"></div>
</div>
</div>
</div>
</div><div class="et_pb_module dica_divi_carouselitem dica_divi_carouselitem_3 et_clickable swiper-slide-visible" style="width: 238.333px; margin-right: 30px;">
<div class="et_pb_module_inner">
<div class="dica-item">
<div class="dica-image-container"><a class="image" href="#agrodairy" data-et-has-event-already="true"><img src="http://meilink.is-een-geweldige-klant.nl/wp-content/uploads/2020/06/Naamloos-1.jpg" alt="" class="dica-item-image"></a></div>
<div class="dica-item-content">
<h4>Agro & Dairy</h4>
<div class="content"></div>
</div>
</div>
</div>
</div><div class="et_pb_module dica_divi_carouselitem dica_divi_carouselitem_4 et_clickable swiper-slide-visible" style="width: 238.333px; margin-right: 30px;">
<div class="et_pb_module_inner">
<div class="dica-item active">
<div class="dica-image-container"><a class="image" href="#defensie" data-et-has-event-already="true"><img src="http://meilink.is-een-geweldige-klant.nl/wp-content/uploads/2020/06/Naamloos-1.jpg" alt="" class="dica-item-image"></a></div>
<div class="dica-item-content">
<h4>Defensie</h4>
<div class="content"></div>
</div>
</div>
</div>
</div><div class="et_pb_module dica_divi_carouselitem dica_divi_carouselitem_5 et_clickable swiper-slide-visible" style="width: 238.333px; margin-right: 30px;">
<div class="et_pb_module_inner">
<div class="dica-item">
<div class="dica-image-container"><a class="image" href="#sectorx" data-et-has-event-already="true"><img src="http://meilink.is-een-geweldige-klant.nl/wp-content/uploads/2020/06/Naamloos-1.jpg" alt="" class="dica-item-image"></a></div>
<div class="dica-item-content">
<h4>Sector X</h4>
<div class="content"></div>
</div>
</div>
</div>
</div><div class="et_pb_module dica_divi_carouselitem dica_divi_carouselitem_6 et_clickable" style="width: 238.333px; margin-right: 30px;">
<div class="et_pb_module_inner">
<div class="dica-item">
<div class="dica-image-container"><a class="image" href="#sectory" data-et-has-event-already="true"><img src="http://meilink.is-een-geweldige-klant.nl/wp-content/uploads/2020/06/Naamloos-1.jpg" alt="" class="dica-item-image"></a></div>
<div class="dica-item-content">
<h4>Sector Y</h4>
<div class="content"></div>
</div>
</div>
</div>
</div></div>
<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div>
<div class="swiper-button-next dica-next-btn-0" data-icon="5" tabindex="0" role="button" aria-label="Next slide" aria-disabled="false"></div><div class="swiper-button-prev dica-prev-btn-0 swiper-button-disabled" data-icon="4" tabindex="0" role="button" aria-label="Previous slide" aria-disabled="true"></div>
</div>
</div>
</div>
I've wrote this piece of jQuery. However now I'm a bit stuck:
jQuery(document).ready(function() {
jQuery('.dica-item').click(function(){
jQuery(this).toggleClass('active').not(this).removeClass('active');
});
});
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;
}
I am having trouble to get the Owl Carousel Theme stylesheets to have any effect on my sliders?
I am using the latest version owl.carousel.2.0.0-beta.3
Here is my test site: example website
Here is the HTML code related to owl carousel:
<div id="owl-single" class="owl-carousel col-xs-12 owl-loaded owl-drag">
<div class="owl-stage-outer">
<div class="owl-stage" style="transform: translate3d(-1396px, 0px, 0px); transition: 0s; width: 4886px;">
<div class="owl-item cloned" style="width: 698px;">
<div class="item">
<img src="img/slide2.jpg" alt="GTA V">
</div>
</div>
<div class="owl-item cloned" style="width: 698px;">
<div class="item">
<img src="img/slide3.jpg" alt="Mirror Edge">
</div>
</div>
<div class="owl-item active" style="width: 698px;">
<div class="item">
<img src="img/slide1.jpg" alt="The Last of us">
</div>
</div>
<div class="owl-item" style="width: 698px;">
<div class="item">
<img src="img/slide2.jpg" alt="GTA V">
</div>
</div>
<div class="owl-item" style="width: 698px;">
<div class="item">
<img src="img/slide3.jpg" alt="Mirror Edge">
</div>
</div>
<div class="owl-item cloned" style="width: 698px;">
<div class="item">
<img src="img/slide1.jpg" alt="The Last of us">
</div>
</div>
<div class="owl-item cloned" style="width: 698px;">
<div class="item">
<img src="img/slide2.jpg" alt="GTA V">
</div>
</div>
</div>
</div>
<div class="owl-nav">
<div class="owl-prev">prev</div>
<div class="owl-next">next</div>
</div>
<div class="owl-dots">
<div class="owl-dot active"><span></span></div>
<div class="owl-dot"><span></span></div>
<div class="owl-dot"><span></span></div>
</div>
</div>
The stylesheet called "owl.theme.default.min.css" looks like it contains all the Navigation stylesheets but it's not styling the PREV and NEXT buttons for some reason?
Any help would be appreciated.
you are missing a class, owl-theme, related to the owlcarousel theme in your html declaration:
<div id="owl-single" class="owl-carousel col-xs-12 owl-loaded owl-drag">
should be:
<div id="owl-single" class="owl-carousel owl-theme col-xs-12 owl-loaded owl-drag">
I tried it adding the missing class directly into the browser inspector, now your page looks like this:
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.
I have a strange problem with Twitter Bootstrap Carousel. Please have a look at http://www.bettondesignwork.co.uk/cheapbeds4u/
At the moment there are three identical images. The first image loads OK but when the second image slides in the height of the containing div animates to 0px. As well as this an extra div is generated around the carousel .
Actual html:
<section id="top" class="container">
<div id="TopCarousel" class="moduletable carousel slide">
<div class="carousel-inner">
<div class="item">
<img src="images/slideshow/homepage/01.jpg" alt="" />
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="images/slideshow/homepage/02.jpg" alt="" />
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="images/slideshow/homepage/03.jpg" alt="" />
<div class="carousel-caption"></div>
</div>
</div>
</div>
</section>
Rendered HTML:
<section id="top" class="container">
<div style="margin: 0px 0px 20px; position: relative; overflow: hidden; height: 0px;">
<div id="TopCarousel" class="moduletable carousel slide" style="margin: -340px 0px 0px; overflow: hidden;">
<div class="carousel-inner">
<div class="item active">
<img src="images/slideshow/homepage/01.jpg" alt="" />
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="images/slideshow/homepage/02.jpg" alt="" />
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="images/slideshow/homepage/03.jpg" alt="" />
<div class="carousel-caption"></div>
</div>
</div>
</div>
</div>
</section>
Any help would be greatly appreciated. Thank you.
This is a problem with Joomla 3.0 and the Bootstrap carousel function. As pointed out in the comment above Mootools and jQuery run together by default on a J3 install.
The fix for me was to install and activate this plugin - http://extensions.joomla.org/extensions/core-enhancements/performance/mootools/15748
This fixes the problem for me as can be seen here:
http://www.littledonkey.net
Beware though that this disables mootools completely so somethings may stop working as expected...
Cheers,
Adam