i try to make design like image below.
i set the initial slide on "1". i want to make the swiper navigation disable on index "1".
can you please to figure it out how?
i already try so many answer on stack overflow, but still can't.
here's my code.
//Initialize Swiper
var swiper = new Swiper('.swiper-container.other-adventure', {
autoHeight: true,
initialSlide: 1,
slidesPerView: 4,
centeredSlides: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
breakpoints: {
480: {
slidesPerView: 1,
spaceBetween: 20,
},
768: {
slidesPerView: 3,
spaceBetween: 20,
},
1024: {
slidesPerView: 4,
spaceBetween: 15,
},
2560: {
slidesPerView: 4,
spaceBetween: 15,
},
}
});
It's hard to know what you're trying to do (Your design and the code you added not match).
Anyway, this is the outline for "doing something" on some index.
swiper API slideChange & realIndex
One way is simply to use swiper API slideChange event and realIndex property and On slide change if realIndex == 0... do something.
Docs:
https://swiperjs.com/swiper-api#methods-and-properties
https://swiperjs.com/swiper-api#events
** First item has an index of 0.
<script>
/* hide left arrow on load (Another option is to put this code inside init event) */
var arrow = document.getElementsByClassName('swiper-button-prev')[0];
arrow.style.display = 'none';
/* Swiper API - if index = 1 hide left arrow / otherwise show */
swiper.on('slideChange', function() {
var realIndex = swiper.realIndex;
if (realIndex == 0) {
console.log(realIndex + " - hide arrow");
arrow.style.display = 'none';
} else {
console.log(realIndex + " - show arrow");
arrow.style.display = 'block';
}
});
</script>
Full code example:
html, body {
position: relative;
height: 100%;
margin: 0;
padding: 0;
height: 500px;
}
.swiper-container {
width: 100%;
height: 100px;
}
.swiper-slide {
text-align: center;
font-size: 24px;
background: black;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
.swiper-slide-active{
background: red;
}
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper#6.2.0/swiper-bundle.min.css">
</head>
<body>
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
</div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<!-- Swiper JS -->
<script src="https://unpkg.com/swiper#6.2.0/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
initialSlide: 1,
slidesPerView: 3,
spaceBetween: 20,
centeredSlides: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>
<script>
/* hide left arrow by deafult */
var arrow = document.getElementsByClassName('swiper-button-prev')[0];
arrow.style.display = 'none';
/* Swiper API - if index = 1 hide left arrow / otherwise show */
swiper.on('slideChange', function() {
var realIndex = swiper.realIndex;
if (realIndex == 0) {
console.log("real index:" + realIndex + " - hide arrow");
arrow.style.display = 'none';
} else {
console.log("real index:" + realIndex + " - show arrow");
arrow.style.display = 'block';
}
});
</script>
Show/hide by simple js:
https://gomakethings.com/how-to-show-and-hide-elements-with-vanilla-javascript/
Related
I would like to create Rectangle Shapes and Connections using the Vue-Konva/Konvajs within my application. I do not want to create load the Static values rather I would like to create the Shapes when the user clicks on the Add Node button and create Connectors when the user clicks on the Add Connector button and build the connections between Shapes.
I looked into a few things and was able to do it using the mouse events but was unable to convert it to button clicks.
Following is the current code I have: CodeSandbox
Can someone please guide me on how to create shapes and connectors on click of the button events? Any suggestion or guidance is much appreciated.
I am looking something like this:
After trying a few things I was able to get it working. Posting here as it can be useful to someone in the future:
<template>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<button class="btn btn-primary btn-sm" #click="addEvent()">
Add Event
</button>
<button class="btn btn-success btn-sm" #click="submitNodes()">
Submit
</button>
</div>
</div>
<div class="row root">
<div class="col-sm-12 body">
<v-stage
ref="stage"
class="stage"
:config="stageSize"
#mouseup="handleMouseUp"
#mousemove="handleMouseMove"
#mousedown="handleMouseDown"
>
<v-layer ref="layer">
<v-rect
v-for="(rec, index) in nodeArray"
:key="index"
:config="{
x: Math.min(rec.startPointX, rec.startPointX + rec.width),
y: Math.min(rec.startPointY, rec.startPointY + rec.height),
width: Math.abs(rec.width),
height: Math.abs(rec.height),
fill: 'rgb(0,0,0,0)',
stroke: 'black',
strokeWidth: 3,
}"
/>
</v-layer>
</v-stage>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
stageSize: {
width: null,
height: 900
},
lines: [],
isDrawing: false,
eventFlag: false,
nodeCounter: 0,
nodeArray: []
}
},
mounted () {
if (process.browser && window !== undefined) {
this.stageSize.width = window.innerWidth
// this.stageSize.height = window.innerHeight
}
},
methods: {
handleMouseDown (event) {
if (this.eventFlag) {
this.isDrawing = true
const pos = this.$refs.stage.getNode().getPointerPosition()
const nodeInfo = this.nodeArray[this.nodeArray.length - 1]
nodeInfo.startPointX = pos.x
nodeInfo.startPointY = pos.y
console.log(JSON.stringify(nodeInfo, null, 4))
}
},
handleMouseUp () {
this.isDrawing = false
this.eventFlag = false
},
setNodes (element) {
this.nodeArray = element
},
handleMouseMove (event) {
if (!this.isDrawing) {
return
}
// console.log(event);
const point = this.$refs.stage.getNode().getPointerPosition()
// Handle rectangle part
const curRec = this.nodeArray[this.nodeArray.length - 1]
curRec.width = point.x - curRec.startPointX
curRec.height = point.y - curRec.startPointY
},
// Function to read the Nodes after add all the nodes
submitNodes () {
console.log('ALL NODE INFO')
console.log(JSON.stringify(this.nodeArray, null, 4))
this.handleDragstart()
},
addEvent () {
this.eventFlag = true
this.setNodes([
...this.nodeArray,
{
width: 0,
height: 0,
draggable: true,
name: 'Event ' + this.nodeCounter
}
])
this.nodeCounter++
}
}
}
</script>
<style scoped>
.root {
--bg-color: #fff;
--line-color-1: #D5D8DC;
--line-color-2: #a9a9a9;
}
.body {
height: 100vh;
margin: 0;
}
.stage {
height: 100%;
background-color: var(--bg-color);
background-image: conic-gradient(at calc(100% - 2px) calc(100% - 2px),var(--line-color-1) 270deg, #0000 0),
conic-gradient(at calc(100% - 1px) calc(100% - 1px),var(--line-color-2) 270deg, #0000 0);
background-size: 100px 100px, 20px 20px;
}
</style>
hi i'm trying to create responsive slider on my wordpress website, i want to have slider on desktop 5 columns, on tablet 4 columns, and on mobile 3 columns, and hide arrows on mobile using css
this are my codes:
but is seems not working, on any browser width it still display 3 columns, how to fix? thanks
<html>
<!-- start slider -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div>slider item</div>
<div>slider item</div>
<div>slider item</div>
<div>slider item</div>
<div>slider item</div>
</div>
<!-- Add Pagination -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
}
</html>
and this is my jquery
jQuery(document).ready(function () {
//initialize swiper when document ready
var mySwiper = new Swiper ('.swiper-container', {
slidesPerView: 3,
spaceBetween: 10,
breakpoints: {
'480': {
slidesPerView: 4,
spaceBetween: 40,},
'#640': {
slidesPerView: 5,
spaceBetween: 50, },
},
// Optional parameters
freeMode: true,
loop: false,
scrollbar: {
el: '.swiper-scrollbar',
hide: true,},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev', },
})
});
Wrong syntax.
Problem 1
Missing swiper-slide class.
https://swiperjs.com/get-started/
Change this:
<div>Slide 1</div> to <div class="swiper-slide">Slide 1</div>
Problem 2
Remove this # + the single quotes (Not '480' but 480). swiper param breakpoints - docs
Change
'#640': {
slidesPerView: 5,
spaceBetween: 50, },
},
To:
640: {
slidesPerView: 5,
spaceBetween: 50, },
},
var swiper = new Swiper('.swiper-container', {
// Default parameters
slidesPerView: 1,
spaceBetween: 10,
// Responsive breakpoints
breakpoints: {
// when window width is >= 320px
320: {
slidesPerView: 2,
spaceBetween: 20
},
// when window width is >= 480px
480: {
slidesPerView: 3,
spaceBetween: 30
},
// when window width is >= 640px
640: {
slidesPerView: 4,
spaceBetween: 40
}
}
})
Simple example:
html, body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper#6.4.8/swiper-bundle.min.css">
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">slider item</div>
<div class="swiper-slide">slider item</div>
<div class="swiper-slide">slider item</div>
<div class="swiper-slide">slider item</div>
<div class="swiper-slide">slider item</div>
</div>
<!-- Add Pagination -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
<!-- Swiper JS -->
<script src="https://unpkg.com/swiper#6.4.8/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
//initialize swiper when document ready
var swiper = new Swiper ('.swiper-container', {
slidesPerView: 2,
spaceBetween: 10,
breakpoints: {
480: {
slidesPerView: 4,
spaceBetween: 40,
},
640: {
slidesPerView: 5,
spaceBetween: 50,
}
},
// Optional parameters
})
</script>
Follow this demo:
https://github.com/nolimits4web/Swiper/blob/master/demos/380-responsive-breakpoints.html
https://stackblitz.com/edit/swiper-demo-37-responsive-breakpoints?file=index.html
for React you can use this
<Swiper
breakpoints={{
320: { slidesPerView: 2, spaceBetween: 80 },
480: { slidesPerView: 3, spaceBetween: 150 },
768: { slidesPerView: 3, spaceBetween: 50 },
1024: { slidesPerView: 6, spaceBetween: 150 },
}}
freeMode
centeredSlides
grabCursor
centeredSlidesBounds
modules={[FreeMode, Scrollbar]}
>
{[1, 2, 3, 4, 5, 6, 7, 9, 8]?.map((i) => (
<SwiperSlide key={i}>
<SmallCard />
</SwiperSlide>
))}
</Swiper>
first of all thank you for your time because I spent all the morning on this issue. How use the https://idangero.us/swiper module on vue.JS ? Indeed Swiper is on the page but the parameters seems to be not taken in count.
I tried also vue awesome swiper but I prefer use the official version without bug. I tried to init swiper also in a const just after the import.
<template>
<div class="swiper-container">
<div class="swiper-wrapper">
<v-touch
#tap="navigateTo(item)"
v-for="item in subList"
:key="item._id"
class="swiper-slide"
>
{{t(item.sentence)}}
</v-touch>
</div>
</div>
</template>
<script>
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.css'
import 'swiper/dist/js/swiper.js'
export default {
name: 'category',
data () {
return {
subList: [{some data}],
}
},
mounted () {
this.initSwiper()
},
methods: {
initSwiper () {
const mySwiper = new Swiper('.swiper-container', {
slidesPerView: 3,
slidesPerColumn: 2,
spaceBetween: 50
})
mySwiper.init()
}
}
}
</script>
<style scoped>
.swiper-slide {
display: flex;
justify-content: center;
align-items: center;
border: solid 2px white;
width: 200px;
height: 200px;
}
</style>
For example with this code I need to have a space between each div or only 2 lines but i have no space and 3 lines... Thank you for your help.
You can now use this Vue Awesome Swiper it has everything you need
you can install it using the following command
npm install swiper vue-awesome-swiper --save
Disclaimer: I have no affiliation nor a contributor to this package, I'm just merely using it. so I recommend it
You can simply use ref to init the slider like so:
<template>
<div>
<div ref="mySlider" class="swiper-container">
…
</div>
<button #click="next">Next Slide</div>
</div>
</template>
import Swiper from 'swiper'
import 'swiper/swiper-bundle.css'
export default {
data () {
return {
slider: null,
mySliderOptions: {
loop: true
}
}
},
methods: {
next() {
this.slider.slideNext()
}
}
mounted () {
this.slider = new Swiper(this.$refs.mySlider, this.mySliderOptions)
}
}
Update
They just released an official vue.js swiper component (only vue.js 3)
This seem to work, not sure if it is a good way to do it
Parent
<Swiper
:options="carouselOptions"
/>
Child (Swiper.vue)
<div v-if="options" ref="swiper" class="carousel-hero carousel-hero--is-hidden swiper-container">...
<script>
import Swiper, { Navigation, Pagination } from 'swiper';
Swiper.use([Navigation, Pagination]);
import 'swiper/swiper-bundle.css';
export default {
name: 'Swiper',
props: {
options: {
type: Object,
default: () => {
return {
slidesPerView: 1
}
}
}
},
data() {
return {
swiper: null,
}
},
mounted() {
let vm = this;
if (this.options && vm.$refs.swiper !== 'undefined') {
vm.$refs.swiper.classList.remove('carousel-hero--is-hidden');
this.swiper = new Swiper(vm.$refs.swiper, {
slidesPerView: this.options.slidesPerView,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
on: {
init: function () {
console.log('swiper initialized');
},
resize: function () {
console.log('resize');
}
}
});
}
},
methods: {
}
};
</script>
I had the same problem a long time ago.
Finally, I added Swiper from cdn, it worked well for me.
I made a simple example for you (with Swiper) hope it will help you.
I took all the CSS props + swiper config from here so feel free to play with it.
Let me know if you have any questions :)
You can also check these docs, it has an explanation on how to config it with Vue & React, etc.
new Vue({
el: '#app',
data: {
swiper: null
},
mounted() {
this.swiper = new window.Swiper('.swiper-container', {
cssMode: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination'
},
mousewheel: true,
keyboard: true,
})
}
})
html, body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
height: 200px !important;
background: pink;
border: 1px solid #888;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.2/css/swiper.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
</div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
</div>
mounted : function(){
var swiper = new Swiper('.swiper-container', {
slidesPerView: 7,
spaceBetween: 0,
slidesPerGroup: 7
});
},
I'm trying to integrate the Accordion component with a body transition, but without success :( . All is working as well except the animation.
template:
<div class="accordion">
<div class="accordion-title" #click="isOpen = !isOpen" :class="{'is-open': isOpen}">
<span>{{title}}</span>
<i class="ic ic-next"></i>
</div>
<div class="accordion-body" :class="{'is-open': isOpen}">
<div class="card">
<slot name="body"></slot>
</div>
</div>
</div>
component:
props: {
title: {
type: String,
default: 'Title'
}
},
data() {
return {
isOpen: false
}
}
And styles:
.accordion-body {
font-size: 1.3rem;
padding: 0 16px;
transition: .3s cubic-bezier(.25,.8,.5,1);
&:not(.is-open) {
display: none;
height: 0;
overflow: hidden;
}
&.is-open {
height: auto;
// display: block;
padding: 16px;
}
}
.card {
height: auto;
}
I tried to use <transition> but it doesn't work with height or display properties.
Help please!
display:none will remove your content and avoid the animation, you should trick with opacity, overflow:hidden and height, but you ll be forced to do a method for that.
For example (not tested, but inspiring):
in template:
<div class="accordion" #click="switchAccordion" :class="{'is-open': isOpen}">
<div class="accordion-title">
<span>{{title}}</span>
<i class="ic ic-next"></i>
</div>
<div class="accordion-body">
<p></p>
</div>
</div>
in component (add a method):
methods: {
switchAccordion: function (event) {
let el = event.target
this.isOpen = !this.isOpen // switch data isOpen
if(this.isOpen) {
let childEl1 = el.childNodes[1]
el.style.height = childEl1.style.height
} else {
let childEl2 = el.childNodes[2]
el.style.height = childE2.style.height // or .clientHeight + "px"
}
}
}
in style:
.accordion {
transition: all .3s cubic-bezier(.25,.8,.5,1);
}
.accordion-body {
font-size: 1.3rem;
padding: 0 16px;
opacity:0
}
.is-open .accordion-body {
opacity:0
}
In this case, your transition should work as you want.
The javascript will change the height value and transition transition: all .3s cubic-bezier(.25,.8,.5,1); will do the animation
I want these three slide background color take turns.
like this: green(1) -> orange(2) -> green(3) - orange(1)...
But current behaviour is not as expected.
How can I fix this?
window.onload = function() {
const defaultOptions = {
speed: 2000,
autoplay: true,
spaceBetween: 4,
direction: 'vertical',
loop: true,
slidesPerView: 'auto',
watchSlidesVisibility: true
};
const swiper = new Swiper('.swiper-container', defaultOptions)
}
.swiper-container{
height: 52px;
}
.swiper-slide{
display: inline-block;
width: auto;
height: 26px;
max-width: 100%;
padding: 0 10px;
}
<script src="https://cdn.staticfile.org/Swiper/3.4.2/js/swiper.js"></script>
<link href="https://cdn.staticfile.org/Swiper/3.4.2/css/swiper.css" rel="stylesheet"/>
<div class='swiper-container'>
<div class='swiper-wrapper'>
<div class='swiper-slide' style='background: green'>message 1</div>
<div class='swiper-slide' style='background: orange'>message 2</div>
<div class='swiper-slide' style='background: green'>message 3</div>
</div>
</div>
You can set the background color on alternate slides but the real trick is toggling them when the duplicate slides are regenerated for the looping functionality.
I've modified your supplied code with a variable to track progress and a test condition when the slides begin to change.
window.onload = function() {
var lastIndex = 0;
const defaultOptions = {
speed: 2000,
autoplay: true,
spaceBetween: 4,
direction: 'vertical',
loop: true,
slidesPerView: 'auto',
watchSlidesVisibility: true,
onSlideNextStart: function(swiperObj) {
if ( swiperObj.activeIndex < lastIndex ) {
swiperObj.container[0].classList.toggle('alt-bg');
}
lastIndex = swiperObj.activeIndex;
}
};
const swiper = new Swiper('.swiper-container', defaultOptions)
}
.swiper-container{
height: 52px;
}
.swiper-slide{
display: inline-block;
width: auto;
height: 26px;
max-width: 100%;
padding: 0 10px;
background: green;
}
.swiper-slide:nth-child(2n+1){
background: orange;
}
.alt-bg .swiper-slide{
background: orange;
}
.alt-bg .swiper-slide:nth-child(2n+1){
background: green;
}
<script src="https://cdn.staticfile.org/Swiper/3.4.2/js/swiper.js"></script>
<link href="https://cdn.staticfile.org/Swiper/3.4.2/css/swiper.css" rel="stylesheet"/>
<div class='swiper-container'>
<div class='swiper-wrapper'>
<div class='swiper-slide'>message 1</div>
<div class='swiper-slide'>message 2</div>
<div class='swiper-slide'>message 3</div>
</div>
</div>