I have two carousels on my page using owl-carousel. Both show an empty last item. I'm a beginner and I have no idea on how to solve this. Can somebody help me?
I'm using twig to loop trough my php array.
<section id='noticia-carousel' class='pt-0'>
<div class='container main-container'>
<div class='owl-carousel owl-theme'>
{% for noticia in noticias_principais %}
<div class='box'>
<img src='{{noticia.imagem_capa}}' alt='Imagem referente à notícia {{noticia.titulo | striptags}}'>
<div class='titulo'>
<h4><a href='noticia/{{noticia.id}}'> {{noticia.titulo | striptags}} </a></h4>
</div>
</div>
{% endfor %}
<div class="owl-controls">
<div class="owl-nav">
</div>
</div>
</div>
<div class='text-center'>
<button class='btn btn-secondary' onclick="window.location.href='/noticias'">Todas
as Notícias </button>
</div>
</div>
</section>
$('#noticia-carousel .owl-carousel').owlCarousel({
items: 2,
dots: false,
nav: true,
navText: ['<i class="fa fa-angle-left" aria-hidden="true"></i>', '<i class="fa fa-angle-right" aria-hidden="true"></i>'],
animateOut: 'fadeOut',
autoplay: true,
loop: true,
autoplayTimeout: 4000,
autoplayHoverPause: true,
responsiveClass: true,
responsive: {
0: {
items: 1,
nav: false
},
600: {
items: 1,
nav: false
},
1000: {
items: 2
},
1300: {
items: 2
}
}
});
Here is how it looks right now: https://educacao.ouropreto.mg.gov.br/
Works great, but the last item is empty. I want it to autoplay and loop.
This HTML after your {% for %} loop has become an item in your carousel because it is a child of .owl-carousel:
<div class="owl-controls">
<div class="owl-nav"></div>
</div>
Remove it and there will be no extra space in the carousel.
Related
I am using slick-carousel in angular 4 slick-carousel
In my home.component.html
<div class="list-books" *ngIf="results?.length > 0">
<div class="col-md-3 col-xs-6" *ngFor="let item of results;let i=index">
<a>
<div class="mt-card-item">
<div class="mt-card-content">
<div class="row">
<div class="col-md-12">
<span>{{item.Name}}</span>
</div>
</div>
<div class="row" >
<div class="col-md-12">
<span>{{item.Address}}</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span class="mt-card-name">{{item.Telephone}}</span>
</div>
</div>
</div>
</div>
</a>
</div>
</div>
Inside my home.component.ts
$('.list-books').slick({
dots: false,
infinite: false,
speed: 300,
fade: false,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 1,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 1
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
The variable results holds the data to be filled in by the carousel. When the component loads I can se the data but could not load the css and breaks the UI. It looks the data comes first but cant load the css cannot figure it out
I have also added the css in my index.html and slick.min.js in my angular.json
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick#1.8.1/slick/slick.css" />
"node_modules/slick-carousel/slick/slick.min.js"
Any idea about what could be done. Any help would be appreciated.
Here try Try to add a timeout for your init()
setTimeout(() => { //you slick-carousel init code }, 1000);
In angular js version it worked as suggested by Nick njj
In angular.json it has a section like:
"styles": [
"//cdn.jsdelivr.net/gh/kenwheeler/slick#1.8.1/slick/slick.css",
],
Or if you want add your src/style.css
#import "//cdn.jsdelivr.net/gh/kenwheeler/slick#1.8.1/slick/slick.css";
And other hand I have found a working example on stackBlitz
example
I need to set custom dots in owl carousel. I have this code in JS:
$(document).ready(function() {
$('#header-slider').owlCarousel({
loop: true,
autoplay: true,
autoplayTimeout: 2300,
pagination: false,
navigation: true,
navText: [$('.am-next'), $('.am-prev')],
navigation: true,
margin: 0,
dotsData: ["<button role='button' class='owl-dot'></button><svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='16' height='16' viewbox='0 0 250 250' enable-background='new 0 0 426.667 410' xml:space='preserve'><path class='loader' transform='translate(125, 125) scale(.84)'></svg>"],
responsive: {
0: {
items: 1
},
600: {
items: 1
},
1000: {
items: 1,
nav: false
},
1200: {
items: 1,
nav: false
}
}
});
});
But with this code nothing happend, just undefined dots are displayed. Is even possible to make custom dots like this?
Change the following code like this:
$(document).ready(function() {
$('#header-slider').owlCarousel({
loop: true,
autoplay: true,
autoplayTimeout: 2300,
pagination: false,
navigation: true,
navText: [$('.am-next'), $('.am-prev')],
navigation: true,
margin: 0,
dotData: true,
dotsData: true
responsive: {
0: {
items: 1
},
600: {
items: 1
},
1000: {
items: 1,
nav: false
},
1200: {
items: 1,
nav: false
}
}
});
});
Add your dots data in your owl-item:
<div class="item" data-dot="<button role='button' class='owl-dot'></button>">
<!-- Your Image -->
</div>
So looking at the documentation, the dotsData option takes a boolean which just tells Owl Carousel to look for the data-dot attribute for each item a dot is shown for. So your custom markup needs to go into the HTML rather than being passed in as a string when configuring the carousel in JS.
If you check this Fiddle you can see how the JS option relates to the HTML data attribute: https://jsfiddle.net/4xymnwey/
HTML
<ul class="owl-carousel owl-theme">
<li class="carousel-slot" data-dot="<p>text 1</p>">slide 1</li>
<li class="carousel-slot" data-dot="<p>text 2</p>">slide 2</li>
<li class="carousel-slot" data-dot="<p>text 3</p>">slide 3</li>
</ul>
JS
$(".owl-carousel").owlCarousel({
items: 1,
dots: true,
dotsData: true
});
Credit to this issue comment on GitHub for the answer. I hope that helps :)
If nothing helped to you.
Try to achieve manually.
Here is the example:-
HTML Auto-generated by Owl-carousel
<div class="owl-controls">
<div class="owl-pagination">
<div class="owl-page"><span class=""></span></div>
<div class="owl-page"><span class=""></span></div>
<div class="owl-page active"><span class=""></span></div>
<div class="owl-page"><span class=""></span></div>
<div class="owl-page"><span class=""></span></div>
<div class="owl-page"><span class=""></span></div>
</div>
</div>
It will auto-generated by Owl carousel.
select parent id/class of this and change content using javascript or jquery. It's totally up to you.
here is the example:-
Javascript
var dots = document.querySelectorAll("#testomonial .owl-pagination .owl-page");
let i=1;
dots.forEach((elem)=>{
elem.innerHTML = i;
i++;
})
I've installed Slick sliders synced slides for product images and thumbnails and it all works fine until you use the main image to navigate instead of the thumbnails.
You can see the issue here:
https://monosnap.com/file/2wLtDBErumVnQs8UlA5PtRro8UBQZq
It's run on Shopify but I don't think that would be the issue it's more something to do with centring but I just can't figure it out!
Any help appreciated!
document.addEventListener("DOMContentLoaded", function(event) {
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
fade: true,
asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: false,
centerMode: true,
focusOnSelect: true,
infinite: true
});
});
<div class="slider-for">
{% for image in product.images %}
<img src="{{image | img_url: '565x', crop: 'center'}}" title="{{image.alt | default: product.title | escape}}" alt='{{image.alt | default: product.title | escape}}'/>
{% endfor %}
</div>
<div class="slider-nav">
{% for image in product.images %}
<div>
<img src="{{image | img_url: '400x'}}" alt="{{image.alt | default: product.title | escape}}" class="product-thumbnails">
</div>
{% endfor %}
</div>
I am using jquery owl carousel plugin to dynamically present html page components to the users.
The problem is the Prev/Next navigation and loop not working with dynamically added contents if the Drag triggers are set to false/ disabled.
Here is the codes:
Options
var owlcarousel_obj = {
loop: true,
nav: true,
navContainer: "#cv-navigation",
mouseDrag: false,
touchDrag: false,
pullDrag: false,
dots: true,
dotsEach: true, */
navText: ['<span id="nav-arrow-left" class="nav-arrow inline-block"><i class="fa fa-chevron-left fa-lg"></i></span>', '<span id="nav-arrow-right" class="nav-arrow inline-block"><i class="fa fa-chevron-right fa-lg"></i></span>'],
nestedItemSelector: "owl-item",
responsive:{
0:{
items:1,
},
320:{
items:2,
},
480:{
items:3,
},
768:{
items:4,
},
1000:{
items:6,
}
}
};
initialize owl carousel
var vartcarousel = $("#cv-contents");
vartcarousel.owlCarousel(owlcarousel_obj);
I added this custom trigger, but still not working
$(".nav-arrow-left").on("click touch", function(){
vartcarousel.trigger("next.owl.carousel");
});
$(".nav-arrow-right").on("click touch", function(){
vartcarousel.trigger("prev.owl.carousel");
});
Load contents dynamically
$(".call-header").on("click touch", function(e){
var comvars = $("#packagename-variations-group").html();
vartcarousel.trigger("add.owl.carousel", comvars).trigger("refresh.owl.carousel");
e.stopImmediatePropagation();
});
HTML
<div id="cv-header" class="d-table">
<span class="cv-header-text pull-left">Test</span>
<span class="cv-close-box"><i class="fa fa-times fa-lg"></i></span>
<div id="cv-navigation" class="pull-right d-tcell"></div>
<div class='clear'></div>
</div>
<div id="cv-contents" class="">
</div>
How to solve this problem?
The owlCarouel object is now linked to the object with the "data" jQuery binder, and uses its own prev / next methods, use it like that :
var varcaroulsedata = varcarousel.data('owlCarousel');
$(".nav-arrow-left").on("click touch", function(){
varcaroulsedata.prev();
});
$(".nav-arrow-right").on("click touch", function(){
varcaroulsedata.next();
});
firstly here's the fiddle: http://jsfiddle.net/krish7878/m2gnrx2v/1/
There are two instances of owl slider with custom controls each generated by its own code, the problem is, when the controls are clicked both the sliders respond instead of the respective slider responding.
HTML:
<div class="customNavigation">
<a class="btn prev">
<i class="fa fa-chevron-left"></i>
</a>
<a class="btn next">
<i class="fa fa-chevron-right"></i>
</a>
JS:
// Custom Navigation Events
$(".next").click(function(){
slider1.trigger('owl.next');
})
$(".prev").click(function(){
slider1.trigger('owl.prev');
})
The code is a bit long (but very simple), please have a look at the fiddle
This must be a javascript issue, something must be changed somewhere, I tried changing the class names of buttons but they stopped working.
$(".next") action affects to all next css class. Use different CSS class or use a more complex expression like #slider1 > .next if buttons are inside the slider or changing .next with .nextslider1 and .nextslider2
example (http://jsfiddle.net/krish7878/m2gnrx2v/1/)
Html:
<div class="container">
<div id="slider-1">
...
</div>
<div class="customNavigation">
<a class="btn prev1"><i class="fa fa-chevron-left"></i></a>
<a class="btn next1"><i class="fa fa-chevron-right"></i></a>
</div>
</div>
...
<div class="container">
<div id="slider-2">
...
</div>
<div class="customNavigation">
<a class="btn prev2"><i class="fa fa-chevron-left"></i></a>
<a class="btn next2"><i class="fa fa-chevron-right"></i></a>
</div>
</div>
Javascript:
$(document).ready(function() {
var slider1 = $("#slider-1");
slider1.owlCarousel({
autoPlay: 3000,
items : 5,
pagination: false,
stopOnHover: true,
itemsDesktop : [1199,3],
itemsDesktopSmall : [979,3]
});
$(".next1").click(function(){ slider1.trigger('owl.next'); });
$(".prev1").click(function(){ slider1.trigger('owl.prev'); });
var slider2 = $("#slider-2");
slider2.owlCarousel({
autoPlay: 3000,
items : 5,
pagination: false,
stopOnHover: true,
itemsDesktop : [1199,3],
itemsDesktopSmall : [979,3]
});
$(".next2").click(function(){ slider2.trigger('owl.next'); });
$(".prev2").click(function(){ slider2.trigger('owl.prev'); });
});
Also you can make it smaller using a function that composes each slider
function doSlider(num){
var slider = $("#slider-" +num);
slider.owlCarousel({
autoPlay: 3000,
items : 5,
pagination: false,
stopOnHover: true,
itemsDesktop : [1199,3],
itemsDesktopSmall : [979,3]
});
$(".next"+num).click(function(){slider.trigger('owl.next');});
$(".prev"+num ).click(function(){slider.trigger('owl.prev');});
}
$(document).ready(function() {
doSlider(1);
doSlider(2);
});
You use the same click event for each set of buttons.
I changed your html to:
<div class="customNavigation">
<a class="btn1prev">
<i class="fa fa-chevron-left"></i>
</a>
<a class="btn1next">
<i class="fa fa-chevron-right"></i>
</a>
and the js accordingly:
// Custom Navigation Events
$(".btn1next").click(function(){
slider1.trigger('owl.next');
})
$(".btn1prev").click(function(){
slider1.trigger('owl.prev');
})
Notice the btn1next and btn1prev. I did the same thing for the 2nd buttons.
The js fiddle: http://jsfiddle.net/krish7878/m2gnrx2v/1/