Develop Reference

Owl Carousel Image render issue in Laravel

I've saved the cars into database and now wanted to show them in a carousel. I' m working with Owl Carousel and fetching the cars dynamically under the title Classic Cars. The issue is that I' m getting extra large space from nowhere between the Carousel and bullets.
I don't know how can I fix that.
Demo: https://thecarchain.com/marketplace
Blade
<section class="recommended-slider-wrapper">
<div class="row">
<div class="owl-carousel owl-theme recommended-box-slider">
#foreach($classic as $row)
<div class="item">
<div class="recommended-box">
<div class="img-slider">
<span class="for-sale">
<p class="fore-sale-text">{{ __('For Sale')}}</p>
</span>
<div>
<div class="owl-carousel owl-theme inner-img-slider">
#if (count($row->images)>0)
#foreach($row->images as $images)
<div class="item">
<img src="{{ asset('mypath/ImagesP'.$row->product.'/'.'u_'. $row->user_id.'/'.'qr_'.$row->id.'/' . $images->name) }}" alt="recomanded-1" class="card-img-top">
</div>
#endforeach
#endif
</div>
</div>
</div>
<div class="recommended-box-text">
<div class="card-body-content">
<a href="{{route('myRoute',[$row->id,$row->product])}}">
<h4>{{$row->make}} {{$row->model}} {{$row->trim}} {{ __("$row->car_body")}}</h4>
</a>
<span>{{$row->manufact_year}} - #if($row->price && $row->currency){{$row->price}} {{$row->currency}}#else {{ __('Price on Request')}}#endif
</span>
<div>
<i class="fas fa-map-marker-alt mr-1"></i>
{{$row->address}}
</div>
</div>
</div>
</div>
</div>
#endforeach
</div>
</div>
</div>
</div>
</div>
</div>
</section>
JavasScript
//Main Carousel Code
$(function() {
'use strict';
$('.recommended-box-slider').owlCarousel({
loop:true,
dots: true,
items:3,
nav:false,
dotsEach:true,
margin:10,
responsive:{
0:{
items:1
},
600:{
items:2
},
1000:{
items:3
}
}
});
//Show the Car Images inside the Ad
$('.recommended-box-slider .inner-img-slider').owlCarousel({
loop:true,
loop:true,
dots: true,
nav:false,
dotsEach:true,
responsive:{
0:{
items:1
},
600:{
items:1
},
1000:{
items:1
}
}
});

I think it's because your html. You opened a section tag and 2 other div tags before foreach loop, but after loop you closed many div tags.

Troubleshooting conflicting elements on a website

I am working on a website and there seems to be conflicting elements.
I started with a template that contains a lot of "borrowed" CSS and JS elements from different places, and now I am trying to add a Slick slideshow, and there are conflicts in either the JS or the CSS that prevent me from editing the Slick slider (parts of the slick-slider code were already present in the "Organic Farm" template).
Right now I have js/core.min.js, js/script.js and js/slick.js being loaded into the page, and then at the bottom of the index page:
<script type="text/javascript">
$(document).ready(function(){
$('.swiper-slide').slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 1,
centerMode: true,
variableWidth: true,
});
});
</script>
The HTML portion is:
<section class="section">
<div class="swiper-container swiper-slider swiper-custom" data-height="35.10416666666667%" data-min-height="375px" data-index-bullet="false" data-slide-effect="swipe" data-autoplay="5000">
<div class="swiper-wrapper swiper-wrapper-custom">
<div class="swiper-slide" data-slide-bg="images/ergfer1.jpg">
<div class="swiper-slide-caption">
<div class="container text-center">
<div class="row justify-content-center">
<div class="col-md-9 col-lg-8 top">
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide" data-slide-bg="images/gdrger.jpg">
<div class="swiper-slide-caption">
<div class="container text-center">
<div class="row justify-content-center">
<div class="col-md-9 col-lg-8 top">
</div>
</div>
</div>
</div>
</div>
Is there a way to find out why my custom script is not active? The arrows are also not showing up. For anything HTML and CSS I use the Inspector of Firefox, but here I'm really stumped.

Two things to consider:
1) When using slick.js, it is customary to add it to the element which is the parent of a set of elements which are then converted into slides. For example:
<div id="slide-wrapper">
<div class="my-slide">...</div>
<div class="my-slide">...</div>
<div class="my-slide">...</div>
</div>
$('.slide-wrapper').slick({
...
});
In your case, that would mean adding Slick to swiper-wrapper:
$('.swiper-wrapper').slick({
...
});
2) More likely the problem is that you have a conflict with the setup of a different slide show library altogether, Swiper.js (https://swiperjs.com/api/), which uses classes like swiper-container, swiper-wrapper and swiper-slide. To implement that slideshow, you would have to include that library on your page and initialize the slideshow with something like:
var mySwiper = new Swiper('.swiper-container', {
speed: 400,
spaceBetween: 100
});

Owlcarousel set display none when it is uploaded on server

I am trying to set an owl carousel on my landing page . It works fine when i browse it from my working directory . But when i upload it on server (even in local server) it set display:none in css .
I tried changing css and js files but it is not working .
here is my code ---
$(document).ready(function(){
jQuery("#main-slider").owlCarousel({
autoplay:true,
loop:true,
animateOut: 'fadeOut',
animateIn: 'fadeIn',
items:1,
margin:30,
stagePadding:30,
smartSpeed:450
});
});
<div id="main-slider" class="owl-carousel owl-theme">
<div class="item">
<img src="img/slider.jpg" alt="" />
</div>
<div class="item">
<img src="img/slider2.jpg" alt="" />
</div>
<div class="item">
<img src="img/slider3.jpg" alt="" />
</div>
</div>

If you've used #main-slider id more than once on this page you can get error. Use it once.

Owl-Carousel changing image

is it possible to change an image dependent on the current slide in owl carousel?
I know that there are events within owl carousel but I didn't found what I wanted.
Thanks in advance to everyone who takes the time to answer the questions.
Screenshot
HTML:
<div class="row">
<div class="col-lg-3 hidden-md hidden-sm hidden-xs">
<div>
<img src="image1.png"/> <!-- change to image2.png if slide 2 is active -->
</div>
</div>
<div class="owl-carousel-team">
<div class="col-lg-9 col-md-12 item">
<h3>Slide 1</h3>
<div class="row">
<div class="content"></div>
</div>
</div>
<div class="col-lg-9 col-md-12 item">
<h3>Slide 2</h3>
<div class="row">
<div class="content"></div>
</div>
</div>
</div>
Javascript:
var teamCarousel = function(){
var owl = $('.owl-carousel-team');
owl.owlCarousel({
loop:true,
margin:0,
autoHeight:false,
smartSpeed: 500,
responsiveClass:true,
responsive:{
0:{
items:1,
},
1000:{
items:1,
nav:false,
dots: true,
}
}
});
};
$(function(){
fullHeight();
sliderMain();
centerBlock();
responseHeight()
mobileMenuOutsideClick();
offcanvasMenu();
burgerMenu();
toggleBtnColor();
contentWayPoint();
teamCarousel();
});

You can detect your slide movement by
owl.on('translated.owl.carousel', function(event) {
// Your code here
})
use translated.owl.carousel for after slider moved
Give an id to your image tag, then get the active slider image source and set to <img/>
e.g.
owl.on('translated.owl.carousel', function(event) {
var now_src = $('.owl-carousel').find('.owl-item.active img').attr('src');
$('#you_img_id').attr('src', now_src);
})
Here's the demo https://jsfiddle.net/566j4jsf/

What is clone in owl carousel? How can we control the dot numbers in Owl carousel

I have been using owl carousel for my website which I saw in one of the commercial websites. The code is as belo
HTML
<div class="owl-carousel-hp owl-carousel owl-theme">
<div class="item" style="margin-right: 0px;"></div>
<div class="item" style="margin-right: 0px;"></div>
<div class="item" style="margin-right: 0px;"></div>
<div class="item" style="margin-right: 0px;"></div>
<div class="item" style="margin-right: 0px;"></div>
<div class="item" style="margin-right: 0px;"></div>
<div class="item" style="margin-right: 0px;"></div>
<div class="item" style="margin-right: 0px;"></div>
</div>
JS Code
$('.owl-carousel-hp').owlCarousel({
responsiveClass:true,
loop:true,
lazyLoad: true,
responsive:{
320:{
items:1,
nav:true
},
480:{
items:1,
nav:true
},
667:{
items:1,
nav:true
},
768:{
items:4,
nav:false,
dots:false
},
1024:{
items:4,
nav:false,
dots:false
}
}
});
In the 8 items show in HTML, I will be displaying 4 items, that is only 4 items will be in active state. And other 4 should be in cloned state, i.e. owl-item cloned. How to achieve this cloned state? And is there any way that I can show only number of navigation dots based on active item numbers? If the active items are 4, I need to display only 4 dots.
I could not get much documentation on this plugin, if anyone can answer above question or provide a relevant link, it would be helpful