I have a problem with the owl carousel slider.
When my html page opening tag is: <html> , the slider works fine and I can see the images.
But when my page opening is: <html dir="rtl">, the slider is not working, I mean I see arrows, and pagination but not the pictures itself:
here is my code:
$("#owl-demo").owlCarousel({
navigation : false,
rtl:true,
slideSpeed : 300,
paginationSpeed : 400,
singleItem:true
});
any help please ?
Put this code in css file
.owl-carousel,
.bx-wrapper { direction: ltr; }
.owl-carousel .owl-item { direction: rtl; }
No need to manually add custom CSS rules anywhere (especially that direction: ltr)...
Owl Carousel v2.3.4
$('.owl-carousel').owlCarousel({
rtl:true // add this to the rest of the options
});
After adding that, Owl Carousel automatically appends an 'owl-rtl' class to the carousel HTML element, and then the plugin's CSS rules will automatically trigger rtl functionality.
You should put
direction: rtl
// maybe even
text-align: right // not sure if necessary
on the parent element of the slider.
This should do the trick.
solution 1: Please try this js Code
$('.owl-carousel').owlCarousel({
rtl:true,
loop:true,
margin:10,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:5
}
}
})
solution 2: Please try this css Code
.owl-carousel,
.bx-wrapper { direction: ltr; }
.owl-carousel .owl-item { direction: rtl; }
In your JS, just put rtl: true. It worked for me.
$id.owlCarousel({
items: 1,
nav: false,
dots: true,
autoplay: true,
rtl: true
});
if you are using owlCarousel then only add this rtl: true, in js file .
$('.hero-slide').owlCarousel({
items: 1,
loop: true,
margin: 0,
autoplay: true,
nav: true,
dots: true,
rtl: true,
navText: ['<span class="icon-arrow_back">', '<span
class="icon-arrow_forward">'],
smartSpeed: 1000
});
Related
I'm using an owl carousel in Webflow and I can't figure out why it isn't working.
Here's the issue:
On the first load, the carousel looks like this:
Image: On Load
On refresh, it corrects a bit, but then is jumpy!
Image: On Refresh
After another refresh, it looks perfect and works perfectly.
Image: On Refresh #2
I tried to make the owl-stage have a min-width, but that completely disabled the slider. I've added a load function to fix some aspects of the slider but isn't perfect.
Here's a link for you to check out: https://edits-52c37b.webflow.io/product/circus-wood
Here's my code:
<script>
$(window).on('load',function() {
$('.projects-col-list.w-dyn-items').owlCarousel({
margin: 8,
center:true,
nav: true,
loop:true,
autoWidth:true,
animateIn:true,
navText:["<div class='nav-btn prev-slide'></div>","<div class='nav-btn next-slide'></div>"],
items:3
});
});
</script>
It was the same problem I solved this way - I hope it helps you too
setTimeout with ready function
$(document).ready(function() {
setTimeout(function(){
$('.projects-col-list.w-dyn-items').owlCarousel({
margin: 8,
center:true,
nav: true,
loop:true,
autoWidth:true,
animateIn:true,
navText:["<div class='nav-btn prev-slide'></div>","<div class='nav-btn next-slide'></div>"],
items:3
}).fadeIn();
}, 1500);
});
.projects-col-list.w-dyn-items {
opacity: 0;
}
Many thanks to #Emy for helping me find the solution!
I found out that my owl-stage wasn't working with display: flex, so I changed it to display block, Now I added display flex to the collection list and it worked! Here's my code that worked:
$(document).ready(function() {
setTimeout(function(){
$('.projects-col-list.w-dyn-items').owlCarousel({
margin: 8,
center:true,
nav: true,
loop:true,
autoWidth:true,
animateIn:true,
navText:["<div class='nav-btn prev-slide'></div>","<div class='nav-btn next-slide'></div>"],
items:3
}).fadeIn();
}, 1500);
});
I did not incude the code :
.projects-col-list.w-dyn-items {
opacity: 0;
}
As it didn't seem to work for me. Hope this helps someone, I might make a tutorial for this so others can build a cool slider in webflow like this! :)
I have two stackblitz examples, the first with horizontal slides and then I change them to vertical slides.
When I make this change, the height gets blown up to something very large.
Any help understanding this?
Here is the stackblitz link that works with horizontal slides link - working
Here is the stackblitz link with vertical slides link - css alignment is off
The only difference is I've changed
direction: 'horizontal',
to
direction: 'vertical',
in the config here
config: SwiperConfigInterface = {
observer: true,
observeParents: true,
observeSlideChildren: true,
direction: 'vertical',
threshold: 50,
spaceBetween: 0,
slidesPerView: 1,
centeredSlides: true,
slideToClickedSlide: true,
pagination: this.pagination,
};
Your wrapper has height auto and swiper library calculates height by itself.
Specify boundaries for your wrapper and it should be enough:
.card-body {
height: 200px;
}
Forked Stackblitz
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
I'm trying out the example code for Chart.js given in the docs.
Width and height is specified inline on the canvas element at 400px/400px.
But when rendering the chart it's blown up to full page width, and cuts off the far right end.
How/where am I supposed to control the width/height of the chart?
You can override the canvas style width !important ...
canvas{
width:1000px !important;
height:600px !important;
}
also
specify responsive:true, property under options..
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
update under options added : maintainAspectRatio: false,
link : http://codepen.io/theConstructor/pen/KMpqvo
You can also simply surround the chart with container (according to official doc http://www.chartjs.org/docs/latest/general/responsive.html#important-note)
HTML
<div class="chart-container">
<canvas id="myCanvas"></canvas>
</div>
CSS
.chart-container {
width: 1000px;
height:600px
}
And with options
responsive: true
maintainAspectRatio: false
In my case, passing responsive: false under options solved the problem. I'm not sure why everybody is telling you to do the opposite, especially since true is the default.
I cannot believe nobody talked about using a relative parent element.
Code:
<div class="chart-container" style="position: relative; height:40vh; width:80vw">
<canvas id="chart"></canvas>
</div>
Sources: Official documentation
You can change the aspectRatio according to your needs:
options:{
aspectRatio:4 //(width/height)
}
This helped in my case:
options: {
responsive: true,
scales: {
yAxes: [{
display: true,
ticks: {
min:0,
max:100
}
}]
}
}
Not mentioned above but using max-width or max-height on the canvas element is also a possibility.
The below worked for me - but dont forget to put this in the "options" param.
var myChart = new Chart(ctx, {
type: 'line',
data: data,
options: {
maintainAspectRatio: false,
responsive:true,
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
You can create a div to wrap the canvas tag,
<div class="wrap">
<canvas id="myChart"></canvas>
</div>
.grafico{
width: 400px !important;
}
any changes in js chart options
var myChart = new Chart(ctx, {
type: 'bar', //doughnut, bar, line, radar, pie, polarArea
data: data,
options: {
scales: {
y: {
beginAtZero: true,
stepSize: 1
}
}
},
});
};
Use this, it works fine.
<canvas id="totalschart" style="height:400px;width: content-box;"></canvas>
and under options,
responsive:true,
I have a need.. On clicking a button my datatable should be viewed in a full screen mode with option to come back to normal. If I am in full screen I shouldnot allowed to work on the parent window. I am not using windows.. I have placed my datatable inside a div. How can I achieve this??
try jQuery popup: http://jqueryui.com/dialog/#modal-form
Check out the documentation and initialize the dialog on loading the page. Here is a sample fiddle as well http://jsfiddle.net/taditdash/PHX2Y/
$("#dialog-confirm").dialog({
resizable: false,
modal: true,
title: "Modal",
height: 250,
width: 400,
buttons: {
"Ok": function() {
$(this).dialog('close');
},
"Cancel": function() {
$(this).dialog('close');
}
}
});
I'm sure a lot of people use the twitter widget that twitter provides.
Here's the code they provide:
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 3,
interval: 6000,
width: 420,
height: 250,
theme: {
shell: {
background: '#ffffff',
color: '#000000'
},
tweets: {
background: '#ffffff',
color: '#000000',
links: '#666666'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('apumpkinpatch').start();
</script>
You can see an example here how when you click the "feedback" tab on left side of screen, the twitter widget appears over the div. Any idea what I can do to prevent this?
I think the class for the widget is .twtr-doc according to the inspector. Anyone know if there is a css attribute I should be adding to it to stop this from happening?
EDIT -: took out IE part of question to just open it up in another question so I can mark the first answer as correct.
Re: the twitter widget being on top of the feedback div, you need to use z-index property in your styles to correct this.
Try adding z-index:100 to your feedback div. I do not have IE or I would help you debug that.