Issues with Owl Carousel - reaching out for help
HI, I am reaching out to the WebAssist Community as I haven't had any response on stackoverflow.
Has anyone got any experience with Owl Carousel as I am using it for various sliders which work, except one. I have a homepage banner, on the left is the Owl Carousel slider and on the right is some business details. I am using CSS table/cells to display and its responsive (it works perfectly if I was just using a static banner image (without Owl Carousel). So the CSS works fine there. but as soon as I replace the static image with Owl Carousel, I have 2 issues.
(1) there seems to be a 10 pixel gap at the bottom which I cannot figure out where its coming from)
(2) the Owl Carousel slider doesn't shrink in size when reducing browser width.
I wanted to use CSS tables as it seems the best approach to keep the height on both the left and right columns (I don't want to use FlexBox due to IE9).
Has anyone had any issues relating with using CSS table/cells?
I will paste in some of the code that is used for this, in case someone can identify an obvious reason?
Thanks in advance
Chris
<div class="container">
<div class="parent">
<div class="mobile-hide">
<div class="child-left">
<div class="owl-carousel3">
<?php
while(!$rsHomeSlider->atEnd()) {
?>
<img src="images/slides/<?php echo($rsHomeSlider->getColumnVal("HeroFileName")); ?>" />
<?php
$rsHomeSlider->moveNext();
}
$rsHomeSlider->moveFirst(); //return RS to first record
?>
</div>
</div>
</div>
<div class="child-right">
<div class="hours-title">Opening Hours</div>
<div class="hours-parent">
<div class="hours-child-left"> <?php echo($rsSettings->getColumnVal("SettingsOpenDays")); ?> </div>
<div class="hours-child-right"> <?php echo($rsSettings->getColumnVal("SettingsOpenHours")); ?> </div>
</div>
<a href="#">
<div class="opening-map">Show Directions</div>
</a> </div>
</div>
</div>
.owl-carousel3 {
display: none;
max-width: 741px;
-webkit-tap-highlight-color: transparent;
/* position relative and z-index fix webkit rendering fonts issue */
position: relative;
z-index: 1;
}
.owl-carousel3 img {
width:100%;
height: auto;
display: block;
}
.owl-carousel3 .owl-stage {
position: relative;
-ms-touch-action: pan-Y;
}
.owl-carousel3 .owl-stage:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.owl-carousel3 .owl-stage-outer {
position: relative;
overflow: hidden;
/* fix for flashing background */
-webkit-transform: translate3d(0px, 0px, 0px);
}
.owl-carousel3 .owl-item {
position: relative;
min-height: 1px;
float: left;
-webkit-backface-visibility: hidden;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
}
.owl-carousel3 .owl-item img {
display: block;
width: 100%;
-webkit-transform-style: preserve-3d;
}
.container {
max-width: 1140px;
margin-left: auto;
margin-right: auto;
padding-left: 20px;
padding-right: 20px;
}
.hours-title {
font-family: 'Alegreya SC', serif;
letter-spacing: 3px;
font-size: 20px;
margin-bottom: 15px;
}
.hours-parent {
display: table;
width: 100%;
}
.hours-child-left {
display: table-cell;
text-align: right;
vertical-align: middle;
width: 50%;
padding-right: 10px;
font-family: 'Alegreya SC', serif;
letter-spacing: 3px;
font-size: 16px;
}
.hours-child-right {
display: table-cell;
text-align: left;
vertical-align: middle;
width: 50%;
padding-left: 10px;
font-family: 'Alegreya SC', serif;
letter-spacing: 2px;
font-size: 14px;
}
.opening-map {
text-align: center;
background-color: #363128;
color: #FFFFFF;
display: inline-block;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 20px;
padding-right: 20px;
margin-top: 15px;
border-radius: 5px;
}
.opening-map:hover {
background-color: #000000;
}
.map-responsive {
width: 100%;
height: auto;
}
.parent {
display: table;
float: left;
}
.child-left {
display: table-cell;
text-align: center;
width: 65%;
background-color: #E7E3DC;
}
.child-right {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 35%;
background-color: #E7E3DC;
background-image: url(../images/template/map-thumbnail.jpg);
background-repeat: no-repeat;
background-size: cover;
}