I am using owl carousel 2 plugin to build a carousel. I want it to be with 2 rows (with 3 items in each row) on screens bigger than 480px and 1 row (with 1 item) only on screen smaller than 480px.
Is it doable?
Below is the code used.
<script>
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
responsive:{
0:{
items:1
},
480:{
items:3,
},
768:{
items:5
}
}
})
});
</script>
Related
I create a responsive component. The idea is when the window resizes happens is checked if the window width is lower than breakpoint 960px (based on vuetify breakpoint). So, trigger a slot based on your respective slot directive (mobile or desktop).
The problem is: even when the component is rendered, he has the initial state has mobile, because toolbarWidth is equal to 0.
I want this to be dynamic.
Code:
data() {
return {
toolbarWidth: 0
}
},
created() {
window.addEventListener('resize', this.handleResize)
},
destroyed() {
window.removeEventListener('resize', this.handleResize)
},
computed: {
isMobile() {
return this.toolbarWidth < this.$vuetify.breakpoint.thresholds.sm
},
},
methods: {
handleResize() {
if (this.$refs.toolbar) {
this.toolbarWidth = this.$refs.toolbar.clientWidth
}
}
},
Slots inside template:
<v-menu v-if="isMobile">
...
<slot name="actionsMobile" />
</v-menu>
<slot v-else name="actionsDesktop" />
my advice is to use CSS instead Javascript to manage design , you can use for example Bootstrap class like col-12 for large screen col-md-12 for medium screen and col-sm-12 for small design .
There are a lot of options like
or you can use media query :
// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap
// Small devices (landscape phones, 576px and up)
#media (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up)
#media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
#media (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px and up)
#media (min-width: 1200px) { ... }
You can use these helpful links also:
media-query
bootstrap grid options
I hope that can help you to resolve your issue .
I created this codepen, which is a simple flip card and it works fine in codepen, but when I add this project in my vue project created with cli, everything works fine; upon clicking a card, it shows back of the card, but it doesn't apply that transition so user can visually see that it is rotating. It rotates very fast, sounds like transition is not effecting.
This is the template code
<div v-for="card in cards" #click="toggleCard(card)" :key="card.id">
<transition name="flip">
<div
v-bind:key="card.flipped"
v-html="card.flipped ? card.back : card.front"
></div>
</transition>
</div>
and the script code
export default {
name: "FlipCard",
data() {
return {
cards: [
// cards here
],
};
},
methods: {
toggleCard: function (card) {
const isFlipped = card.flipped;
this.cards.forEach((strategy) => {
strategy.flipped = false;
});
isFlipped === true ? (card.flipped = false) : (card.flipped = true);
},
},
};
and css code:
.flip-enter-active {
transition: all 2s ease;
}
.flip-leave-active {
display: none;
}
.flip-enter,
.flip-leave {
transform: rotateY(180deg) !important;
opacity: 0;
}
can anyone help why in vue cli project the transition is so fast or maybe not applying?
Thank you in advance
The codepen you provided uses Vue 2. Your question is tagged Vue 3, so I assume you are using Vue 3.
Vue 3 made changes to transition class names - https://v3-migration.vuejs.org/breaking-changes/transition.html#_2-x-syntax.
-enter and -leave are now -enter-from and -leave-from.
For a button, by default Bootstrap 4 allow you to set default button "size" between : xs, sm, md, lg, xl.
So, in my code, small screen first, i use sm size for screen <576px :
<button type="button" class="btn btn-success btn-sm"></button>
But for xl screen ≥1200px, need i to change size attribute or something else with Bootstrap to adjust button size ?
I don't really understand Bootstrap responsive behavior for button and 'size' attribute between small and large screen.
Thanks.
I don't think there's anything built out of the box for responsive buttons in bootstrap, you'd probably be better off extending the existing bootstrap button sizes in sass/media queries ie
.responsive-button {
#media (min-width: 576px) { #extend .btn-sm }
#media (min-width: 768px) { #extend .btn-md }
}
I haven't tested this so may need to research a bit further but hopefully this gets you on track :)
According to the Vue.js documentation, i had finally computed my CSS class dynamically according to window.onresizeevent call in mounted () function.
Example :
Here is my Bootstrap button :
<b-button :size="nsize" variant="outline-success" class="my-2 my-sm-0">
<font-awesome-icon icon="search"/>
</b-button>
Here is my function in App.vue file:
<script>
export default {
name: 'topnavbar',
data () {
return {
nsize: "sm",
mediaWidth: Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
}
},
mounted () {
if (window.addEventListener) {
window.addEventListener("resize", this.updateSize, false);
} else if (window.attachEvent) {
window.attachEvent("onresize", this.updateSize);
}
},
methods : {
updateSize: function (){
let sizeEl = "md";
let width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
if(width <= 576){
sizeEl = "sm";
}
this.nsize = sizeEl;
}
}
}
</script>
Sources:
Get the browser viewport dimensions with JavaScript
https://fr.vuejs.org/v2/guide/class-and-style.html
myI have a bootstrap 3 carousel on my page and I've got it set so that on load the autoplay is disabled
$('#myCarousel').carousel({
interval: false
});
I've added some more code so that when the text appears on the screen it should start autoplaying
function myCarouselPlay(){
$('#myCarousel').carousel({
interval: 5000
});
}
Unfortunately this isn't working. Any ideas why?
Hello Can you please try this
<script type="text/javascript">
$(document).ready(function () {
$('.carousel').carousel({
interval: 3000
});
$('.carousel').carousel('cycle');
});
</script>
//here is my carousel view which display some images on carousel code is below
Ext.define("App.view.GView",
{
extend:'Ext.Carousel',
xtype:'GView',
requires:[
'Ext.carousel.Carousel',
'Ext.Img',
'Ext.Loader'
],
config:{
title:'XYZ',
iconCls:'home',
layout:{
type:'vbox',
pack:'center',
align:'center'
},
directionLock:true,
fullscreen:true,
items:[
{
docked:'top',
xtype:'titlebar',
cls:'titleBar',
title:'Gallery'
}
],
xtype:'carousel',
id:'gallerycarousel'
}
});
//Here is my controller code which binds data to
var items = []; Temp array
var xyz= [{ urlL}] My image array
Ext.each(images, function (picture) {
items.push({
xtype: 'image',
cls: 'centerImage',
src: picture.url
});
});
floorCarousel.setItems(items);
floorCarousel.setActiveItem(0);
//My question is to how to add another carousel on the top this carousel that when i move first carousel item than second carousel item also should move and vice verse.. So first carousel is at bottom on top of that i need small size carousel Please help me out little tricky .,,
I'm confused. do you need to know how to create the carousel, or do you just need to know how to make the 2nd carousel move with the main carousel?