owl-carousel automatic slider not working - php

Question

css: owl.carousel.min.css
.owl-carousel,
.owl-carousel .owl-item {
-webkit-tap-highlight-color: transparent;
position: relative
}
.owl-carousel {
display: none;
width: 100%;
z-index: 1
}
.owl-carousel .owl-stage {
position: relative;
-ms-touch-action: pan-Y;
-moz-backface-visibility: hidden
}
.owl-carousel .owl-stage:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0
}
.owl-carousel .owl-stage-outer {
position: relative;
overflow: hidden;
-webkit-transform: translate3d(0, 0, 0)
}
.owl-carousel .owl-item,
.owl-carousel .owl-wrapper {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0)
}
.owl-carousel .owl-item {
min-height: 1px;
float: left;
-webkit-backface-visibility: hidden;
-webkit-touch-callout: none
}
.owl-carousel .owl-item img {
display: block;
width: 100%
}
.owl-carousel .owl-dots.disabled,
.owl-carousel .owl-nav.disabled {
display: none
}
.no-js .owl-carousel,
.owl-carousel.owl-loaded {
display: block
}
.owl-carousel .owl-dot,
.owl-carousel .owl-nav .owl-next,
.owl-carousel .owl-nav .owl-prev {
cursor: pointer;
cursor: hand;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.owl-carousel.owl-loading {
opacity: 0;
display: block
}
.owl-carousel.owl-hidden {
opacity: 0
}
.owl-carousel.owl-refresh .owl-item {
visibility: hidden
}
.owl-carousel.owl-drag .owl-item {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.owl-carousel.owl-grab {
cursor: move;
cursor: grab
}
.owl-carousel.owl-rtl {
direction: rtl
}
.owl-carousel.owl-rtl .owl-item {
float: right
}
.owl-carousel .animated {
animation-duration: 1s;
animation-fill-mode: both
}
.owl-carousel .owl-animated-in {
z-index: 0
}
.owl-carousel .owl-animated-out {
z-index: 1
}
.owl-carousel .fadeOut {
animation-name: fadeOut
}
#keyframes fadeOut {
0% {
opacity: 1
}
100% {
opacity: 0
}
}
.owl-height {
transition: height .5s ease-in-out
}
.owl-carousel .owl-item .owl-lazy {
opacity: 0;
transition: opacity .4s ease
}
.owl-carousel .owl-item img.owl-lazy {
transform-style: preserve-3d
}
.owl-carousel .owl-video-wrapper {
position: relative;
height: 100%;
background: #000
}
.owl-carousel .owl-video-play-icon {
position: absolute;
height: 80px;
width: 80px;
left: 50%;
top: 50%;
margin-left: -40px;
margin-top: -40px;
background: url(owl.video.play.html) no-repeat;
cursor: pointer;
z-index: 1;
-webkit-backface-visibility: hidden;
transition: transform .1s ease
}
.owl-carousel .owl-video-play-icon:hover {
-ms-transform: scale(1.3, 1.3);
transform: scale(1.3, 1.3)
}
.owl-carousel .owl-video-playing .owl-video-play-icon,
.owl-carousel .owl-video-playing .owl-video-tn {
display: none
}
.owl-carousel .owl-video-tn {
opacity: 0;
height: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
transition: opacity .4s ease
}
.owl-carousel .owl-video-frame {
position: relative;
z-index: 1;
height: 100%;
width: 100%
}
.owl-carousel .owl-wrapper-outer{
overflow: hidden;
position: relative;
width: 100%;
z-index: 1;
}
.owl-item {
transform: translateZ(0);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
}
index.php
<script>
$(document).ready(function(){
$(".owl-carousel").owlCarousel({
navigation : false,
rtl:true,
slideSpeed : 300,
paginationSpeed : 400,
singleItem:true
});
});
</script>
<div class="col-xl-12">
<div class="product-tab-content">
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<div class="product-active owl-carousel">
<?php
foreach($deal as $row)
{
$img = explode(",",$row['product_image']);
?>
<div class="pro-item">
<div class="product-wrapper">
<div class="product-img">
<a href="<?php echo base_url(); ?>details/<?php echo $row['product_id']; ?>">
<?php
if(!empty($img[0]))
{
?>
<img src="<?php echo base_url(); ?>product/<?php echo $img[0]; ?>" alt="">
<?php
}
else
{
?>
<img src="<?php echo base_url(); ?>product/product_not.jpeg">
<?php
}
?>
</a>
</div>
<div class="product-content pt-15">
<h4>
<?php echo $row['product_name']; ?>
</h4>
<div class="product-meta">
<div class="pro-price f-left">
<span><?php echo $row['unit_price']; ?></span>
<span class="old-price"><?php echo $row['old_price']; ?></span>
</div>
</div>
</div>
</div>
</div>
<?php
}
?>
</div>
</div>
</div>
</div>
</div>
I am developing a eCommerce website where I am showing some product which are perfectly showing and previous and next button are also working perfectly but product are not sliding automatically. I had tried so many thing like jquery, css but I am not able to find any solution. How can I automatically slide my product? Please help me.
Thank You

Answer 1

put your js code below the html and add the line (autoplay:true) to the function.
$(document).ready(function(){
$(".owl-carousel").owlCarousel({
navigation : false,
rtl:true,
slideSpeed : 300,
paginationSpeed : 400,
autoplay:true,
singleItem:true
});
});

Answer 2

You could use Swiper is better than owl carousel.
Swiper
- is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps. Designed mostly for iOS, but also works great on latest Android, Windows Phone 8 and modern Desktop browsers.
Swiper is not compatible with all platforms, it is a modern touch
slider which is focused only on modern apps/platforms to bring the
best experience and simplicity.

Answer 3

In the owl.carousel.js file
search for transform you should find something like this
transform: 'translate3d("+b+"px,0px,0px)'
see this "+b+" replace it with "+-b+" it ends up like this
transform: "translate3d(" + -b + "px,0px, 0px)"
Notes this will not work in ltr versions so in my case I am using dynamic application so made 2 files and I called the English version without minus " + b + " and the rtl I added this minus.
it may help someone.