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.
Related
I'm creating a slider using the Owl Carousel. I'd like to display something like "1 of number of slides" and increment the number on each slide. I've tried a couple of methods using jQuery but they haven't worked.
HTML:
<div class='owl-carousel owl-theme'>
<div class='item'>
<span class='article-card-number'></span>
</div>
<div class='item'>
<span class='article-card-number'></span>
</div>
<div class='item'>
<span class='article-card-number'></span>
</div>
<div class='item'>
<span class='article-card-number'></span>
</div>
<div class='item'>
<span class='article-card-number'></span>
</div>
<div class='item'>
<span class='article-card-number'></span>
</div>
</div>
jQuery:
$('.owl-carousel').owlCarousel({
loop:true,
margin:20,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:2
},
1000:{
items:3
}
},
});
var numberOfSlides = $('.item').length;
for (var i = 0; i < numberOfSlides; i++) {
$('.article-card-number').html(i + ' of ' numberOfSlides);
}
Any help would be greatly appreciated, thanks.
You have two options:
With events:
$('.owl-carousel').owlCarousel({
// your initialisation code
});
owl.on('translated.owl.carousel', function(event) {
$('.article-card-number').text(event.item.index + ' of ' event.item.count);
});
With info:
$('.owl-carousel').owlCarousel({
...
info: getInfo
});
function getInfo(i){
$('.article-card-number').text(i.currentPage + ' of ' i.allPages);
}
Note: None of the code segments above were tested but should work or require minimal changes.
I tried to add script.js to angular.json and use it in one component so that's not working for those who can suggest to add script tag to my html file thats not a good idea so can someone please suggest another idea or what is missed to make my script work. Thank you
Here is my script :
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
dots:false,
nav:true,
mouseDrag:false,
autoplay:true,
animateOut: 'slideOutUp',
responsive:{
0:{
items:1
},
600:{
items:1
},
1000:{
items:1
}
}
});
file.html:
<header>
<div class="owl-carousel owl-theme">
<div class="item">
<img src="https://cdn.pixabay.com/photo/2017/10/24/10/30/business-2884023_960_720.jpg" alt="images not found">
<div class="cover">
<div class="container">
<div class="header-content">
<div class="line"></div>
<h2>Teimagine Digital Experience with</h2>
<h1>Start-ups and solutions</h1>
<h4>We help entrepreneurs, start-ups and enterprises shape their ideas into products</h4>
</div>
</div>
</div>
</div>
<div class="item">
<img src="https://cdn.pixabay.com/photo/2016/03/09/09/22/workplace-1245776_960_720.jpg" alt="images not found">
<div class="cover">
<div class="container">
<div class="header-content">
<div class="line animated bounceInLeft"></div>
<h2>Reimagine Digital Experience with</h2>
<h1>Intelligent solutions</h1>
<h4>We help entrepreneurs, start-ups and enterprises shape their ideas into products</h4>
</div>
</div>
</div>
</div>
</header>
Way 1:
Refer the scripts inside the angular-cli.json (angular.json when
using angular 6+) file.
"scripts": [
"../path"
];
then add in typings.d.ts (create this file in src if it does not
already exist)
declare var variableName:any;
Import it in your file as
import * as variable from 'variableName';
Reference https://stackoverflow.com/a/44817445/9640128
Way 2:
you can add multiple scripts when your component loads dynamically
Reference : https://stackoverflow.com/a/49981918/9640128
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/
Here is my owl carousel HTML and javascript.
HTML:
<div id="owl-demo" class="owl-carousel owl-theme">
<div class="item" data-hash="slide1">
<img src="images/mainslider.png">
<h1>Heading</h1>
<p>Paragraph Text</p>
</div>
<div class="item" data-hash="slide2">
<img src="images/mainslider.png">
<h1>Heading</h1>
<p>Paragraph Text</p>
</div>
<div class="item" data-hash="slide3">
<img src="images/mainslider.png">
<h1>Heading</h1>
<p>Paragraph Text</p>
</div>
</div>
JavaScript:
$("#owl-demo").owlCarousel({
navigation : true, // Show next and prev buttons
slideSpeed : 300,
paginationSpeed : 400,
items : 1,
itemsDesktop : false,
itemsDesktopSmall : false,
itemsTablet: false,
itemsMobile : false,
URLhashListener:true,
autoplayHoverPause:true,
startPosition: 'URLHash'
});
I have a navigation block below it that uses Url Hash Navigation.
<nav class="navbar navbar-default secondary-navbar">
<div class="container-fluid">
<div class="container">
<ul class="nav navbar-nav">
<li>Slide 1</li>
<li>Slide 2</li>
<li>Slide 3</li>
</ul>
</div>
</div>
When a slide is clicked to or comes on screen, I need the corresponding link to change it's styles to show it is the one currently active.
I haven't found any native way to do this in Owl Carousel and wasn't sure how to accomplish this with Javascript
After playing around for a long time, I came up with the solution.
Add #link as class in hash navigations, and one more additional class in this case "slidetabs" e.g. <a class="night_tubing slidetabs" href="#night_tubing">NIGHT TUBING</a>
Get the current slide item and then its data-hash
Feed that data hash as a class in on changed function for adding class to navigation button
Then repeat same for change event to remove active class
Add a css to .slidetabs.active
$('.owl-carousel').on('changed.owl.carousel', function(event) {
var current = event.item.index;
var hash = $(event.target).find(".owl-item").eq(current).find(".item").attr('data-hash');
$('.'+hash).addClass('active');
});
$('.owl-carousel').on('change.owl.carousel', function(event) {
var current = event.item.index;
var hash = $(event.target).find(".owl-item").eq(current).find(".item").attr('data-hash');
$('.'+hash).removeClass('active');
});
Note: this is works as expected so I have not worked any further on it, there may be better solutions with good coding out there.
following is the full code:
Slider HTML:
<div class="owl-carousel owl-theme owl-loaded owl-drag">
<div class="owl-stage-outer">
<div class="owl-stage">
<div class="owl-item">
<div class="item" data-hash="cowboy_coaster">
<!-- Slide Content -->
</div>
</div>
<div class="owl-item">
<div class="item" data-hash="night_tubing">
<!-- Slide Content -->
</div>
</div>
<!-- . -->
<!-- . -->
<!-- . -->
<!-- . -->
</div>
</div>
</div>
</div>
<div class="owl-nav">
<button type="button" role="presentation" class="owl-prev">
<img class="slider-arrow" src="/wp-content/uploads/2019/01/slider-arrow-pre.png">
<div class="slider-counter">1 / 4</div>
</button>
<button type="button" role="presentation" class="owl-next"><img class="slider-arrow" src="/wp-content/uploads/2019/01/slider-arrow-next.png"></button>
</div>
<div class="owl-dots disabled"></div>
<div class="owl-slider-tabs">
<ul>
<li>
<a class="dining slidetabs active" href="#dining">DINING</a>
</li>
<li>
<a class="night_tubing slidetabs" href="#night_tubing">NIGHT TUBING</a>
</li>
<li>
<a class="cowboy_coaster slidetabs" href="#cowboy_coaster">COWBOY COASTER</a>
</li>
<li>
<a class="lift_tickets slidetabs" href="#lift_tickets">LIFT TICKETS</a>
</li>
</ul>
</div>
Javascript:
jQuery(document).ready(function($) {
$('.owl-carousel').on('initialized.owl.carousel changed.owl.carousel', function(e) {
if (!e.namespace) {
return;
}
var carousel = e.relatedTarget;
$('.slider-counter').text(carousel.relative(carousel.current()) + 1 + ' / ' + carousel.items().length);
}).owlCarousel({
nav:true,
navText: ["<img class='slider-arrow' src='/wp-content/uploads/2019/01/slider-arrow-pre.png'><div class='slider-counter'>1 / 3</div>","<img class='slider-arrow' src='/wp-content/uploads/2019/01/slider-arrow-next.png'>"],
loop:true,
slideSpeed : 300,
paginationSpeed : 400,
items:1,
dots:false,
URLhashListener:true,
startPosition: 'URLHash',
autoplay:true,
autoplayTimeout:9000,
autoplayHoverPause:true,
animateOut: 'fadeOut',
animateIn: 'fadeIn',
responsiveClass:true,
responsive:{
0:{
items:1,
nav:true
},
600:{
items:1,
nav:true
},
1000:{
items:1,
nav:true
}
}
});
$('.owl-carousel').on('changed.owl.carousel', function(event) {
var current = event.item.index;
var hash = $(event.target).find(".owl-item").eq(current).find(".item").attr('data-hash');
$('.'+hash).addClass('active');
});
$('.owl-carousel').on('change.owl.carousel', function(event) {
var current = event.item.index;
var hash = $(event.target).find(".owl-item").eq(current).find(".item").attr('data-hash');
$('.'+hash).removeClass('active');
});
});
CSS:
.slidetabs.active {
color: #ce2d27;
text-decoration: underline;
}
Owl Carousel supports this natively, see here in the docs:
https://owlcarousel2.github.io/OwlCarousel2/docs/api-classes.html
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