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:
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');
});
});
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 ?
I want to put a lightbox effect on every image. When I click an image, it must be enlarged (on the same page) and when I click at any part of the webpage except the image, the image must close.
<div class="row jumbotron">
<div class="text-center">
<h1>Gallery</h1>
</div>
<div class="row">
<div class="col-md-4">
<div class="well">
<img height="180px" src="images/a.jpg" class="img-responsive img-center"/>
</div>
</div>
<div class="col-md-4">
<div class="well">
<img height="180px" src="images/a.jpg" class="img-responsive img-center"/>
</div>
</div>
<div class="col-md-4">
<div class="well">
<img height="180px" src="images/a.jpg" class="img-responsive img-center"/>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="well">
<img height="180px" src="images/a.jpg" class="img-responsive img-center"/>
</div>
</div>
<div class="col-md-4">
<div class="well">
<img height="180px" src="images/a.jpg" class="img-responsive img-center"/>
</div>
</div>
<div class="col-md-4">
<div class="well">
<img height="180px" src="images/a.jpg" class="img-responsive img-center"/>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="well">
<img height="180px" src="images/a.jpg" class="img-responsive img-center"/>
</div>
</div>
</div>
</div>
Nice and easy with bootstrap.
<div class="col-sm-4">
<img src="*insert image*" class="img-responsive" data-toggle="modal" data-target=".lightbox"/>
<div class="modal lightbox" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<img src="*insert image*" class="img-responsive"/>
</div>
</div>
</div>
</div>
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 am trying to use a div instead of an image for the item and content but it won't set with the width correctly. I want it to work like the images do.
http://jsfiddle.net/ququat29/ example code
<div class="ContentFlow">
<div class="loadIndicator">
<div class="indicator"></div>
</div>
<div class="flow">
<img class="item" src="http://cdnll.reallygoodstuff.com/images/xl/161170_a.jpg" title="Your_Image_Title" />
<img class="item" src="https://tse1.mm.bing.net/th?id=HN.607994144777177645&pid=1.7" />
<img class="item" src="http://cdnll.reallygoodstuff.com/images/xl/161170_a.jpg" title="Your_Image_Title" />
<!-- Add as many items as you like. -->
</div>
<div class="globalCaption"></div>
<div class="scrollbar">
<div class="slider">
<div class="position"></div>
</div>
</div>
</div>
<div class="ContentFlow">
<div class="flow">
<div class="item more-width">
<div class="center-block club-card content" style="background-color: blue;">
<div class="club-info-wrapper ">
<div class="club-info ">
<h1 class=" club-name ">coffee</h1>
<p class="lead club-location "><strong>name</strong>
</p>
</div>
</div>
</div>
</div>
<div class="item more-width">
<div class="center-block club-card content" style="background-color: red; ">
<div class="club-info-wrapper ">
<div class="club-info ">
<h1 class=" club-name ">car wash</h1>
<p class="lead club-location "><strong>name</strong>
</p>
</div>
</div>
</div>
</div>
<div class="item more-width">
<div class="center-block club-card content" style="background-color: yellow;">
<div class="club-info-wrapper ">
<div class="club-info ">
<h1 class=" club-name ">foutain</h1>
<p class="lead club-location "><strong>name</strong>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
http://www.jacksasylum.eu/ContentFlow/index.php